From ec29fff548ced20be1d256cb1b37da039f94c436 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 9 Nov 2022 20:52:40 -0800
Subject: [PATCH 01/49] less cheesy intro

---
 locales/en-US.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index f91163dd9..d8150f71a 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1,7 +1,7 @@
 ---
 _lang_: "English"
 headlineMisskey: "An open source, decentralized social media platform that's free forever! 🚀"
-introMisskey: "Welcome! Calckey is an open source, decentralized microblogging service.\nCreate \"notes\" to share your thoughts with everyone around you. 📡\nWith \"reactions\", you can also quickly express your feelings about everyone's notes. 👍\nLet's explore a new world! 🚀"
+introMisskey: "Welcome! Calckey is an open source, decentralized social media platform that's free forever! 🚀"
 monthAndDay: "{month}/{day}"
 search: "Search"
 notifications: "Notifications"

From 134048b1fb565e98060c8e592b885e36ef60a223 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Thu, 10 Nov 2022 13:13:09 -0800
Subject: [PATCH 02/49] fill tiny quotes

---
 .../client/src/components/MkNotification.vue     | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index 3d2310ae2..4dd369ff5 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -33,14 +33,14 @@
 			<MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
 		</header>
 		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="ph-quotes-bold ph-lg"></i>
+			<i class="ph-quotes-fill ph-lg"></i>
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="ph-quotes-bold ph-lg"></i>
+			<i class="ph-quotes-fill ph-lg"></i>
 		</MkA>
 		<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
-			<i class="ph-quotes-bold ph-lg"></i>
+			<i class="ph-quotes-fill ph-lg"></i>
 			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
-			<i class="ph-quotes-bold ph-lg"></i>
+			<i class="ph-quotes-fill ph-lg"></i>
 		</MkA>
 		<MkA v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
@@ -52,14 +52,14 @@
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 		</MkA>
 		<MkA v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="ph-quotes-bold ph-lg"></i>
+			<i class="ph-quotes-fill ph-lg"></i>
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="ph-quotes-bold ph-lg"></i>
+			<i class="ph-quotes-fill ph-lg"></i>
 		</MkA>
 		<MkA v-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="ph-quotes-bold ph-lg"></i>
+			<i class="ph-quotes-fill ph-lg"></i>
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="ph-quotes-bold ph-lg"></i>
+			<i class="ph-quotes-fill ph-lg"></i>
 		</MkA>
 		<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;">{{ i18n.ts.followRequestAccepted }}</span>

From ca1b1c932169e024a2ade514d65086099bd10be3 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Thu, 10 Nov 2022 14:12:44 -0800
Subject: [PATCH 03/49] refactor: :recycle: Replace all `$ts` with i18n

---
 CALCKEY.md                                    |   1 +
 .../client/src/components/MkContainer.vue     |   3 +-
 .../client/src/components/MkFormDialog.vue    |  13 +-
 packages/client/src/components/MkGoogle.vue   |   3 +-
 .../client/src/components/MkMediaBanner.vue   |   5 +-
 .../client/src/components/MkMediaCaption.vue  |   7 +-
 .../client/src/components/MkMediaImage.vue    |   7 +-
 .../client/src/components/MkMediaVideo.vue    |   5 +-
 .../src/components/MkModalPageWindow.vue      |   5 +-
 .../src/components/MkPostFormAttaches.vue     |  15 +-
 .../src/components/MkTokenGenerateWindow.vue  |  11 +-
 .../client/src/components/form/suspense.vue   |   5 +-
 .../client/src/components/global/MkAd.vue     |   7 +-
 packages/client/src/pages/about.emojis.vue    |   9 +-
 packages/client/src/pages/admin/metrics.vue   | 139 +++++++++---------
 packages/client/src/pages/announcements.vue   |   3 +-
 .../client/src/pages/antenna-timeline.vue     |   2 +-
 packages/client/src/pages/auth.form.vue       |   7 +-
 packages/client/src/pages/auth.vue            |  11 +-
 packages/client/src/pages/explore.users.vue   |   7 +-
 .../page-editor/els/page-editor.el.button.vue |  31 ++--
 .../page-editor/els/page-editor.el.canvas.vue |   9 +-
 .../els/page-editor.el.counter.vue            |   9 +-
 .../page-editor/els/page-editor.el.if.vue     |   8 +-
 .../page-editor/els/page-editor.el.image.vue  |   3 +-
 .../page-editor/els/page-editor.el.note.vue   |   9 +-
 .../els/page-editor.el.number-input.vue       |   9 +-
 .../page-editor/els/page-editor.el.post.vue   |   9 +-
 .../els/page-editor.el.radio-button.vue       |  11 +-
 .../page-editor/els/page-editor.el.switch.vue |   9 +-
 .../els/page-editor.el.text-input.vue         |   9 +-
 .../page-editor/els/page-editor.el.text.vue   |   3 +-
 .../els/page-editor.el.textarea-input.vue     |   9 +-
 .../els/page-editor.el.textarea.vue           |   3 +-
 .../page-editor/page-editor.script-block.vue  |  15 +-
 .../src/pages/page-editor/page-editor.vue     |  30 ++--
 packages/client/src/pages/settings/2fa.vue    |   2 +-
 .../client/src/pages/user/index.activity.vue  |   2 +-
 .../client/src/pages/user/index.photos.vue    |   5 +-
 .../client/src/pages/welcome.entrance.b.vue   |  17 ++-
 .../client/src/pages/welcome.entrance.c.vue   |  25 ++--
 packages/client/src/ui/classic.header.vue     |   7 +-
 packages/client/src/ui/classic.sidebar.vue    |  11 +-
 packages/client/src/ui/classic.widgets.vue    |   5 +-
 packages/client/src/ui/visitor/a.vue          |   7 +-
 packages/client/src/ui/visitor/b.vue          |  16 +-
 packages/client/src/ui/visitor/header.vue     |  19 +--
 packages/client/src/ui/visitor/kanban.vue     |  11 +-
 48 files changed, 306 insertions(+), 262 deletions(-)

diff --git a/CALCKEY.md b/CALCKEY.md
index 8f64109e7..c2925d4c8 100644
--- a/CALCKEY.md
+++ b/CALCKEY.md
@@ -84,6 +84,7 @@
 - Phosphor icons instead of FontAwesome
 - Fully deprecate MkEmojiPickerWindow in favor of MkEmojiPickerDialog
 - Link hover effect
+- Replace all `$ts` with i18n
 - Obliteration of Ai-chan
 - [Make showing ads optional](https://github.com/misskey-dev/misskey/pull/8996)
 - [Tapping avatar in mobile opens account modal](https://github.com/misskey-dev/misskey/pull/9056)
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index dbb028f48..03a2b40ce 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -20,7 +20,7 @@
 		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
 			<slot></slot>
 			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
-				<span>{{ $ts.showMore }}</span>
+				<span>{{ i18n.ts.showMore }}</span>
 			</button>
 		</div>
 	</transition>
@@ -29,6 +29,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	props: {
diff --git a/packages/client/src/components/MkFormDialog.vue b/packages/client/src/components/MkFormDialog.vue
index b2bf76a8c..7c3f6b1fb 100644
--- a/packages/client/src/components/MkFormDialog.vue
+++ b/packages/client/src/components/MkFormDialog.vue
@@ -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="item in form[item].enum" :key="item.value" :value="item.value">{{ item.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="item in form[item].options" :key="item.value" :value="item.value">{{ item.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 './MkButton.vue';
 import FormRadios from './form/radios.vue';
 import XModalWindow from '@/components/MkModalWindow.vue';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/MkGoogle.vue
index ca2bd3323..42c796123 100644
--- a/packages/client/src/components/MkGoogle.vue
+++ b/packages/client/src/components/MkGoogle.vue
@@ -1,12 +1,13 @@
 <template>
 <div class="mk-google">
 	<input v-model="query" type="search" :placeholder="q">
-	<button @click="search"><i class="ph-magnifying-glass-bold ph-lg"></i> {{ $ts.searchByGoogle }}</button>
+	<button @click="search"><i class="ph-magnifying-glass-bold ph-lg"></i> {{ i18n.ts.searchByGoogle }}</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/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index e89ba5ee4..5d299148e 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.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="ph-warning-bold ph-lg"></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">
 		<VuePlyr
@@ -49,6 +49,7 @@ import VuePlyr from 'vue-plyr';
 import type * as misskey from 'misskey-js';
 import { ColdDeviceStorage } from '@/store';
 import 'vue-plyr/dist/vue-plyr.css';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	media: misskey.entities.DriveFile;
diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
index 1ede61756..8d7861ea1 100644
--- a/packages/client/src/components/MkMediaCaption.vue
+++ b/packages/client/src/components/MkMediaCaption.vue
@@ -10,9 +10,9 @@
 				</header>
 				<textarea id="captioninput" v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
 				<div v-if="(showOkButton || showCaptionButton || showCancelButton)" class="buttons">
-					<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ $ts.ok }}</MkButton>
-					<MkButton inline @click="caption">{{ $ts.caption }}</MkButton>
-					<MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton>
+					<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ i18n.ts.ok }}</MkButton>
+					<MkButton inline @click="caption">{{ i18n.ts.caption }}</MkButton>
+					<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
 				</div>
 			</div>
 		</div>
@@ -37,6 +37,7 @@ import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/components/MkMediaImage.vue b/packages/client/src/components/MkMediaImage.vue
index 48db68f5a..73854352b 100644
--- a/packages/client/src/components/MkMediaImage.vue
+++ b/packages/client/src/components/MkMediaImage.vue
@@ -3,8 +3,8 @@
 	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
 	<div class="text">
 		<div class="wrapper">
-			<b style="display: block;"><i class="ph-warning-bold ph-lg"></i> {{ $ts.sensitive }}</b>
-			<span style="display: block;">{{ $ts.clickToShow }}</span>
+			<b style="display: block;"><i class="ph-warning-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
+			<span style="display: block;">{{ i18n.ts.clickToShow }}</span>
 		</div>
 	</div>
 </div>
@@ -16,7 +16,7 @@
 		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :title="image.comment" :cover="false"/>
 		<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
 	</a>
-	<button v-tooltip="$ts.hide" class="_button hide" @click="hide = true"><i class="ph-eye-slash-bold ph-lg"></i></button>
+	<button v-tooltip="i18n.ts.hide" class="_button hide" @click="hide = true"><i class="ph-eye-slash-bold ph-lg"></i></button>
 </div>
 </template>
 
@@ -26,6 +26,7 @@ import * as misskey from 'misskey-js';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	image: misskey.entities.DriveFile;
diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue
index f23485112..a3f40e0fd 100644
--- a/packages/client/src/components/MkMediaVideo.vue
+++ b/packages/client/src/components/MkMediaVideo.vue
@@ -1,8 +1,8 @@
 <template>
 <div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
 	<div>
-		<b><i class="ph-warning-bold ph-lg"></i> {{ $ts.sensitive }}</b>
-		<span>{{ $ts.clickToShow }}</span>
+		<b><i class="ph-warning-bold ph-lg"></i> {{ i18n.ts.sensitive }}</b>
+		<span>{{ i18n.ts.clickToShow }}</span>
 	</div>
 </div>
 <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
@@ -46,6 +46,7 @@ import VuePlyr from 'vue-plyr';
 import type * as misskey from 'misskey-js';
 import { defaultStore } from '@/store';
 import 'vue-plyr/dist/vue-plyr.css';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index bc02d7cc1..2dfcc1042 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -2,7 +2,7 @@
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
 	<div ref="rootEl" class="hrmcaedk _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header" @contextmenu="onContextmenu">
-			<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="ph--left-bold ph-lg"></i></button>
+			<button v-if="history.length > 0" v-tooltip="i18n.ts.goBack" class="_button" @click="back()"><i class="ph--left-bold ph-lg"></i></button>
 			<span v-else style="display: inline-block; width: 20px"></span>
 			<span v-if="pageMetadata?.value" class="title">
 				<i v-if="pageMetadata?.value.icon" class="icon" :class="pageMetadata?.value.icon"></i>
@@ -31,6 +31,7 @@ import { mainRouter, routes } from '@/router';
 import { i18n } from '@/i18n';
 import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 import { Router } from '@/nirax';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	initialPath: string;
@@ -44,7 +45,7 @@ defineEmits<{
 const router = new Router(routes, props.initialPath);
 
 router.addListener('push', ctx => {
-	
+
 });
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index 33af463d3..373967143 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -18,6 +18,7 @@
 import { defineComponent, defineAsyncComponent } from 'vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
@@ -73,7 +74,7 @@ export default defineComponent({
 		},
 		async rename(file) {
 			const { canceled, result } = await os.inputText({
-				title: this.$ts.enterFileName,
+				title: this.i18n.ts.enterFileName,
 				default: file.name,
 				allowEmpty: false,
 			});
@@ -89,9 +90,9 @@ export default defineComponent({
 
 		async describe(file) {
 			os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
-				title: this.$ts.describeFile,
+				title: this.i18n.ts.describeFile,
 				input: {
-					placeholder: this.$ts.inputNewDescription,
+					placeholder: this.i18n.ts.inputNewDescription,
 					default: file.comment !== null ? file.comment : '',
 				},
 				image: file,
@@ -112,19 +113,19 @@ export default defineComponent({
 		showFileMenu(file, ev: MouseEvent) {
 			if (this.menu) return;
 			this.menu = os.popupMenu([{
-				text: this.$ts.renameFile,
+				text: this.i18n.ts.renameFile,
 				icon: 'ph-cursor-text-bold ph-lg',
 				action: () => { this.rename(file); },
 			}, {
-				text: file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
+				text: file.isSensitive ? this.i18n.ts.unmarkAsSensitive : this.i18n.ts.markAsSensitive,
 				icon: file.isSensitive ? 'ph-eye-slash-bold ph-lg' : 'ph-eye-bold ph-lg',
 				action: () => { this.toggleSensitive(file); },
 			}, {
-				text: this.$ts.describeFile,
+				text: this.i18n.ts.describeFile,
 				icon: 'ph-cursor-text-bold ph-lg',
 				action: () => { this.describe(file); },
 			}, {
-				text: this.$ts.attachCancel,
+				text: this.i18n.ts.attachCancel,
 				icon: 'ph-circle-wavy-warning-bold ph-lg',
 				action: () => { this.detachMedia(file.id); },
 			}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
diff --git a/packages/client/src/components/MkTokenGenerateWindow.vue b/packages/client/src/components/MkTokenGenerateWindow.vue
index b846034a2..43d260c01 100644
--- a/packages/client/src/components/MkTokenGenerateWindow.vue
+++ b/packages/client/src/components/MkTokenGenerateWindow.vue
@@ -10,19 +10,19 @@
 	@closed="$emit('closed')"
 	@ok="ok()"
 >
-	<template #header>{{ title || $ts.generateAccessToken }}</template>
+	<template #header>{{ title || i18n.ts.generateAccessToken }}</template>
 	<div v-if="information" class="_section">
 		<MkInfo warn>{{ information }}</MkInfo>
 	</div>
 	<div class="_section">
 		<MkInput v-model="name">
-			<template #label>{{ $ts.name }}</template>
+			<template #label>{{ i18n.ts.name }}</template>
 		</MkInput>
 	</div>
 	<div class="_section">
-		<div style="margin-bottom: 16px;"><b>{{ $ts.permission }}</b></div>
-		<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
-		<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
+		<div style="margin-bottom: 16px;"><b>{{ i18n.ts.permission }}</b></div>
+		<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
+		<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
 		<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
 	</div>
 </XModalWindow>
@@ -36,6 +36,7 @@ import MkSwitch from './form/switch.vue';
 import MkButton from './MkButton.vue';
 import MkInfo from './MkInfo.vue';
 import XModalWindow from '@/components/MkModalWindow.vue';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	title?: string | null;
diff --git a/packages/client/src/components/form/suspense.vue b/packages/client/src/components/form/suspense.vue
index 7e56259be..7db0018a3 100644
--- a/packages/client/src/components/form/suspense.vue
+++ b/packages/client/src/components/form/suspense.vue
@@ -8,8 +8,8 @@
 	</div>
 	<div v-else>
 		<div class="wszdbhzo">
-			<div><i class="ph-warning-bold ph-lg"></i> {{ $ts.somethingHappened }}</div>
-			<MkButton inline class="retry" @click="retry"><i class="ph-arrow-clockwise-bold ph-lg"></i> {{ $ts.retry }}</MkButton>
+			<div><i class="ph-warning-bold ph-lg"></i> {{ i18n.ts.somethingHappened }}</div>
+			<MkButton inline class="retry" @click="retry"><i class="ph-arrow-clockwise-bold ph-lg"></i> {{ i18n.ts.retry }}</MkButton>
 		</div>
 	</div>
 </transition>
@@ -18,6 +18,7 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from 'vue';
 import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/components/global/MkAd.vue b/packages/client/src/components/global/MkAd.vue
index 6274484bb..0316a6bdf 100644
--- a/packages/client/src/components/global/MkAd.vue
+++ b/packages/client/src/components/global/MkAd.vue
@@ -9,9 +9,9 @@
 	<div v-else class="menu">
 		<div class="body">
 			<div>Ads by {{ host }}</div>
-			<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
-			<MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
-			<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
+			<!--<MkButton class="button" primary>{{ i18n.ts._ad.like }}</MkButton>-->
+			<MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ i18n.ts._ad.reduceFrequencyOfThisAd }}</MkButton>
+			<button class="_textButton" @click="toggleMenu">{{ i18n.ts._ad.back }}</button>
 		</div>
 	</div>
 </div>
@@ -25,6 +25,7 @@ import { host } from '@/config';
 import MkButton from '@/components/MkButton.vue';
 import { defaultStore } from '@/store';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 type Ad = (typeof instance)['ads'][number];
 
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index bc30ff1d9..eae1f5ba7 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="driuhtrh">
 	<div class="query">
-		<MkInput v-model="q" class="" :placeholder="$ts.search">
+		<MkInput v-model="q" class="" :placeholder="i18n.ts.search">
 			<template #prefix><i class="ph-magnifying-glass-bold ph-lg"></i></template>
 		</MkInput>
 
@@ -13,14 +13,14 @@
 	</div>
 
 	<MkFolder v-if="searchEmojis" class="emojis">
-		<template #header>{{ $ts.searchResult }}</template>
+		<template #header>{{ i18n.ts.searchResult }}</template>
 		<div class="zuvgdzyt">
 			<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" class="emoji" :emoji="emoji"/>
 		</div>
 	</MkFolder>
-	
+
 	<MkFolder v-for="category in customEmojiCategories" :key="category" class="emojis">
-		<template #header>{{ category || $ts.other }}</template>
+		<template #header>{{ category || i18n.ts.other }}</template>
 		<div class="zuvgdzyt">
 			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/>
 		</div>
@@ -38,6 +38,7 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkTab from '@/components/MkTab.vue';
 import * as os from '@/os';
 import { emojiCategories, emojiTags } from '@/instance';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/pages/admin/metrics.vue b/packages/client/src/pages/admin/metrics.vue
index d371fef93..79667d6ab 100644
--- a/packages/client/src/pages/admin/metrics.vue
+++ b/packages/client/src/pages/admin/metrics.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="ph-microchip-bold ph-lg"></i> {{ $ts.cpuAndMemory }}</div>
+	<div class="_debobigegoLabel"><i class="ph-microchip-bold ph-lg"></i> {{ i18n.ts.cpuAndMemory }}</div>
 	<div class="_debobigegoPanel xhexznfu">
 		<div>
 			<canvas :ref="cpumem"></canvas>
@@ -17,7 +17,7 @@
 	</div>
 </div>
 <div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="ph-hard-drives-bold ph-lg"></i> {{ $ts.disk }}</div>
+	<div class="_debobigegoLabel"><i class="ph-hard-drives-bold ph-lg"></i> {{ i18n.ts.disk }}</div>
 	<div class="_debobigegoPanel xhexznfu">
 		<div>
 			<canvas :ref="disk"></canvas>
@@ -34,7 +34,7 @@
 	</div>
 </div>
 <div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="ph-swap-bold ph-lg"></i> {{ $ts.network }}</div>
+	<div class="_debobigegoLabel"><i class="ph-swap-bold ph-lg"></i> {{ i18n.ts.network }}</div>
 	<div class="_debobigegoPanel xhexznfu">
 		<div>
 			<canvas :ref="net"></canvas>
@@ -53,43 +53,44 @@
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
 import {
-  Chart,
-  ArcElement,
-  LineElement,
-  BarElement,
-  PointElement,
-  BarController,
-  LineController,
-  CategoryScale,
-  LinearScale,
-  Legend,
-  Title,
-  Tooltip,
-  SubTitle
+	Chart,
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
 } from 'chart.js';
+import MkwFederation from '../../widgets/federation.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkInput from '@/components/form/input.vue';
 import MkContainer from '@/components/MkContainer.vue';
 import MkFolder from '@/components/MkFolder.vue';
-import MkwFederation from '../../widgets/federation.vue';
 import { version, url } from '@/config';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
+import { i18n } from '@/i18n';
 
 Chart.register(
-  ArcElement,
-  LineElement,
-  BarElement,
-  PointElement,
-  BarController,
-  LineController,
-  CategoryScale,
-  LinearScale,
-  Legend,
-  Title,
-  Tooltip,
-  SubTitle
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
 );
 
 const alpha = (hex, a) => {
@@ -155,13 +156,13 @@ export default defineComponent({
 			this.connection.on('statsLog', this.onStatsLog);
 			this.connection.send('requestLog', {
 				id: Math.random().toString().substr(2, 8),
-				length: 150
+				length: 150,
 			});
 
 			this.$nextTick(() => {
 				this.queueConnection.send('requestLog', {
 					id: Math.random().toString().substr(2, 8),
-					length: 200
+					length: 200,
 				});
 			});
 		});
@@ -190,7 +191,7 @@ export default defineComponent({
 						borderWidth: 2,
 						borderColor: '#31748f',
 						backgroundColor: alpha('#31748f', 0.1),
-						data: []
+						data: [],
 					}, {
 						label: 'MEM (active)',
 						pointRadius: 0,
@@ -198,7 +199,7 @@ export default defineComponent({
 						borderWidth: 2,
 						borderColor: '#c4a7e7',
 						backgroundColor: alpha('#c4a7e7', 0.02),
-						data: []
+						data: [],
 					}, {
 						label: 'MEM (used)',
 						pointRadius: 0,
@@ -207,8 +208,8 @@ export default defineComponent({
 						borderColor: '#935dbf',
 						borderDash: [5, 5],
 						fill: false,
-						data: []
-					}]
+						data: [],
+					}],
 				},
 				options: {
 					aspectRatio: 3,
@@ -217,14 +218,14 @@ export default defineComponent({
 							left: 16,
 							right: 16,
 							top: 16,
-							bottom: 0
-						}
+							bottom: 0,
+						},
 					},
 					legend: {
 						position: 'bottom',
 						labels: {
 							boxWidth: 16,
-						}
+						},
 					},
 					scales: {
 						x: {
@@ -235,7 +236,7 @@ export default defineComponent({
 							},
 							ticks: {
 								display: false,
-							}
+							},
 						},
 						y: {
 							position: 'right',
@@ -246,15 +247,15 @@ export default defineComponent({
 							},
 							ticks: {
 								display: false,
-								max: 100
-							}
-						}
+								max: 100,
+							},
+						},
 					},
 					tooltips: {
 						intersect: false,
 						mode: 'index',
-					}
-				}
+					},
+				},
 			}));
 		},
 
@@ -271,7 +272,7 @@ export default defineComponent({
 						borderWidth: 2,
 						borderColor: '#94a029',
 						backgroundColor: alpha('#94a029', 0.1),
-						data: []
+						data: [],
 					}, {
 						label: 'Out',
 						pointRadius: 0,
@@ -279,8 +280,8 @@ export default defineComponent({
 						borderWidth: 2,
 						borderColor: '#ff9156',
 						backgroundColor: alpha('#ff9156', 0.1),
-						data: []
-					}]
+						data: [],
+					}],
 				},
 				options: {
 					aspectRatio: 3,
@@ -289,14 +290,14 @@ export default defineComponent({
 							left: 16,
 							right: 16,
 							top: 16,
-							bottom: 0
-						}
+							bottom: 0,
+						},
 					},
 					legend: {
 						position: 'bottom',
 						labels: {
 							boxWidth: 16,
-						}
+						},
 					},
 					scales: {
 						x: {
@@ -306,8 +307,8 @@ export default defineComponent({
 								zeroLineColor: this.gridColor,
 							},
 							ticks: {
-								display: false
-							}
+								display: false,
+							},
 						},
 						y: {
 							position: 'right',
@@ -318,14 +319,14 @@ export default defineComponent({
 							},
 							ticks: {
 								display: false,
-							}
-						}
+							},
+						},
 					},
 					tooltips: {
 						intersect: false,
 						mode: 'index',
-					}
-				}
+					},
+				},
 			}));
 		},
 
@@ -342,7 +343,7 @@ export default defineComponent({
 						borderWidth: 2,
 						borderColor: '#94a029',
 						backgroundColor: alpha('#94a029', 0.1),
-						data: []
+						data: [],
 					}, {
 						label: 'Write',
 						pointRadius: 0,
@@ -350,8 +351,8 @@ export default defineComponent({
 						borderWidth: 2,
 						borderColor: '#ff9156',
 						backgroundColor: alpha('#ff9156', 0.1),
-						data: []
-					}]
+						data: [],
+					}],
 				},
 				options: {
 					aspectRatio: 3,
@@ -360,14 +361,14 @@ export default defineComponent({
 							left: 16,
 							right: 16,
 							top: 16,
-							bottom: 0
-						}
+							bottom: 0,
+						},
 					},
 					legend: {
 						position: 'bottom',
 						labels: {
 							boxWidth: 16,
-						}
+						},
 					},
 					scales: {
 						x: {
@@ -377,8 +378,8 @@ export default defineComponent({
 								zeroLineColor: this.gridColor,
 							},
 							ticks: {
-								display: false
-							}
+								display: false,
+							},
 						},
 						y: {
 							position: 'right',
@@ -389,14 +390,14 @@ export default defineComponent({
 							},
 							ticks: {
 								display: false,
-							}
-						}
+							},
+						},
 					},
 					tooltips: {
 						intersect: false,
 						mode: 'index',
-					}
-				}
+					},
+				},
 			}));
 		},
 
@@ -458,7 +459,7 @@ export default defineComponent({
 		resume() {
 			this.paused = false;
 		},
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index 17c056e0e..b038a6857 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -10,7 +10,7 @@
 					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
 				</div>
 				<div v-if="$i && !announcement.isRead" class="_footer">
-					<MkButton primary @click="read(items, announcement, i)"><i class="ph-check-bold ph-lg"></i> {{ $ts.gotIt }}</MkButton>
+					<MkButton primary @click="read(items, announcement, i)"><i class="ph-check-bold ph-lg"></i> {{ i18n.ts.gotIt }}</MkButton>
 				</div>
 			</section>
 		</MkPagination>
@@ -25,6 +25,7 @@ import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
 
 const pagination = {
 	endpoint: 'announcements' as const,
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 3fd763138..348512ea7 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/auth.form.vue b/packages/client/src/pages/auth.form.vue
index 6259ce0d0..1051564e5 100644
--- a/packages/client/src/pages/auth.form.vue
+++ b/packages/client/src/pages/auth.form.vue
@@ -7,14 +7,14 @@
 		<p class="description">{{ app.description }}</p>
 	</div>
 	<div class="_content">
-		<h2>{{ $ts._auth.permissionAsk }}</h2>
+		<h2>{{ i18n.ts._auth.permissionAsk }}</h2>
 		<ul>
 			<li v-for="p in app.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
 		</ul>
 	</div>
 	<div class="_footer">
-		<MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton>
-		<MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
+		<MkButton inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+		<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
 	</div>
 </section>
 </template>
@@ -23,6 +23,7 @@
 import { defineComponent } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 const emit = defineEmits<{
 	(ev: 'denied'): void;
diff --git a/packages/client/src/pages/auth.vue b/packages/client/src/pages/auth.vue
index bb55881a2..70c2c9622 100644
--- a/packages/client/src/pages/auth.vue
+++ b/packages/client/src/pages/auth.vue
@@ -12,15 +12,15 @@
 		@accepted="accepted"
 	/>
 	<div v-if="state == 'denied'" class="denied">
-		<h1>{{ $ts._auth.denied }}</h1>
+		<h1>{{ i18n.ts._auth.denied }}</h1>
 	</div>
 	<div v-if="state == 'accepted'" class="accepted">
-		<h1>{{ session.app.isAuthorized ? $t('already-authorized') : $ts.allowed }}</h1>
-		<p v-if="session.app.callbackUrl">{{ $ts._auth.callback }}<MkEllipsis/></p>
-		<p v-if="!session.app.callbackUrl">{{ $ts._auth.pleaseGoBack }}</p>
+		<h1>{{ session.app.isAuthorized ? $t('already-authorized') : i18n.ts.allowed }}</h1>
+		<p v-if="session.app.callbackUrl">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
+		<p v-if="!session.app.callbackUrl">{{ i18n.ts._auth.pleaseGoBack }}</p>
 	</div>
 	<div v-if="state == 'fetch-session-error'" class="error">
-		<p>{{ $ts.somethingHappened }}</p>
+		<p>{{ i18n.ts.somethingHappened }}</p>
 	</div>
 </div>
 <div v-else class="signin">
@@ -34,6 +34,7 @@ import XForm from './auth.form.vue';
 import MkSignin from '@/components/MkSignin.vue';
 import * as os from '@/os';
 import { login } from '@/account';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index b97825e2a..0536b2f41 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -10,15 +10,15 @@
 				<template #header><i class="ph-bookmark-simple-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
 				<XUserList :pagination="pinnedUsers"/>
 			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-popular-users">
+			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-popular-users">
 				<template #header><i class="ph-chart-line-up-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
 				<XUserList :pagination="popularUsers"/>
 			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-recently-updated-users">
+			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-recently-updated-users">
 				<template #header><i class="ph-chat-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
 				<XUserList :pagination="recentlyUpdatedUsers"/>
 			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
+			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-recently-registered-users">
 				<template #header><i class="ph-plus-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsers"/>
 			</MkFolder>
@@ -65,6 +65,7 @@ import MkTab from '@/components/MkTab.vue';
 import number from '@/filters/number';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import { $i } from '@/account';
 import { instance } from '@/instance';
 
 const props = defineProps<{
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
index da6f1e549..20e6a0875 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
@@ -1,38 +1,38 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ $ts._pages.blocks.button }}</template>
+	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ i18n.ts._pages.blocks.button }}</template>
 
 	<section class="xfhsjczc">
-		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._button.text }}</template></MkInput>
-		<MkSwitch v-model="value.primary"><span>{{ $ts._pages.blocks._button.colored }}</span></MkSwitch>
+		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._button.text }}</template></MkInput>
+		<MkSwitch v-model="value.primary"><span>{{ i18n.ts._pages.blocks._button.colored }}</span></MkSwitch>
 		<MkSelect v-model="value.action">
-			<template #label>{{ $ts._pages.blocks._button.action }}</template>
-			<option value="dialog">{{ $ts._pages.blocks._button._action.dialog }}</option>
-			<option value="resetRandom">{{ $ts._pages.blocks._button._action.resetRandom }}</option>
-			<option value="pushEvent">{{ $ts._pages.blocks._button._action.pushEvent }}</option>
-			<option value="callAiScript">{{ $ts._pages.blocks._button._action.callAiScript }}</option>
+			<template #label>{{ i18n.ts._pages.blocks._button.action }}</template>
+			<option value="dialog">{{ i18n.ts._pages.blocks._button._action.dialog }}</option>
+			<option value="resetRandom">{{ i18n.ts._pages.blocks._button._action.resetRandom }}</option>
+			<option value="pushEvent">{{ i18n.ts._pages.blocks._button._action.pushEvent }}</option>
+			<option value="callAiScript">{{ i18n.ts._pages.blocks._button._action.callAiScript }}</option>
 		</MkSelect>
 		<template v-if="value.action === 'dialog'">
-			<MkInput v-model="value.content"><template #label>{{ $ts._pages.blocks._button._action._dialog.content }}</template></MkInput>
+			<MkInput v-model="value.content"><template #label>{{ i18n.ts._pages.blocks._button._action._dialog.content }}</template></MkInput>
 		</template>
 		<template v-else-if="value.action === 'pushEvent'">
-			<MkInput v-model="value.event"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.event }}</template></MkInput>
-			<MkInput v-model="value.message"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.message }}</template></MkInput>
+			<MkInput v-model="value.event"><template #label>{{ i18n.ts._pages.blocks._button._action._pushEvent.event }}</template></MkInput>
+			<MkInput v-model="value.message"><template #label>{{ i18n.ts._pages.blocks._button._action._pushEvent.message }}</template></MkInput>
 			<MkSelect v-model="value.var">
-				<template #label>{{ $ts._pages.blocks._button._action._pushEvent.variable }}</template>
+				<template #label>{{ i18n.ts._pages.blocks._button._action._pushEvent.variable }}</template>
 				<option :value="null">{{ $t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
 				<option v-for="v in hpml.getVarsByType()" :value="v.name">{{ v.name }}</option>
-				<optgroup :label="$ts._pages.script.pageVariables">
+				<optgroup :label="i18n.ts._pages.script.pageVariables">
 					<option v-for="v in hpml.getPageVarsByType()" :value="v">{{ v }}</option>
 				</optgroup>
-				<optgroup :label="$ts._pages.script.enviromentVariables">
+				<optgroup :label="i18n.ts._pages.script.enviromentVariables">
 					<option v-for="v in hpml.getEnvVarsByType()" :value="v">{{ v }}</option>
 				</optgroup>
 			</MkSelect>
 		</template>
 		<template v-else-if="value.action === 'callAiScript'">
-			<MkInput v-model="value.fn"><template #label>{{ $ts._pages.blocks._button._action._callAiScript.functionName }}</template></MkInput>
+			<MkInput v-model="value.fn"><template #label>{{ i18n.ts._pages.blocks._button._action._callAiScript.functionName }}</template></MkInput>
 		</template>
 	</section>
 </XContainer>
@@ -45,6 +45,7 @@ import XContainer from '../page-editor.container.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSwitch from '@/components/form/switch.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
 	value: any,
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
index ab89e0555..4dcb229a2 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
@@ -1,19 +1,19 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-paint-brush-household-bold ph-lg"></i> {{ $ts._pages.blocks.canvas }}</template>
+	<template #header><i class="ph-paint-brush-household-bold ph-lg"></i> {{ i18n.ts._pages.blocks.canvas }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model="value.name">
 			<template #prefix><i class="ph-magic-wand-bold ph-lg"></i></template>
-			<template #label>{{ $ts._pages.blocks._canvas.id }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._canvas.id }}</template>
 		</MkInput>
 		<MkInput v-model="value.width" type="number">
-			<template #label>{{ $ts._pages.blocks._canvas.width }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._canvas.width }}</template>
 			<template #suffix>px</template>
 		</MkInput>
 		<MkInput v-model="value.height" type="number">
-			<template #label>{{ $ts._pages.blocks._canvas.height }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._canvas.height }}</template>
 			<template #suffix>px</template>
 		</MkInput>
 	</section>
@@ -25,6 +25,7 @@
 import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
 	value: any
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
index 6cc661ad1..a58770a79 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
@@ -1,18 +1,18 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ $ts._pages.blocks.counter }}</template>
+	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ i18n.ts._pages.blocks.counter }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model="value.name">
 			<template #prefix><i class="ph-magic-wand-bold ph-lg"></i></template>
-			<template #label>{{ $ts._pages.blocks._counter.name }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._counter.name }}</template>
 		</MkInput>
 		<MkInput v-model="value.text">
-			<template #label>{{ $ts._pages.blocks._counter.text }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._counter.text }}</template>
 		</MkInput>
 		<MkInput v-model="value.inc" type="number">
-			<template #label>{{ $ts._pages.blocks._counter.inc }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._counter.inc }}</template>
 		</MkInput>
 	</section>
 </XContainer>
@@ -23,6 +23,7 @@
 import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
 	value: any
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
index 9b46fef72..1149c7cc2 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-question-bold ph-lg"></i> {{ $ts._pages.blocks.if }}</template>
+	<template #header><i class="ph-question-bold ph-lg"></i> {{ i18n.ts._pages.blocks.if }}</template>
 	<template #func>
 		<button class="_button" @click="add()">
 			<i class="ph-plus-bold ph-lg"></i>
@@ -10,12 +10,12 @@
 
 	<section class="romcojzs">
 		<MkSelect v-model="value.var">
-			<template #label>{{ $ts._pages.blocks._if.variable }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._if.variable }}</template>
 			<option v-for="v in hpml.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
-			<optgroup :label="$ts._pages.script.pageVariables">
+			<optgroup :label="i18n.ts._pages.script.pageVariables">
 				<option v-for="v in hpml.getPageVarsByType('boolean')" :value="v">{{ v }}</option>
 			</optgroup>
-			<optgroup :label="$ts._pages.script.enviromentVariables">
+			<optgroup :label="i18n.ts._pages.script.enviromentVariables">
 				<option v-for="v in hpml.getEnvVarsByType('boolean')" :value="v">{{ v }}</option>
 			</optgroup>
 		</MkSelect>
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
index 906264b2e..3de2b0ce8 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-image-bold ph-lg"></i> {{ $ts._pages.blocks.image }}</template>
+	<template #header><i class="ph-image-bold ph-lg"></i> {{ i18n.ts._pages.blocks.image }}</template>
 	<template #func>
 		<button @click="choose()">
 			<i class="ph-folder-notch-open-bold ph-lg"></i>
@@ -20,6 +20,7 @@ import { onMounted } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	value: any
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
index f505e9307..c9fc5a51d 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
@@ -1,14 +1,14 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-sticker-bold ph-lg"></i> {{ $ts._pages.blocks.note }}</template>
+	<template #header><i class="ph-sticker-bold ph-lg"></i> {{ i18n.ts._pages.blocks.note }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model="id">
-			<template #label>{{ $ts._pages.blocks._note.id }}</template>
-			<template #caption>{{ $ts._pages.blocks._note.idDescription }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._note.id }}</template>
+			<template #caption>{{ i18n.ts._pages.blocks._note.idDescription }}</template>
 		</MkInput>
-		<MkSwitch v-model="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
+		<MkSwitch v-model="value.detailed"><span>{{ i18n.ts._pages.blocks._note.detailed }}</span></MkSwitch>
 
 		<XNote v-if="note && !value.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
 		<XNoteDetailed v-if="note && value.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
@@ -25,6 +25,7 @@ import MkSwitch from '@/components/form/switch.vue';
 import XNote from '@/components/MkNote.vue';
 import XNoteDetailed from '@/components/MkNoteDetailed.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	value: any
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
index d6fa59ce7..ef6dbc5a0 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
@@ -1,18 +1,18 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ $ts._pages.blocks.numberInput }}</template>
+	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ i18n.ts._pages.blocks.numberInput }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model="value.name">
 			<template #prefix><i class="ph-magic-wand-bold ph-lg"></i></template>
-			<template #label>{{ $ts._pages.blocks._numberInput.name }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._numberInput.name }}</template>
 		</MkInput>
 		<MkInput v-model="value.text">
-			<template #label>{{ $ts._pages.blocks._numberInput.text }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._numberInput.text }}</template>
 		</MkInput>
 		<MkInput v-model="value.default" type="number">
-			<template #label>{{ $ts._pages.blocks._numberInput.default }}</template>
+			<template #label>{{ i18n.ts._pages.blocks._numberInput.default }}</template>
 		</MkInput>
 	</section>
 </XContainer>
@@ -23,6 +23,7 @@
 import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
 	value: any
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
index 02fa747a2..426861aaa 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
@@ -1,12 +1,12 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-paper-plane-tilt-bold ph-lg"></i> {{ $ts._pages.blocks.post }}</template>
+	<template #header><i class="ph-paper-plane-tilt-bold ph-lg"></i> {{ i18n.ts._pages.blocks.post }}</template>
 
 	<section style="padding: 16px;">
-		<MkTextarea v-model="value.text"><template #label>{{ $ts._pages.blocks._post.text }}</template></MkTextarea>
-		<MkSwitch v-model="value.attachCanvasImage"><span>{{ $ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
-		<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"><template #label>{{ $ts._pages.blocks._post.canvasId }}</template></MkInput>
+		<MkTextarea v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._post.text }}</template></MkTextarea>
+		<MkSwitch v-model="value.attachCanvasImage"><span>{{ i18n.ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
+		<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"><template #label>{{ i18n.ts._pages.blocks._post.canvasId }}</template></MkInput>
 	</section>
 </XContainer>
 </template>
@@ -18,6 +18,7 @@ import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSwitch from '@/components/form/switch.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
 	value: any
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
index 8ef9704f0..61fe9d676 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -1,13 +1,13 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ $ts._pages.blocks.radioButton }}</template>
+	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ i18n.ts._pages.blocks.radioButton }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand-bold ph-lg"></i></template><template #label>{{ $ts._pages.blocks._radioButton.name }}</template></MkInput>
-		<MkInput v-model="value.title"><template #label>{{ $ts._pages.blocks._radioButton.title }}</template></MkInput>
-		<MkTextarea v-model="values"><template #label>{{ $ts._pages.blocks._radioButton.values }}</template></MkTextarea>
-		<MkInput v-model="value.default"><template #label>{{ $ts._pages.blocks._radioButton.default }}</template></MkInput>
+		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand-bold ph-lg"></i></template><template #label>{{ i18n.ts._pages.blocks._radioButton.name }}</template></MkInput>
+		<MkInput v-model="value.title"><template #label>{{ i18n.ts._pages.blocks._radioButton.title }}</template></MkInput>
+		<MkTextarea v-model="values"><template #label>{{ i18n.ts._pages.blocks._radioButton.values }}</template></MkTextarea>
+		<MkInput v-model="value.default"><template #label>{{ i18n.ts._pages.blocks._radioButton.default }}</template></MkInput>
 	</section>
 </XContainer>
 </template>
@@ -18,6 +18,7 @@ import { watch } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 const props = withDefaults(defineProps<{
 	value: any
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
index 18b662437..e4dda7061 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
@@ -1,12 +1,12 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ $ts._pages.blocks.switch }}</template>
+	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ i18n.ts._pages.blocks.switch }}</template>
 
 	<section class="kjuadyyj">
-		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand-bold ph-lg"></i></template><template #label>{{ $ts._pages.blocks._switch.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._switch.text }}</template></MkInput>
-		<MkSwitch v-model="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch>
+		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand-bold ph-lg"></i></template><template #label>{{ i18n.ts._pages.blocks._switch.name }}</template></MkInput>
+		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._switch.text }}</template></MkInput>
+		<MkSwitch v-model="value.default"><span>{{ i18n.ts._pages.blocks._switch.default }}</span></MkSwitch>
 	</section>
 </XContainer>
 </template>
@@ -17,6 +17,7 @@ import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
 	value: any
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
index f4be5d453..d48cc3786 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
@@ -1,12 +1,12 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ $ts._pages.blocks.textInput }}</template>
+	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ i18n.ts._pages.blocks.textInput }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand-bold ph-lg"></i></template><template #label>{{ $ts._pages.blocks._textInput.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textInput.text }}</template></MkInput>
-		<MkInput v-model="value.default" type="text"><template #label>{{ $ts._pages.blocks._textInput.default }}</template></MkInput>
+		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand-bold ph-lg"></i></template><template #label>{{ i18n.ts._pages.blocks._textInput.name }}</template></MkInput>
+		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._textInput.text }}</template></MkInput>
+		<MkInput v-model="value.default" type="text"><template #label>{{ i18n.ts._pages.blocks._textInput.default }}</template></MkInput>
 	</section>
 </XContainer>
 </template>
@@ -16,6 +16,7 @@
 import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
 	value: any
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
index 3afc84fd5..0d4dcd5b2 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-align-left-bold ph-lg"></i> {{ $ts._pages.blocks.text }}</template>
+	<template #header><i class="ph-align-left-bold ph-lg"></i> {{ i18n.ts._pages.blocks.text }}</template>
 
 	<section class="vckmsadr">
 		<textarea v-model="value.text"></textarea>
@@ -13,6 +13,7 @@
 /* eslint-disable vue/no-mutating-props */
 import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
 	value: any
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
index b5c299d08..07a81ea50 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -1,12 +1,12 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ $ts._pages.blocks.textareaInput }}</template>
+	<template #header><i class="ph-lightning-bold ph-lg"></i> {{ i18n.ts._pages.blocks.textareaInput }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand-bold ph-lg"></i></template><template #label>{{ $ts._pages.blocks._textareaInput.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textareaInput.text }}</template></MkInput>
-		<MkTextarea v-model="value.default"><template #label>{{ $ts._pages.blocks._textareaInput.default }}</template></MkTextarea>
+		<MkInput v-model="value.name"><template #prefix><i class="ph-magic-wand-bold ph-lg"></i></template><template #label>{{ i18n.ts._pages.blocks._textareaInput.name }}</template></MkInput>
+		<MkInput v-model="value.text"><template #label>{{ i18n.ts._pages.blocks._textareaInput.text }}</template></MkInput>
+		<MkTextarea v-model="value.default"><template #label>{{ i18n.ts._pages.blocks._textareaInput.default }}</template></MkTextarea>
 	</section>
 </XContainer>
 </template>
@@ -17,6 +17,7 @@ import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkInput from '@/components/form/input.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
 	value: any
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
index 03acb1c83..fac347008 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ph-align-left-bold ph-lg"></i> {{ $ts._pages.blocks.textarea }}</template>
+	<template #header><i class="ph-align-left-bold ph-lg"></i> {{ i18n.ts._pages.blocks.textarea }}</template>
 
 	<section class="ihymsbbe">
 		<textarea v-model="value.text"></textarea>
@@ -13,6 +13,7 @@
 /* eslint-disable vue/no-mutating-props */
 import { } from 'vue';
 import XContainer from '../page-editor.container.vue';
+import { i18n } from '@/i18n';
 
 withDefaults(defineProps<{
 	value: any
diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue
index 405a67c39..3671dd962 100644
--- a/packages/client/src/pages/page-editor/page-editor.script-block.vue
+++ b/packages/client/src/pages/page-editor/page-editor.script-block.vue
@@ -9,7 +9,7 @@
 	</template>
 
 	<section v-if="modelValue.type === null" class="pbglfege" @click="changeType()">
-		{{ $ts._pages.script.emptySlot }}
+		{{ i18n.ts._pages.script.emptySlot }}
 	</section>
 	<section v-else-if="modelValue.type === 'text'" class="tbwccoaw">
 		<input v-model="modelValue.value"/>
@@ -18,7 +18,7 @@
 		<textarea v-model="modelValue.value"></textarea>
 	</section>
 	<section v-else-if="modelValue.type === 'textList'" class="tbwccoaw">
-		<textarea v-model="modelValue.value" :placeholder="$ts._pages.script.blocks._textList.info"></textarea>
+		<textarea v-model="modelValue.value" :placeholder="i18n.ts._pages.script.blocks._textList.info"></textarea>
 	</section>
 	<section v-else-if="modelValue.type === 'number'" class="tbwccoaw">
 		<input v-model="modelValue.value" type="number"/>
@@ -26,13 +26,13 @@
 	<section v-else-if="modelValue.type === 'ref'" class="hpdwcrvs">
 		<select v-model="modelValue.value">
 			<option v-for="v in hpml.getVarsByType(getExpectedType ? getExpectedType() : null).filter(x => x.name !== name)" :value="v.name">{{ v.name }}</option>
-			<optgroup :label="$ts._pages.script.argVariables">
+			<optgroup :label="i18n.ts._pages.script.argVariables">
 				<option v-for="v in fnSlots" :value="v.name">{{ v.name }}</option>
 			</optgroup>
-			<optgroup :label="$ts._pages.script.pageVariables">
+			<optgroup :label="i18n.ts._pages.script.pageVariables">
 				<option v-for="v in hpml.getPageVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
 			</optgroup>
-			<optgroup :label="$ts._pages.script.enviromentVariables">
+			<optgroup :label="i18n.ts._pages.script.enviromentVariables">
 				<option v-for="v in hpml.getEnvVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
 			</optgroup>
 		</select>
@@ -42,7 +42,7 @@
 	</section>
 	<section v-else-if="modelValue.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
 		<MkTextarea v-model="slots">
-			<template #label>{{ $ts._pages.script.blocks._fn.slots }}</template>
+			<template #label>{{ i18n.ts._pages.script.blocks._fn.slots }}</template>
 			<template #caption>{{ $t('_pages.script.blocks._fn.slots-info') }}</template>
 		</MkTextarea>
 		<XV v-if="modelValue.value.expression" v-model="modelValue.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="modelValue.value.slots" :name="name"/>
@@ -66,6 +66,7 @@ import { blockDefs } from '@/scripts/hpml/index';
 import * as os from '@/os';
 import { isLiteralValue } from '@/scripts/hpml/expr';
 import { funcDefs } from '@/scripts/hpml/lib';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
@@ -215,7 +216,7 @@ export default defineComponent({
 	methods: {
 		async changeType() {
 			const { canceled, result: type } = await os.select({
-				title: this.$ts._pages.selectType,
+				title: this.i18n.ts._pages.selectType,
 				groupedItems: this.getScriptBlockList(this.getExpectedType ? this.getExpectedType() : null)
 			});
 			if (canceled) return;
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 436fed752..13231a3ea 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -3,42 +3,42 @@
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
 		<div class="jqqmcavi">
-			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ph-arrow-square-out-bold ph-lg"></i> {{ $ts._pages.viewPage }}</MkButton>
-			<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ph-floppy-disk-back-bold ph-lg"></i> {{ $ts.save }}</MkButton>
-			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ph-clipboard-text-bold ph-lg"></i> {{ $ts.duplicate }}</MkButton>
-			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ph-trash-bold ph-lg"></i> {{ $ts.delete }}</MkButton>
+			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ph-arrow-square-out-bold ph-lg"></i> {{ i18n.ts._pages.viewPage }}</MkButton>
+			<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ph-floppy-disk-back-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
+			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ph-clipboard-text-bold ph-lg"></i> {{ i18n.ts.duplicate }}</MkButton>
+			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ph-trash-bold ph-lg"></i> {{ i18n.ts.delete }}</MkButton>
 		</div>
 
 		<div v-if="tab === 'settings'">
 			<div class="_formRoot">
 				<MkInput v-model="title" class="_formBlock">
-					<template #label>{{ $ts._pages.title }}</template>
+					<template #label>{{ i18n.ts._pages.title }}</template>
 				</MkInput>
 
 				<MkInput v-model="summary" class="_formBlock">
-					<template #label>{{ $ts._pages.summary }}</template>
+					<template #label>{{ i18n.ts._pages.summary }}</template>
 				</MkInput>
 
 				<MkInput v-model="name" class="_formBlock">
 					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
-					<template #label>{{ $ts._pages.url }}</template>
+					<template #label>{{ i18n.ts._pages.url }}</template>
 				</MkInput>
 
-				<MkSwitch v-model="alignCenter" class="_formBlock">{{ $ts._pages.alignCenter }}</MkSwitch>
+				<MkSwitch v-model="alignCenter" class="_formBlock">{{ i18n.ts._pages.alignCenter }}</MkSwitch>
 
 				<MkSelect v-model="font" class="_formBlock">
-					<template #label>{{ $ts._pages.font }}</template>
-					<option value="serif">{{ $ts._pages.fontSerif }}</option>
-					<option value="sans-serif">{{ $ts._pages.fontSansSerif }}</option>
+					<template #label>{{ i18n.ts._pages.font }}</template>
+					<option value="serif">{{ i18n.ts._pages.fontSerif }}</option>
+					<option value="sans-serif">{{ i18n.ts._pages.fontSansSerif }}</option>
 				</MkSelect>
 
-				<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
+				<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ i18n.ts._pages.hideTitleWhenPinned }}</MkSwitch>
 
 				<div class="eyeCatch">
-					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ph-plus-bold ph-lg"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
+					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ph-plus-bold ph-lg"></i> {{ i18n.ts._pages.eyeCatchingImageSet }}</MkButton>
 					<div v-else-if="eyeCatchingImage">
 						<img :src="eyeCatchingImage.url" :alt="eyeCatchingImage.name" style="max-width: 100%;"/>
-						<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ph-trash-bold ph-lg"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
+						<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ph-trash-bold ph-lg"></i> {{ i18n.ts._pages.eyeCatchingImageRemove }}</MkButton>
 					</div>
 				</div>
 			</div>
@@ -107,6 +107,8 @@ import { mainRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { $i } from '@/account';
+import { i18n } from '@/i18n';
+
 const XDraggable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 const props = defineProps<{
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index 5b97375eb..5c91972ee 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -52,7 +52,7 @@
 					</template>
 				</I18n>
 			</li>
-			<li>{{ i18n.ts._2fa.step2 }}<br><img :src="twoFactorData.qr"><p>{{ $ts._2fa.step2Url }}<br>{{ twoFactorData.url }}</p></li>
+			<li>{{ i18n.ts._2fa.step2 }}<br><img :src="twoFactorData.qr"><p>{{ i18n.ts._2fa.step2Url }}<br>{{ twoFactorData.url }}</p></li>
 			<li>
 				{{ i18n.ts._2fa.step3 }}<br>
 				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false"><template #label>{{ i18n.ts.token }}</template></MkInput>
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index 88094cf06..52cfa8e14 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer>
-	<template #header><i class="ph-chart-bar-bold ph-lg" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
+	<template #header><i class="ph-chart-bar-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.activity }}</template>
 	<template #func>
 		<button class="_button" @click="showMenu">
 			<i class="ph-dots-three-outline-bold ph-lg"></i>
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index f99586d4b..9fbd3a22e 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :max-height="300" :foldable="true">
-	<template #header><i class="ph-image-bold ph-lg" style="margin-right: 0.5em;"></i>{{ $ts.images }}</template>
+	<template #header><i class="ph-image-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.images }}</template>
 	<div class="ujigsodd">
 		<MkLoading v-if="fetching"/>
 		<div v-if="!fetching && images.length > 0" class="stream">
@@ -13,7 +13,7 @@
 				<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
 			</MkA>
 		</div>
-		<p v-if="!fetching && images.length == 0" class="empty">{{ $ts.nothing }}</p>
+		<p v-if="!fetching && images.length == 0" class="empty">{{ i18n.ts.nothing }}</p>
 	</div>
 </MkContainer>
 </template>
@@ -27,6 +27,7 @@ import * as os from '@/os';
 import MkContainer from '@/components/MkContainer.vue';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	user: misskey.entities.UserDetailed;
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index 82f47f9fd..8ffd2514a 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -10,22 +10,22 @@
 			</h1>
 			<div class="about">
 				<!-- eslint-disable-next-line vue/no-v-html -->
-				<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
+				<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
 			</div>
 			<div class="action">
-				<MkButton class="signup" inline gradate @click="signup()">{{ $ts.signup }}</MkButton>
-				<MkButton class="signin" inline @click="signin()">{{ $ts.login }}</MkButton>
+				<MkButton class="signup" inline gradate @click="signup()">{{ i18n.ts.signup }}</MkButton>
+				<MkButton class="signin" inline @click="signin()">{{ i18n.ts.login }}</MkButton>
 			</div>
 			<div v-if="onlineUsersCount && stats" class="status">
 				<div>
-					<I18n :src="$ts.nUsers" text-tag="span" class="users">
+					<I18n :src="i18n.ts.nUsers" text-tag="span" class="users">
 						<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
 					</I18n>
-					<I18n :src="$ts.nNotes" text-tag="span" class="notes">
+					<I18n :src="i18n.ts.nNotes" text-tag="span" class="notes">
 						<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
 					</I18n>
 				</div>
-				<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
+				<I18n :src="i18n.ts.onlineUsersCount" text-tag="span" class="online">
 					<template #n><b>{{ onlineUsersCount }}</b></template>
 				</I18n>
 			</div>
@@ -47,6 +47,7 @@ import XTimeline from './welcome.timeline.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
 import number from '@/filters/number';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
@@ -109,13 +110,13 @@ export default defineComponent({
 					os.pageWindow('/about');
 				}
 			}, {
-				text: this.$ts.aboutMisskey,
+				text: this.i18n.ts.aboutMisskey,
 				icon: 'ph-info-bold ph-lg',
 				action: () => {
 					os.pageWindow('/about-calckey');
 				}
 			}, null, {
-				text: this.$ts.help,
+				text: this.i18n.ts.help,
 				icon: 'ph-question-bold ph-lg',
 				action: () => {
 					window.open(`https://misskey-hub.net/help.md`, '_blank');
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index 17312dc14..d567efd14 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -22,22 +22,22 @@
 					</h1>
 					<div class="about">
 						<!-- eslint-disable-next-line vue/no-v-html -->
-						<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
+						<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
 					</div>
 					<div class="action">
-						<MkButton inline gradate @click="signup()">{{ $ts.signup }}</MkButton>
-						<MkButton inline @click="signin()">{{ $ts.login }}</MkButton>
+						<MkButton inline gradate @click="signup()">{{ i18n.ts.signup }}</MkButton>
+						<MkButton inline @click="signin()">{{ i18n.ts.login }}</MkButton>
 					</div>
 					<div v-if="onlineUsersCount && stats" class="status">
 						<div>
-							<I18n :src="$ts.nUsers" text-tag="span" class="users">
+							<I18n :src="i18n.ts.nUsers" text-tag="span" class="users">
 								<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
 							</I18n>
-							<I18n :src="$ts.nNotes" text-tag="span" class="notes">
+							<I18n :src="i18n.ts.nNotes" text-tag="span" class="notes">
 								<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
 							</I18n>
 						</div>
-						<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
+						<I18n :src="i18n.ts.onlineUsersCount" text-tag="span" class="online">
 							<template #n><b>{{ onlineUsersCount }}</b></template>
 						</I18n>
 					</div>
@@ -45,10 +45,10 @@
 				</div>
 			</div>
 			<nav class="nav">
-				<MkA to="/announcements">{{ $ts.announcements }}</MkA>
-				<MkA to="/explore">{{ $ts.explore }}</MkA>
-				<MkA to="/channels">{{ $ts.channel }}</MkA>
-				<MkA to="/featured">{{ $ts.featured }}</MkA>
+				<MkA to="/announcements">{{ i18n.ts.announcements }}</MkA>
+				<MkA to="/explore">{{ i18n.ts.explore }}</MkA>
+				<MkA to="/channels">{{ i18n.ts.channel }}</MkA>
+				<MkA to="/featured">{{ i18n.ts.featured }}</MkA>
 			</nav>
 		</div>
 	</div>
@@ -67,6 +67,7 @@ import XTimeline from './welcome.timeline.vue';
 import { host, instanceName } from '@/config';
 import * as os from '@/os';
 import number from '@/filters/number';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
@@ -129,13 +130,13 @@ export default defineComponent({
 					os.pageWindow('/about');
 				}
 			}, {
-				text: this.$ts.aboutMisskey,
+				text: this.i18n.ts.aboutMisskey,
 				icon: 'ph-info-bold ph-lg',
 				action: () => {
 					os.pageWindow('/about-calckey');
 				}
 			}, null, {
-				text: this.$ts.help,
+				text: this.i18n.ts.help,
 				icon: 'ph-question-bold ph-lg',
 				action: () => {
 					window.open(`https://misskey-hub.net/help.md`, '_blank');
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index d8e329d51..05b666ed5 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -2,7 +2,7 @@
 <div class="azykntjl">
 	<div class="body">
 		<div class="left">
-			<MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
+			<MkA v-click-anime v-tooltip="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
 				<i class="ph-house-bold ph-lg ph-fw ph-lg"></i>
 			</MkA>
 			<template v-for="item in menu">
@@ -13,7 +13,7 @@
 				</component>
 			</template>
 			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="$ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
+			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="i18n.ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
 				<i class="ph-door-bold ph-lg ph-fw ph-lg"></i>
 			</MkA>
 			<button v-click-anime class="item _button" @click="more">
@@ -22,7 +22,7 @@
 			</button>
 		</div>
 		<div class="right">
-			<MkA v-click-anime v-tooltip="$ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
+			<MkA v-click-anime v-tooltip="i18n.ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
 				<i class="ph-gear-six-bold ph-lg ph-fw ph-lg"></i>
 			</MkA>
 			<button v-click-anime class="item _button account" @click="openAccountMenu">
@@ -46,6 +46,7 @@ import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { openAccountMenu } from '@/account';
 import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index d249db287..e7f825700 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -5,12 +5,12 @@
 	</button>
 	<div class="post" data-cy-open-post-form @click="post">
 		<MkButton class="button" gradate full rounded>
-			<i class="ph-pencil-bold ph-lg ph-fw ph-lg"></i><span v-if="!iconOnly" class="text">{{ $ts.note }}</span>
+			<i class="ph-pencil-bold ph-lg ph-fw ph-lg"></i><span v-if="!iconOnly" class="text">{{ i18n.ts.note }}</span>
 		</MkButton>
 	</div>
 	<div class="divider"></div>
 	<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-		<i class="ph-house-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ $ts.timeline }}</span>
+		<i class="ph-house-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.timeline }}</span>
 	</MkA>
 	<template v-for="item in menu">
 		<div v-if="item === '-'" class="divider"></div>
@@ -21,14 +21,14 @@
 	</template>
 	<div class="divider"></div>
 	<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ph-door-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ $ts.controlPanel }}</span>
+		<i class="ph-door-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 	</MkA>
 	<button v-click-anime class="item _button" @click="more">
-		<i class="ph-dots-three-outline-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ $ts.more }}</span>
+		<i class="ph-dots-three-outline-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.more }}</span>
 		<span v-if="otherNavItemIndicated" class="indicator"><i class="ph-circle-fill"></i></span>
 	</button>
 	<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ph-gear-six-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ $ts.settings }}</span>
+		<i class="ph-gear-six-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.settings }}</span>
 	</MkA>
 	<div class="divider"></div>
 	<div class="about">
@@ -50,6 +50,7 @@ import { openAccountMenu } from '@/account';
 import MkButton from '@/components/MkButton.vue';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
 //import MisskeyLogo from '@assets/client/misskey.svg';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue
index d28785970..05da33135 100644
--- a/packages/client/src/ui/classic.widgets.vue
+++ b/packages/client/src/ui/classic.widgets.vue
@@ -3,14 +3,15 @@
 	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 	<MkAd class="a" :prefer="['square']"/>
 
-	<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ph-check-bold ph-lg"></i> {{ $ts.editWidgetsExit }}</button>
-	<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ph-pencil-bold ph-lg"></i> {{ $ts.editWidgets }}</button>
+	<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ph-check-bold ph-lg"></i> {{ i18n.ts.editWidgetsExit }}</button>
+	<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ph-pencil-bold ph-lg"></i> {{ i18n.ts.editWidgets }}</button>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
 import XWidgets from '@/components/MkWidgets.vue';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index 204ed218d..06b4a1fd0 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -5,11 +5,11 @@
 			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
 			<div v-if="meta" class="about">
 				<!-- eslint-disable-next-line vue/no-v-html -->
-				<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
+				<div class="desc" v-html="meta.description || i18n.ts.introMisskey"></div>
 			</div>
 			<div class="action">
-				<button class="_button primary" @click="signup()">{{ $ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ $ts.login }}</button>
+				<button class="_button primary" @click="signup()">{{ i18n.ts.signup }}</button>
+				<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
 			</div>
 		</div>
 	</div>
@@ -46,6 +46,7 @@ import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import { ColdDeviceStorage } from '@/store';
 import { mainRouter } from '@/router';
+import { i18n } from '@/i18n';
 
 const DESKTOP_THRESHOLD = 1100;
 
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index ff6c04b5f..d9cab7c62 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -30,15 +30,14 @@
 
 	<transition :name="$store.state.animation ? 'tray' : ''">
 		<div v-if="showMenu" class="menu">
-			<MkA to="/" class="link" active-class="active"><i class="ph-house-bold ph-lg icon"></i>{{ $ts.home }}</MkA>
-			<MkA v-if="isTimelineAvailable" to="/timeline" class="link" active-class="active"><i class="ph-chats-circle-bold ph-lg icon"></i>{{ $ts.timeline }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="ph-hash-bold ph-lg icon"></i>{{ $ts.explore }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="ph-television-bold ph-lg icon"></i>{{ $ts.channel }}</MkA>
-			<MkA to="/pages" class="link" active-class="active"><i class="ph-file-text-bold ph-lg icon"></i>{{ $ts.pages }}</MkA>
-			<MkA to="/gallery" class="link" active-class="active"><i class="ph-image-square-bold ph-lg icon"></i>{{ $ts.gallery }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="ph-house-bold ph-lg icon"></i>{{ i18n.ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="ph-hash-bold ph-lg icon"></i>{{ i18n.ts.explore }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><i class="ph-television-bold ph-lg icon"></i>{{ i18n.ts.channel }}</MkA>
+			<MkA to="/pages" class="link" active-class="active"><i class="ph-file-text-bold ph-lg icon"></i>{{ i18n.ts.pages }}</MkA>
+			<MkA to="/gallery" class="link" active-class="active"><i class="ph-image-square-bold ph-lg icon"></i>{{ i18n.ts.gallery }}</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>
@@ -60,6 +59,7 @@ import MkButton from '@/components/MkButton.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 = 1000;
 
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index ab00e8599..79e4a4291 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -2,12 +2,12 @@
 <div class="sqxihjet">
 	<div v-if="narrow === false" class="wide">
 		<div class="content">
-			<MkA to="/" class="link" active-class="active"><i class="ph-house-bold ph-lg icon"></i>{{ $ts.home }}</MkA>
-			<MkA v-if="isTimelineAvailable" to="/timeline" class="link" active-class="active"><i class="ph-chats-circle-bold ph-lg icon"></i>{{ $ts.timeline }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="ph-hash-bold ph-lg icon"></i>{{ $ts.explore }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="ph-television-bold ph-lg icon"></i>{{ $ts.channel }}</MkA>
-			<MkA to="/pages" class="link" active-class="active"><i class="ph-file-text-bold ph-lg icon"></i>{{ $ts.pages }}</MkA>
-			<MkA to="/gallery" class="link" active-class="active"><i class="ph-image-square-bold ph-lg icon"></i>{{ $ts.gallery }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="ph-house-bold ph-lg icon"></i>{{ i18n.ts.home }}</MkA>
+			<MkA v-if="isTimelineAvailable" to="/timeline" class="link" active-class="active"><i class="ph-chats-circle-bold ph-lg icon"></i>{{ i18n.ts.timeline }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="ph-hash-bold ph-lg icon"></i>{{ i18n.ts.explore }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><i class="ph-television-bold ph-lg icon"></i>{{ i18n.ts.channel }}</MkA>
+			<MkA to="/pages" class="link" active-class="active"><i class="ph-file-text-bold ph-lg icon"></i>{{ i18n.ts.pages }}</MkA>
+			<MkA to="/gallery" class="link" active-class="active"><i class="ph-image-square-bold ph-lg icon"></i>{{ i18n.ts.gallery }}</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 v-if="info.action" class="_button action" @click.stop="info.action.handler"><!-- TODO --></button>
 			</div>
 			<div class="right">
-				<button class="_button search" @click="search()"><i class="ph-magnifying-glass-bold ph-lg 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="ph-magnifying-glass-bold ph-lg 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>
@@ -48,6 +48,7 @@ import XSignupDialog from '@/components/MkSignupDialog.vue';
 import * as os from '@/os';
 import { instance } from '@/instance';
 import { search } from '@/scripts/search';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	props: {
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index df693057a..d3f310f17 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -9,14 +9,14 @@
 			</h1>
 			<template v-if="full">
 				<div v-if="meta" class="about">
-					<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
+					<div class="desc" v-html="meta.description || i18n.ts.introMisskey"></div>
 				</div>
 				<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 class="announcements panel">
-					<header>{{ $ts.announcements }}</header>
+					<header>{{ i18n.ts.announcements }}</header>
 					<MkPagination v-slot="{items}" :pagination="announcements" class="list">
 						<section v-for="announcement in items" :key="announcement.id" class="item">
 							<div class="title">{{ announcement.title }}</div>
@@ -33,7 +33,7 @@
 				</div>
 			</template>
 		</div>
-</div>
+	</div>
 </div>
 </template>
 
@@ -45,6 +45,7 @@ import MkPagination from '@/components/MkPagination.vue';
 import XSigninDialog from '@/components/MkSigninDialog.vue';
 import XSignupDialog from '@/components/MkSignupDialog.vue';
 import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {

From 4ca4780e5fed27d6867680e2ae9916baeb2fae90 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Thu, 10 Nov 2022 14:16:09 -0800
Subject: [PATCH 04/49] .6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 06ae03b8c..dcfef63d1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.12.5",
+	"version": "12.119.0-calc.12.6",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

From 121dc7d73a83ff02a26205f88f51daf974af3f88 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Thu, 10 Nov 2022 14:20:41 -0800
Subject: [PATCH 05/49] no extra three dots

---
 locales/ar-SA.yml | 2 +-
 locales/bn-BD.yml | 2 +-
 locales/ca-ES.yml | 2 +-
 locales/cs-CZ.yml | 2 +-
 locales/de-DE.yml | 2 +-
 locales/en-US.yml | 2 +-
 locales/es-ES.yml | 2 +-
 locales/fr-FR.yml | 2 +-
 locales/id-ID.yml | 2 +-
 locales/it-IT.yml | 2 +-
 locales/kn-IN.yml | 2 +-
 locales/pl-PL.yml | 2 +-
 locales/ro-RO.yml | 2 +-
 locales/sv-SE.yml | 2 +-
 locales/th-TH.yml | 2 +-
 locales/uk-UA.yml | 2 +-
 locales/vi-VN.yml | 2 +-
 locales/zh-CN.yml | 2 +-
 locales/zh-TW.yml | 2 +-
 19 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/locales/ar-SA.yml b/locales/ar-SA.yml
index 7fa8c23ad..bddce157d 100644
--- a/locales/ar-SA.yml
+++ b/locales/ar-SA.yml
@@ -8,7 +8,7 @@ notifications: "الإشعارات"
 username: "اسم المستخدم"
 password: "الكلمة السرية"
 forgotPassword: "نسيتَ كلمة السر"
-fetchingAsApObject: "جارٍ جلبه مِن الفديفرس…"
+fetchingAsApObject: "جارٍ جلبه مِن الفديفرس"
 ok: " حسناً"
 gotIt: "فهِمت"
 cancel: " إلغاء"
diff --git a/locales/bn-BD.yml b/locales/bn-BD.yml
index a19fc0832..868b3eed6 100644
--- a/locales/bn-BD.yml
+++ b/locales/bn-BD.yml
@@ -8,7 +8,7 @@ notifications: "বিজ্ঞপ্তি"
 username: "ব্যবহারকারীর নাম"
 password: "পাসওয়ার্ড"
 forgotPassword: "পাসওয়ার্ড ভুলে গেছেন"
-fetchingAsApObject: "ফেডিভার্স থেকে খবর আনা হচ্ছে..."
+fetchingAsApObject: "ফেডিভার্স থেকে খবর আনা হচ্ছে"
 ok: "ঠিক"
 gotIt: "বুঝেছি"
 cancel: "বাতিল"
diff --git a/locales/ca-ES.yml b/locales/ca-ES.yml
index 1c859b68f..f32927519 100644
--- a/locales/ca-ES.yml
+++ b/locales/ca-ES.yml
@@ -8,7 +8,7 @@ notifications: "Notificacions"
 username: "Nom d'usuari"
 password: "Contrasenya"
 forgotPassword: "Contrasenya oblidada"
-fetchingAsApObject: "Cercant en el Fediverse..."
+fetchingAsApObject: "Cercant en el Fediverse"
 ok: "OK"
 gotIt: "Ho he entès!"
 cancel: "Cancel·lar"
diff --git a/locales/cs-CZ.yml b/locales/cs-CZ.yml
index 9d54e0082..cb2f0a1df 100644
--- a/locales/cs-CZ.yml
+++ b/locales/cs-CZ.yml
@@ -8,7 +8,7 @@ notifications: "Oznámení"
 username: "Uživatelské jméno"
 password: "Heslo"
 forgotPassword: "Zapomenuté heslo"
-fetchingAsApObject: "Načítám data z Fediversu..."
+fetchingAsApObject: "Načítám data z Fediversu"
 ok: "Potvrdit"
 gotIt: "Rozumím!"
 cancel: "Zrušit"
diff --git a/locales/de-DE.yml b/locales/de-DE.yml
index 149899258..89415f6c3 100644
--- a/locales/de-DE.yml
+++ b/locales/de-DE.yml
@@ -8,7 +8,7 @@ notifications: "Benachrichtigungen"
 username: "Benutzername"
 password: "Passwort"
 forgotPassword: "Passwort vergessen"
-fetchingAsApObject: "Wird aus dem Fediverse angefragt …"
+fetchingAsApObject: "Wird aus dem Fediverse angefragt"
 ok: "OK"
 gotIt: "Verstanden!"
 cancel: "Abbrechen"
diff --git a/locales/en-US.yml b/locales/en-US.yml
index d8150f71a..0c962f3ae 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -8,7 +8,7 @@ notifications: "Notifications"
 username: "Username"
 password: "Password"
 forgotPassword: "Forgot password"
-fetchingAsApObject: "Fetching from the Fediverse..."
+fetchingAsApObject: "Fetching from the Fediverse"
 ok: "OK"
 gotIt: "Got it!"
 cancel: "Cancel"
diff --git a/locales/es-ES.yml b/locales/es-ES.yml
index b74eed85d..5db8843bb 100644
--- a/locales/es-ES.yml
+++ b/locales/es-ES.yml
@@ -8,7 +8,7 @@ notifications: "Notificaciones"
 username: "Nombre de usuario"
 password: "Contraseña"
 forgotPassword: "Olvidé mi Contraseña"
-fetchingAsApObject: "Recuperando desde el Fediverso..."
+fetchingAsApObject: "Recuperando desde el Fediverso"
 ok: "OK"
 gotIt: "¡Lo tengo!"
 cancel: "Cancelar"
diff --git a/locales/fr-FR.yml b/locales/fr-FR.yml
index d6047b48d..1c8c51fd7 100644
--- a/locales/fr-FR.yml
+++ b/locales/fr-FR.yml
@@ -8,7 +8,7 @@ notifications: "Notifications"
 username: "Nom d’utilisateur·rice"
 password: "Mot de passe"
 forgotPassword: "Mot de passe oublié"
-fetchingAsApObject: "Récupération depuis le fédiverse …"
+fetchingAsApObject: "Récupération depuis le fédiverse"
 ok: "OK"
 gotIt: "J’ai compris !"
 cancel: "Annuler"
diff --git a/locales/id-ID.yml b/locales/id-ID.yml
index dc214f4ea..1971aa0dc 100644
--- a/locales/id-ID.yml
+++ b/locales/id-ID.yml
@@ -8,7 +8,7 @@ notifications: "Pemberitahuan"
 username: "Nama Pengguna"
 password: "Kata sandi"
 forgotPassword: "Lupa Kata Sandi"
-fetchingAsApObject: "Mengambil data dari Fediverse..."
+fetchingAsApObject: "Mengambil data dari Fediverse"
 ok: "OK"
 gotIt: "Saya mengerti"
 cancel: "Batalkan"
diff --git a/locales/it-IT.yml b/locales/it-IT.yml
index 410928bc5..af8f52369 100644
--- a/locales/it-IT.yml
+++ b/locales/it-IT.yml
@@ -8,7 +8,7 @@ notifications: "Notifiche"
 username: "Nome utente"
 password: "Password"
 forgotPassword: "Hai dimenticato la tua password?"
-fetchingAsApObject: "Recuperando dal Fediverso..."
+fetchingAsApObject: "Recuperando dal Fediverso"
 ok: "OK"
 gotIt: "Ho capito"
 cancel: "Annulla"
diff --git a/locales/kn-IN.yml b/locales/kn-IN.yml
index a38d9267b..39b3cbe91 100644
--- a/locales/kn-IN.yml
+++ b/locales/kn-IN.yml
@@ -6,7 +6,7 @@ search: "ಹುಡುಕು"
 notifications: "ಅಧಿಸೂಚನೆಗಳು"
 username: "ಬಳಕೆಹೆಸರು"
 password: "ಗುಪ್ತಪದ"
-fetchingAsApObject: "ಒಕ್ಕೂಟದಿಂದ ಪಡೆಯಲಾಗುತ್ತಿದೆ..."
+fetchingAsApObject: "ಒಕ್ಕೂಟದಿಂದ ಪಡೆಯಲಾಗುತ್ತಿದೆ"
 ok: "ಸರಿ"
 gotIt: "ಅರ್ಥವಾಯಿತು!"
 cancel: "ರದ್ದು"
diff --git a/locales/pl-PL.yml b/locales/pl-PL.yml
index 933b722c5..bdc90a84d 100644
--- a/locales/pl-PL.yml
+++ b/locales/pl-PL.yml
@@ -8,7 +8,7 @@ notifications: "Powiadomienia"
 username: "Nazwa użytkownika"
 password: "Hasło"
 forgotPassword: "Nie pamiętam hasła"
-fetchingAsApObject: "Pobieranie z Fediwersum…"
+fetchingAsApObject: "Pobieranie z Fediwersum"
 ok: "OK"
 gotIt: "Rozumiem!"
 cancel: "Anuluj"
diff --git a/locales/ro-RO.yml b/locales/ro-RO.yml
index 8254994b2..1ccddd145 100644
--- a/locales/ro-RO.yml
+++ b/locales/ro-RO.yml
@@ -8,7 +8,7 @@ notifications: "Notificări"
 username: "Nume de utilizator"
 password: "Parolă"
 forgotPassword: "Am uitat parola"
-fetchingAsApObject: "Se aduce din Fediverse..."
+fetchingAsApObject: "Se aduce din Fediverse"
 ok: "OK"
 gotIt: "Am înțeles!"
 cancel: "Anulează"
diff --git a/locales/sv-SE.yml b/locales/sv-SE.yml
index 3f68d3641..bd895135c 100644
--- a/locales/sv-SE.yml
+++ b/locales/sv-SE.yml
@@ -8,7 +8,7 @@ notifications: "Notifikationer"
 username: "Användarnamn"
 password: "Lösenord"
 forgotPassword: "Glömt lösenord"
-fetchingAsApObject: "Hämtar från Fediversum..."
+fetchingAsApObject: "Hämtar från Fediversum"
 ok: "OK"
 gotIt: "Uppfattat!"
 cancel: "Avbryt"
diff --git a/locales/th-TH.yml b/locales/th-TH.yml
index 6f794a7c7..b2fd25dc4 100644
--- a/locales/th-TH.yml
+++ b/locales/th-TH.yml
@@ -8,7 +8,7 @@ notifications: "การเเจ้งเตือน"
 username: "ชื่อผู้ใช้"
 password: "รหัสผ่าน"
 forgotPassword: "ลืมรหัสผ่าน?"
-fetchingAsApObject: "กำลังดึงข้อมูล จาก เฟดิเวิร์ส..."
+fetchingAsApObject: "กำลังดึงข้อมูล จาก เฟดิเวิร์ส"
 ok: "ตกลง"
 gotIt: "เข้าใจแล้ว !"
 cancel: "ยกเลิก"
diff --git a/locales/uk-UA.yml b/locales/uk-UA.yml
index b696a58b9..96f94ee2f 100644
--- a/locales/uk-UA.yml
+++ b/locales/uk-UA.yml
@@ -8,7 +8,7 @@ notifications: "Сповіщення"
 username: "Ім'я користувача"
 password: "Пароль"
 forgotPassword: "Я забув пароль"
-fetchingAsApObject: "Отримуємо з федіверсу..."
+fetchingAsApObject: "Отримуємо з федіверсу"
 ok: "OK"
 gotIt: "Зрозуміло!"
 cancel: "Скасувати"
diff --git a/locales/vi-VN.yml b/locales/vi-VN.yml
index 3cac0585a..23e730950 100644
--- a/locales/vi-VN.yml
+++ b/locales/vi-VN.yml
@@ -8,7 +8,7 @@ notifications: "Thông báo"
 username: "Tên người dùng"
 password: "Mật khẩu"
 forgotPassword: "Quên mật khẩu"
-fetchingAsApObject: "Đang nạp dữ liệu từ Fediverse..."
+fetchingAsApObject: "Đang nạp dữ liệu từ Fediverse"
 ok: "Đồng ý"
 gotIt: "Đã hiểu!"
 cancel: "Hủy"
diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml
index 1b6f29667..c7d6cfd94 100644
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@@ -8,7 +8,7 @@ notifications: "通知"
 username: "用户名"
 password: "密码"
 forgotPassword: "忘记密码"
-fetchingAsApObject: "正在联邦宇宙查询中..."
+fetchingAsApObject: "正在联邦宇宙查询中"
 ok: "OK"
 gotIt: "我明白了"
 cancel: "取消"
diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml
index 3449da99a..ef3b45471 100644
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@@ -8,7 +8,7 @@ notifications: "通知"
 username: "使用者名稱"
 password: "密碼"
 forgotPassword: "忘記密碼"
-fetchingAsApObject: "從聯邦宇宙取得中..."
+fetchingAsApObject: "從聯邦宇宙取得中"
 ok: "OK"
 gotIt: "知道了"
 cancel: "取消"

From 1425b2dba7227f9c9d90514b386c386f160052f6 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Thu, 10 Nov 2022 14:21:20 -0800
Subject: [PATCH 06/49] no double import

---
 packages/client/src/components/MkModalPageWindow.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index 2dfcc1042..b503e9161 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -31,7 +31,6 @@ import { mainRouter, routes } from '@/router';
 import { i18n } from '@/i18n';
 import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 import { Router } from '@/nirax';
-import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	initialPath: string;

From 7715f4f08179fa08adbf408fb88ab7c5b6c25273 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Thu, 10 Nov 2022 14:22:48 -0800
Subject: [PATCH 07/49] =?UTF-8?q?fix:=20=F0=9F=90=9B=20no=20double=20impor?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/pages/announcements.vue           | 1 -
 packages/client/src/pages/page-editor/page-editor.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index b038a6857..94fc5ba26 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -25,7 +25,6 @@ import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
 
 const pagination = {
 	endpoint: 'announcements' as const,
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 13231a3ea..fb8e11e52 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -107,7 +107,6 @@ import { mainRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { $i } from '@/account';
-import { i18n } from '@/i18n';
 
 const XDraggable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 

From 060a7e477f477029fd3bc83e4d3275aacc51a873 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Hern=C3=A1ndez?= <danhernan23i@gmail.com>
Date: Thu, 10 Nov 2022 21:50:29 -0400
Subject: [PATCH 08/49] fix: workaround for sticky image container header

---
 packages/client/src/pages/user/index.photos.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 9fbd3a22e..703b3adce 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -1,5 +1,5 @@
 <template>
-<MkContainer :max-height="300" :foldable="true">
+<MkContainer id="photos-container" :max-height="300" :foldable="true">
 	<template #header><i class="ph-image-bold ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.images }}</template>
 	<div class="ujigsodd">
 		<MkLoading v-if="fetching"/>
@@ -73,6 +73,10 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+#photos-container {
+	--stickyTop: 0;
+}
+
 .ujigsodd {
 	padding: 8px;
 

From 08582788bf8f745dc7110dcf133c9a490799bf55 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 11 Nov 2022 00:41:26 -0800
Subject: [PATCH 09/49] more i18n fixes

---
 .../client/src/pages/page-editor/page-editor.script-block.vue    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue
index a89daab80..e817fa6f8 100644
--- a/packages/client/src/pages/page-editor/page-editor.script-block.vue
+++ b/packages/client/src/pages/page-editor/page-editor.script-block.vue
@@ -111,6 +111,7 @@ export default defineComponent({
 			error: null,
 			warn: null,
 			slots: '',
+			i18n,
 		};
 	},
 

From 27883b448066815932f687cc3c241edf91b87350 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 11 Nov 2022 00:41:34 -0800
Subject: [PATCH 10/49] more i18n fixes

---
 package.json                                              | 2 +-
 packages/client/src/components/MkContainer.vue            | 1 +
 packages/client/src/components/MkFormDialog.vue           | 1 +
 packages/client/src/components/MkMediaCaption.vue         | 3 ++-
 packages/client/src/components/MkPostFormAttaches.vue     | 1 +
 packages/client/src/pages/about.emojis.vue                | 1 +
 packages/client/src/pages/admin/metrics.vue               | 3 ++-
 .../src/pages/page-editor/page-editor.container.vue       | 8 ++++----
 packages/client/src/pages/welcome.entrance.b.vue          | 1 +
 packages/client/src/pages/welcome.entrance.c.vue          | 1 +
 packages/client/src/ui/classic.header.vue                 | 1 +
 packages/client/src/ui/classic.sidebar.vue                | 1 +
 packages/client/src/ui/classic.widgets.vue                | 1 +
 packages/client/src/ui/visitor.vue                        | 1 +
 packages/client/src/ui/visitor/a.vue                      | 1 +
 packages/client/src/ui/visitor/header.vue                 | 1 +
 packages/client/src/ui/visitor/kanban.vue                 | 1 +
 17 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 4b3401c36..fe53a2c21 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.12.7",
+	"version": "12.119.0-calc.12.8",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index 03a2b40ce..f1dce7284 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -74,6 +74,7 @@ export default defineComponent({
 			showBody: this.expanded,
 			omitted: null,
 			ignoreOmit: false,
+			i18n,
 		};
 	},
 	mounted() {
diff --git a/packages/client/src/components/MkFormDialog.vue b/packages/client/src/components/MkFormDialog.vue
index 7c3f6b1fb..a92f39d5d 100644
--- a/packages/client/src/components/MkFormDialog.vue
+++ b/packages/client/src/components/MkFormDialog.vue
@@ -94,6 +94,7 @@ export default defineComponent({
 	data() {
 		return {
 			values: {},
+			i18n,
 		};
 	},
 
diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
index 8d7861ea1..1a1cc5e61 100644
--- a/packages/client/src/components/MkMediaCaption.vue
+++ b/packages/client/src/components/MkMediaCaption.vue
@@ -79,7 +79,8 @@ export default defineComponent({
 
 	data() {
 		return {
-			inputValue: this.input.default ? this.input.default : null
+			inputValue: this.input.default ? this.input.default : null,
+			i18n,
 		};
 	},
 
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index 56bbef3f2..8aba4a99a 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -42,6 +42,7 @@ export default defineComponent({
 	data() {
 		return {
 			menu: null as Promise<null> | null,
+			i18n,
 		};
 	},
 
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index eae1f5ba7..f5c950789 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -58,6 +58,7 @@ export default defineComponent({
 			tags: emojiTags,
 			selectedTags: new Set(),
 			searchEmojis: null,
+			i18n,
 		};
 	},
 
diff --git a/packages/client/src/pages/admin/metrics.vue b/packages/client/src/pages/admin/metrics.vue
index 79667d6ab..4309ecce6 100644
--- a/packages/client/src/pages/admin/metrics.vue
+++ b/packages/client/src/pages/admin/metrics.vue
@@ -133,6 +133,7 @@ export default defineComponent({
 			overviewHeight: '1fr',
 			queueHeight: '1fr',
 			paused: false,
+			i18n,
 		};
 	},
 
@@ -205,7 +206,7 @@ export default defineComponent({
 						pointRadius: 0,
 						tension: 0,
 						borderWidth: 2,
-						borderColor: '#935dbf',
+						borderColor: '#ebbcba',
 						borderDash: [5, 5],
 						fill: false,
 						data: [],
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index d959551bf..c979c1660 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -81,11 +81,11 @@ export default defineComponent({
 	}
 
 	&.warn {
-		border: solid 2px #dec44c;
+		border: solid 2px #f6c177;
 	}
 
 	&.error {
-		border: solid 2px #f00;
+		border: solid 2px #eb6f92;
 	}
 
 	& + .cpjygsrt {
@@ -131,14 +131,14 @@ export default defineComponent({
 	}
 
 	> .warn {
-		color: #b19e49;
+		color: #ea9d34;
 		margin: 0;
 		padding: 16px 16px 0 16px;
 		font-size: 14px;
 	}
 
 	> .error {
-		color: #f00;
+		color: #b4637a;
 		margin: 0;
 		padding: 16px 16px 0 16px;
 		font-size: 14px;
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index b6b917d82..7bcaa17ee 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -65,6 +65,7 @@ export default defineComponent({
 			stats: null,
 			tags: [],
 			onlineUsersCount: null,
+			i18n,
 		};
 	},
 
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index ba5b9bf0f..a61c9ebc9 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -85,6 +85,7 @@ export default defineComponent({
 			stats: null,
 			tags: [],
 			onlineUsersCount: null,
+			i18n,
 		};
 	},
 
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 05b666ed5..8bb2c36e1 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -60,6 +60,7 @@ export default defineComponent({
 			connection: null,
 			navbarItemDef: navbarItemDef,
 			settingsWindowed: false,
+			i18n,
 		};
 	},
 
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index e7f825700..e4e1d4d88 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -66,6 +66,7 @@ export default defineComponent({
 			navbarItemDef: navbarItemDef,
 			iconOnly: false,
 			settingsWindowed: false,
+			i18n,
 		};
 	},
 
diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue
index 05da33135..04ca34b55 100644
--- a/packages/client/src/ui/classic.widgets.vue
+++ b/packages/client/src/ui/classic.widgets.vue
@@ -29,6 +29,7 @@ export default defineComponent({
 	data() {
 		return {
 			editMode: false,
+			i18n,
 		};
 	},
 
diff --git a/packages/client/src/ui/visitor.vue b/packages/client/src/ui/visitor.vue
index ec9150d34..767c9ddbb 100644
--- a/packages/client/src/ui/visitor.vue
+++ b/packages/client/src/ui/visitor.vue
@@ -8,6 +8,7 @@ import { defineComponent, defineAsyncComponent } from 'vue';
 import DesignA from './visitor/a.vue';
 import DesignB from './visitor/b.vue';
 import XCommon from './_common_/common.vue';
+import { i18n } from '@/i18n';
 
 export default defineComponent({
 	components: {
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
index 06b4a1fd0..6048535b7 100644
--- a/packages/client/src/ui/visitor/a.vue
+++ b/packages/client/src/ui/visitor/a.vue
@@ -70,6 +70,7 @@ export default defineComponent({
 			},
 			mainRouter,
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+			i18n,
 		};
 	},
 
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 79e4a4291..0eb7f1c89 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -61,6 +61,7 @@ export default defineComponent({
 		return {
 			narrow: null,
 			showMenu: false,
+			i18n,
 			isTimelineAvailable: !instance.disableLocalTimeline || !instance.disableRecommendedTimeline || !instance.disableGlobalTimeline,
 		};
 	},
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
index d3f310f17..74f8761ce 100644
--- a/packages/client/src/ui/visitor/kanban.vue
+++ b/packages/client/src/ui/visitor/kanban.vue
@@ -82,6 +82,7 @@ export default defineComponent({
 				endpoint: 'announcements',
 				limit: 10,
 			},
+			i18n,
 		};
 	},
 

From ec724c40222884bd267efb3f8e96c245b46e57b9 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 11 Nov 2022 10:55:03 -0800
Subject: [PATCH 11/49] more translation stuff

---
 locales/ar-SA.yml | 42 ++++++++++++++++++++----------------------
 locales/bn-BD.yml | 42 ++++++++++++++++++++----------------------
 locales/de-DE.yml | 40 +++++++++++++++++++---------------------
 locales/en-US.yml |  2 +-
 locales/es-ES.yml | 42 ++++++++++++++++++++----------------------
 locales/fr-FR.yml | 42 ++++++++++++++++++++----------------------
 locales/it-IT.yml | 42 ++++++++++++++++++++----------------------
 locales/ja-JP.yml |  2 +-
 locales/ja-KS.yml |  2 --
 locales/ko-KR.yml | 23 -----------------------
 locales/pl-PL.yml | 42 ++++++++++++++++++++----------------------
 locales/ru-RU.yml | 40 +++++++++++++++++++---------------------
 locales/sk-SK.yml | 42 ++++++++++++++++++++----------------------
 locales/uk-UA.yml | 40 +++++++++++++++++++---------------------
 locales/vi-VN.yml | 42 ++++++++++++++++++++----------------------
 locales/zh-CN.yml | 40 +++++++++++++++++++---------------------
 locales/zh-TW.yml | 42 ++++++++++++++++++++----------------------
 17 files changed, 258 insertions(+), 309 deletions(-)

diff --git a/locales/ar-SA.yml b/locales/ar-SA.yml
index bddce157d..6bc450fa3 100644
--- a/locales/ar-SA.yml
+++ b/locales/ar-SA.yml
@@ -1029,28 +1029,26 @@ _time:
   hour: "سا"
   day: "ي"
 _tutorial:
-  title: "كيف تستخدم Misskey"
-  step1_1: "مرحبًا!"
-  step1_2: "تدعى هذه الصفحة 'الخيط الزمني' وهي تحوي ملاحظات الأشخاص الذي تتابعهم مرتبة حسب تاريخ نشرها."
-  step1_3: "خيطك الزمني فارغ حاليًا بما أنك لا تتابع أي شخص ولم تنشر أي ملاحظة."
-  step2_1: "لننهي إعداد ملفك الشخصي قبل كتابة ملاحظة أو متابعة أشخاص."
-  step2_2: "أعطاء معلومات عن شخصيتك يمنح من له نفس إهتماماتك فرصة متابعتك والتفاعل مع ملاحظاتك."
-  step3_1: "هل أنهيت إعداد حسابك؟"
-  step3_2: "إذا تاليًا لتنشر ملاحظة. أنقر على أيقونة القلم في أعلى الشاشة"
-  step3_3: "املأ النموذج وانقر الزرّ الموجود في أعلى اليمين للإرسال."
-  step3_4: "ليس لديك ما تقوله؟ إذا اكتب \"بدأتُ استخدم ميسكي\"."
-  step4_1: "هل نشرت ملاحظتك الأولى؟"
-  step4_2: "مرحى! يمكنك الآن رؤية ملاحظتك في الخيط الزمني."
-  step5_1: "والآن، لنجعل الخيط الزمني أكثر حيوية وذلك بمتابعة بعض المستخدمين."
-  step5_2: "تعرض صفحة {features} الملاحظات المتداولة في هذا المثيل ويتيح لك {Explore} العثور على المستخدمين الرائدين. اعثر على الأشخاص الذين يثيرون إهتمامك وتابعهم!"
-  step5_3: "لمتابعة مستخدمين ادخل ملفهم الشخصي بالنقر على صورتهم الشخصية ثم اضغط زر 'تابع'."
-  step5_4: "إذا كان لدى المستخدم رمز قفل بجوار اسمه ، وجب عليك انتظاره ليقبل طلب المتابعة يدويًا."
-  step6_1: "الآن ستتمكن من رؤية ملاحظات المستخدمين المتابَعين في الخيط الزمني."
-  step6_2: "يمكنك التفاعل بسرعة مع الملاحظات عن طريق إضافة \"تفاعل\"."
-  step6_3: "لإضافة تفاعل لملاحظة ، انقر فوق علامة \"+\" أسفل للملاحظة واختر الإيموجي المطلوب."
-  step7_1: "مبارك ! أنهيت الدورة التعليمية الأساسية لاستخدام ميسكي."
-  step7_2: "إذا أردت معرفة المزيد عن ميسكي زر {help}."
-  step7_3: "حظًا سعيدًا واستمتع بوقتك مع ميسكي! 🚀"
+  title: "How to use Calckey"
+  step1_1: "Welcome!"
+  step1_2: "Let's get you set up. You'll be up and running in no time!"
+  step2_1: "First, please fill out your profile."
+  step2_2: "Providing some information about who you are will make it easier for others to tell if they want to see your notes or follow you."
+  step3_1: "Now time to follow some people!"
+  step3_2: "Your home and social timelines are based off of who you follow, so try following a couple accounts to get started.\nClick the plus circle on the top right of a profile to follow them."
+  step4_1: "Let's get you out there."
+  step4_2: "For your first post, some people like to made a {introduction} post or a simple \"Hello world!\""
+  step5_1: "Timelines, timelines everywhere!"
+  step5_2: "Your instance has {timelines} different timelines enabled."
+  step5_3: "The Home {icon} timeline is where you can see posts from your followers."
+  step5_4: "The Local {icon} timeline is where you can see posts from everyone else on this instance."
+  step5_5: "The Recommended {icon} timeline is where you can see posts from instances the admins recommend."
+  step5_6: "The Social {icon} timeline is where you can see posts from friends of your followers."
+  step5_7: "The Global {icon} timeline is where you can see posts from every other connected instance."
+  step6_1: "So, what is this place?"
+  step6_2: "Well, you didn't just join Calckey. You joined a portal to the Fediverse, an interconnected network of thousands of servers, called \"instances\"."
+  step6_3: "Each server works in different ways, and not all servers run Calckey. This one does though! It's a bit complicated, but you'll get the hang of it in no time."
+  step6_4: "Now go, explore, and have fun!"
 _2fa:
   alreadyRegistered: "سجلت سلفًا جهازًا للاستيثاق بعاملين."
   registerDevice: "سجّل جهازًا جديدًا"
diff --git a/locales/bn-BD.yml b/locales/bn-BD.yml
index 868b3eed6..cfa4811ce 100644
--- a/locales/bn-BD.yml
+++ b/locales/bn-BD.yml
@@ -1110,28 +1110,26 @@ _time:
   hour: "ঘণ্টা"
   day: "দিন"
 _tutorial:
-  title: "Misskey কিভাবে ব্যাবহার করবেন"
-  step1_1: "স্বাগতম!"
-  step1_2: "এই স্ক্রীনটিকে \"টাইমলাইন\" বলা হয় এবং কালানুক্রমিক ক্রমে আপনার এবং আপনি যাদের \"অনুসরণ করেন\" তাদের \"নোটগুলি\" দেখায়৷"
-  step1_3: "আপনি আপনার টাইমলাইনে কিছু দেখতে পাবেন না কারণ আপনি এখনও কোনো নোট পোস্ট করেননি এবং আপনি কাউকে অনুসরণ করছেন না৷"
-  step2_1: "নোট তৈরি করার আগে বা কাউকে অনুসরণ করার আগে প্রথমে আপনার প্রোফাইলটি সম্পূর্ণ করুন।"
-  step2_2: "আপনি কে তা জানা অনেক লোকের জন্য আপনার নোটগুলি দেখা এবং অনুসরণ করাকে সহজ করে তোলে৷"
-  step3_1: "আপনি কি সফলভাবে আপনার প্রোফাইল সেট আপ করেছেন?"
-  step3_2: "এখন, কিছু নোট পোস্ট করার চেষ্টা করুন। পোস্ট ফর্ম খুলতে পেন্সিল চিহ্নযুক্ত বাটনে ক্লিক করুন।"
-  step3_3: "বিষয়বস্তু লেখার পরে, আপনি ফর্মের উপরের ডানদিকের বাটনে ক্লিক করে পোস্ট করতে পারেন।"
-  step3_4: "পোস্ট করার মত কিছু মনে পরছে না? \"আমি মিসকি সেট আপ করছি\" বললে কেমন হয়?"
-  step4_1: "পোস্ট করেছেন?"
-  step4_2: "সাবাশ! এখন আপনার নোট টাইমলাইনে দেখা যাবে।"
-  step5_1: "এখন অন্যদেরকে অনুসরণ করে আপনার টাইমলাইনকে প্রাণবন্ত করে তুলুন।"
-  step5_2: "আপনি {featured}-এ জনপ্রিয় নোটগুলি দেখতে পারেন, যাতে আপনি যে ব্যক্তিকে পছন্দ করেন তাকে বেছে নিতে এবং অনুসরণ করতে পারেন, অথবা {explore}-এ জনপ্রিয় ব্যবহারকারীদের দেখতে পারেন৷"
-  step5_3: "একজন ব্যবহারকারীকে অনুসরণ করতে, ব্যবহারকারীর আইকনে ক্লিক করুন এবং ব্যবহারকারীর পৃষ্ঠাতে  \"অনুসরণ করুন\" বাটনে ক্লিক করুন।"
-  step5_4: "যদি ব্যবহারকারীর নামের পাশে একটি লক আইকন থাকে তাহলে আপনার অনুসরণের অনুরোধ গ্রহণ করার জন্য তারা কিছু সময় নিতে পারে।"
-  step6_1: "সবকিছু ঠিক থাকলে আপনি টাইমলাইনে অন্য ব্যবহারকারীদের নোট দেখতে পাবেন।"
-  step6_2: "আপনি সহজেই আপনার প্রতিক্রিয়া জানাতে অন্য ব্যক্তির নোটে \"রিঅ্যাকশন\" যোগ করতে পারেন।"
-  step6_3: "একটি রিঅ্যাকশন যোগ করতে, নোটে \"+\" চিহ্নে ক্লিক করুন এবং আপনার পছন্দের রিঅ্যাকশন নির্বাচন করুন।"
-  step7_1: "অভিনন্দন! আপনি এখন Misskey-র প্রাথমিক টিউটোরিয়ালটি শেষ করেছেন।"
-  step7_2: "আপনি যদি Misskey সম্পর্কে আরও জানতে চান, তাহলে {help} এ দেখুন।"
-  step7_3: "এখন Misskey উপভোগ করুন 🚀"
+  title: "How to use Calckey"
+  step1_1: "Welcome!"
+  step1_2: "Let's get you set up. You'll be up and running in no time!"
+  step2_1: "First, please fill out your profile."
+  step2_2: "Providing some information about who you are will make it easier for others to tell if they want to see your notes or follow you."
+  step3_1: "Now time to follow some people!"
+  step3_2: "Your home and social timelines are based off of who you follow, so try following a couple accounts to get started.\nClick the plus circle on the top right of a profile to follow them."
+  step4_1: "Let's get you out there."
+  step4_2: "For your first post, some people like to made a {introduction} post or a simple \"Hello world!\""
+  step5_1: "Timelines, timelines everywhere!"
+  step5_2: "Your instance has {timelines} different timelines enabled."
+  step5_3: "The Home {icon} timeline is where you can see posts from your followers."
+  step5_4: "The Local {icon} timeline is where you can see posts from everyone else on this instance."
+  step5_5: "The Recommended {icon} timeline is where you can see posts from instances the admins recommend."
+  step5_6: "The Social {icon} timeline is where you can see posts from friends of your followers."
+  step5_7: "The Global {icon} timeline is where you can see posts from every other connected instance."
+  step6_1: "So, what is this place?"
+  step6_2: "Well, you didn't just join Calckey. You joined a portal to the Fediverse, an interconnected network of thousands of servers, called \"instances\"."
+  step6_3: "Each server works in different ways, and not all servers run Calckey. This one does though! It's a bit complicated, but you'll get the hang of it in no time."
+  step6_4: "Now go, explore, and have fun!"
 _2fa:
   alreadyRegistered: "আপনি ইতিমধ্যে একটি 2-ফ্যাক্টর অথেনটিকেশন ডিভাইস নিবন্ধন করেছেন৷"
   registerDevice: "নতুন ডিভাইস নিবন্ধন করুন"
diff --git a/locales/de-DE.yml b/locales/de-DE.yml
index 89415f6c3..d7920b361 100644
--- a/locales/de-DE.yml
+++ b/locales/de-DE.yml
@@ -1181,28 +1181,26 @@ _time:
   hour: "Stunde(n)"
   day: "Tag(en)"
 _tutorial:
-  title: "Wie du Misskey verwendest"
+  title: "Wie man Calckey benutzt"
   step1_1: "Willkommen!"
-  step1_2: "Diese Seite ist die „Chronik“. Sie zeigt dir deine geschrieben „Notizen“ sowie die aller Benutzer, denen du „folgst“, in chronologischer Reihenfolge."
-  step1_3: "Deine Chronik sollte momentan leer sein, da du bis jetzt noch keine Notizen geschrieben hast und auch noch keinen Benutzern folgst."
-  step2_1: "Lass uns zuerst dein Profil vervollständigen, bevor du Notizen schreibst oder jemandem folgst."
-  step2_2: "Informationen darüber, was für eine Person du bist, macht es anderen leichter zu wissen, ob sie deine Notizen sehen wollen und ob sie dir folgen möchten."
-  step3_1: "Mit dem Einrichten deines Profils fertig?"
-  step3_2: "Dann lass uns als nächstes versuchen, eine Notiz zu schreiben. Dies kannst du tun, indem du auf den Knopf mit dem Stift-Icon auf dem Bildschirm drückst."
-  step3_3: "Fülle das Fenster aus und drücke auf den Knopf oben rechts zum Senden."
-  step3_4: "Fällt dir nichts ein, das du schreiben möchtest? Versuch's mit \"Hallo Misskey!\""
-  step4_1: "Fertig mit dem Senden deiner ersten Notiz?"
-  step4_2: "Falls deine Notiz nun in deiner Chronik auftaucht, hast du alles richtig gemacht."
-  step5_1: "Lass uns nun deiner Chronik etwas mehr Leben einhauchen, indem du einigen anderen Benutzern folgst."
-  step5_2: "{featured} zeigt dir beliebte Notizen dieser Instanz. In {explore} kannst du beliebte Benutzer finden. Schau dort, ob du Benutzer findest, die dich interessieren."
-  step5_3: "Klicke zum Anzeigen des Profils eines Benutzers auf dessen Profilbild und dann auf den \"Folgen\"-Knopf, um diesem zu folgen."
-  step5_4: "Je nach Benutzer kann es etwas Zeit in Anspruch nehmen, bis dieser deine Follow-Anfrage bestätigt."
-  step6_1: "Wenn du nun auch die Notizen anderer Benutzer in deiner Chronik siehst, hast du auch diesmal alles richtig gemacht."
-  step6_2: "Du kannst ebenso „Reaktionen“ verwenden, um schnell auf Notizen anderer Benutzer zu reagieren."
-  step6_3: "Um eine Reaktion anzufügen, klicke auf das „+“-Symbol in der Notiz und wähle ein Emoji aus, mit dem du reagieren möchtest."
-  step7_1: "Glückwunsch! Du hast die Einführung in die Verwendung von Misskey abgeschlossen."
-  step7_2: "Wenn du mehr über Misskey lernen möchtest, schau dich im {help}-Bereich um."
-  step7_3: "Und nun, viel Spaß mit Misskey! 🚀"
+  step1_2: "Wir werden Sie einrichten. Sie werden im Handumdrehen einsatzbereit sein!"
+  step2_1: "Bitte füllen Sie zuerst Ihr Profil aus."
+  step2_2: "Wenn du ein paar Angaben zu deiner Person machst, können andere leichter erkennen, ob sie deine Notizen sehen oder dir folgen wollen."
+  step3_1: "Jetzt ist es Zeit, einigen Leuten zu folgen!"
+  step3_2: "Deine Home- und Social-Timeline basiert darauf, wem du folgst, also folge für den Anfang ein paar Accounts."
+  step4_1: "Wir bringen dich nach draußen."
+  step4_2: "Für deinen ersten Beitrag machen manche Leute gerne einen {introduction} Beitrag oder ein einfaches \"Hallo Welt!\""
+  step5_1: "Timelines, Timelines überall!"
+  step5_2: "Deine Instanz hat {Zeitleisten} verschiedene Zeitleisten aktiviert."
+  step5_3: "Die Zeitleiste Home {icon} ist die Zeitleiste, in der du die Beiträge deiner Follower sehen kannst."
+  step5_4: "In der lokalen {Icon} Zeitleiste kannst du die Beiträge aller anderen Mitglieder dieser Instanz sehen."
+  step5_5: "In der Zeitleiste Empfohlen {icon} kannst du Beiträge von Instanzen sehen, die von den Administratoren empfohlen werden."
+  step5_6: "In der sozialen {icon} Zeitleiste kannst du Beiträge von Freunden deiner Follower sehen."
+  step5_7: "In der globalen {icon} Zeitleiste kannst du Beiträge von allen anderen verbundenen Instanzen sehen."
+  step6_1: "Also, was ist das hier?"
+  step6_2: "Nun, du bist nicht nur Calckey beigetreten. Du bist einem Portal zum Fediversum beigetreten, einem zusammenhängenden Netzwerk von Tausenden von Servern, genannt \"Instanzen\"."
+  step6_3: "Jeder Server funktioniert auf unterschiedliche Weise, und nicht auf allen Servern läuft Calckey. Dieser hier aber schon! Es ist ein bisschen kompliziert, aber du wirst den Dreh schnell raus haben."
+  step6_4: "Jetzt geh, erkunde und hab Spaß!"
 _2fa:
   alreadyRegistered: "Du hast bereits ein Gerät für Zwei-Faktor-Authentifizierung registriert."
   registerDevice: "Neues Gerät registrieren"
diff --git a/locales/en-US.yml b/locales/en-US.yml
index 0c962f3ae..2fea9cc9d 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1218,7 +1218,7 @@ _tutorial:
   step2_1: "First, please fill out your profile."
   step2_2: "Providing some information about who you are will make it easier for others to tell if they want to see your notes or follow you."
   step3_1: "Now time to follow some people!"
-  step3_2: "Your home and social timelines are based off of who you follow, so try following a couple accounts to get started."
+  step3_2: "Your home and social timelines are based off of who you follow, so try following a couple accounts to get started.\nClick the plus circle on the top right of a profile to follow them."
   step4_1: "Let's get you out there."
   step4_2: "For your first post, some people like to made a {introduction} post or a simple \"Hello world!\""
   step5_1: "Timelines, timelines everywhere!"
diff --git a/locales/es-ES.yml b/locales/es-ES.yml
index 5db8843bb..49cc397ff 100644
--- a/locales/es-ES.yml
+++ b/locales/es-ES.yml
@@ -1181,28 +1181,26 @@ _time:
   hour: "Horas"
   day: "Días"
 _tutorial:
-  title: "Cómo usar Misskey"
-  step1_1: "Bienvenido"
-  step1_2: "Esta imagen se llama \"Linea de tiempo\" y muestra en orden cronológico las \"notas\" tuyas y de la gente que \"sigues\""
-  step1_3: "Si no estás escribiendo ninguna nota y no estás siguiendo a nadie, es esperable que no se muestre nada en la linea de tiempo"
-  step2_1: "Antes de crear notas y seguir a alguien, primero vamos a crear tu perfil"
-  step2_2: "Si provees información sobre quien eres, será más fácil para que otros usuarios te sigan"
-  step3_1: "¿Has podido crear tu perfil sin problemas?"
-  step3_2: "Con esto, prueba hacer una nota. Aprieta el botón con forma de lápiz que está arriba de la imagen y abre el formulario."
-  step3_3: "Si has escrito el contenido, aprieta el botón que está arriba a la derecha del formulario para postear."
-  step3_4: "¿No se te ocurre un contenido? Prueba con decir \"Empecé a usar Misskey\""
-  step4_1: "¿Has posteado?"
-  step4_2: "Si tu nota puede verse en la linea de tiempo, fue todo un éxito."
-  step5_1: "Luego, ponte a seguir a otra gente y haz que tu linea de tiempo esté más animada."
-  step5_2: "Puedes ver las notas destacadas en {featured} y desde allí seguir a usuarios que te importan. También puedes buscar usuario destacados en {explore}."
-  step5_3: "Para seguir a un usuario, haz click en su avatar para ver su página de usuario y allí apretar el botón \"seguir\""
-  step5_4: "De esa manera, puede pasar un tiempo hasta que el usuario apruebe al seguidor."
-  step6_1: "Si puedes ver en la linea de tiempo las notas de otros usuarios, fue todo un éxito."
-  step6_2: "En las notas de otros usuarios puedes añadir una \"reacción\", para poder responder rápidamente."
-  step6_3: "Para añadir una reacción, haz click en el botón \"+\" de la nota y elige la reacción que prefieras."
-  step7_1: "Así terminó la explicación del funcionamiento básico de Misskey. Eso fue todo."
-  step7_2: "Si quieres conocer más sobre Misskey, prueba con la sección {help}."
-  step7_3: "Así, disfruta de Misskey 🚀"
+  title: "Cómo usar Calckey"
+  step1_1: "¡Bienvenido!"
+  step1_2: "Vamos a configurarte. Estarás listo y funcionando en poco tiempo"
+  step2_1: "En primer lugar, rellena tu perfil"
+  step2_2: "Proporcionar algo de información sobre quién eres hará que sea más fácil para los demás saber si quieren ver tus notas o seguirte."
+  step3_1: "¡Ahora es el momento de seguir a algunas personas!"
+  step3_2: "Tu página de inicio y tus líneas de tiempo sociales se basan en quién sigues, así que intenta seguir un par de cuentas para empezar.\nHaz clic en el círculo más en la parte superior derecha de un perfil para seguirlos."
+  step4_1: "Vamos a salir a la calle"
+  step4_2: "Para tu primer post, a algunas personas les gusta hacer un post de {introduction} o un simple \"¡Hola mundo!\""
+  step5_1: "¡Líneas de tiempo, líneas de tiempo por todas partes!"
+  step5_2: "Su instancia tiene {timelines} diferentes líneas de tiempo habilitadas"
+  step5_3: "La línea de tiempo Inicio {icon} es donde puedes ver las publicaciones de tus seguidores."
+  step5_4: "La línea de tiempo Local {icon} es donde puedes ver las publicaciones de todos los demás en esta instancia."
+  step5_5: "La línea de tiempo {icon} recomendada es donde puedes ver las publicaciones de las instancias que los administradores recomiendan."
+  step5_6: "La línea de tiempo Social {icon} es donde puedes ver las publicaciones de los amigos de tus seguidores."
+  step5_7: "La línea de tiempo Global {icon} es donde puedes ver las publicaciones de todas las demás instancias conectadas."
+  step6_1: "Entonces, ¿qué es este lugar?"
+  step6_2: "Bueno, no sólo te has unido a Calckey. Te has unido a un portal del Fediverso, una red interconectada de miles de servidores, llamada \"instancias\""
+  step6_3: "Cada servidor funciona de forma diferente, y no todos los servidores ejecutan Calckey. Sin embargo, ¡éste lo hace! Es un poco complicado, pero le cogerás el tranquillo enseguida"
+  step6_4: "¡Ahora ve, explora y diviértete!"
 _2fa:
   alreadyRegistered: "Ya has completado la configuración."
   registerDevice: "Registrar dispositivo"
diff --git a/locales/fr-FR.yml b/locales/fr-FR.yml
index 1c8c51fd7..e1b1de34f 100644
--- a/locales/fr-FR.yml
+++ b/locales/fr-FR.yml
@@ -1103,28 +1103,26 @@ _time:
   hour: "h"
   day: "j"
 _tutorial:
-  title: "Comment utiliser Misskey"
-  step1_1: "Bienvenue,"
-  step1_2: "Cette page est appelée « un fil ». Elle affiche les « notes » des personnes auxquelles vous êtes abonné dans un ordre chronologique."
-  step1_3: "Votre fil est actuellement vide vu que vous ne suivez aucun compte et que vous n’avez publié aucune note, pour l’instant."
-  step2_1: "Procédons d’abord à la préparation de votre profil avant d’écrire une note et/ou de vous abonner à un compte."
-  step2_2: "En fournissant quelques informations sur vous, il sera plus facile pour les autres de s’abonner à votre compte."
-  step3_1: "Vous avez fini de créer votre profil ?"
-  step3_2: "L’étape suivante consiste à créer une note. Vous pouvez commencer en cliquant sur l’icône crayon sur l’écran."
-  step3_3: "Remplissez le cadran et cliquez sur le bouton en haut à droite pour envoyer."
-  step3_4: "Vous n’avez rien à dire ? Essayez d’écrire « J’ai commencé à utiliser Misskey »."
-  step4_1: "Avez-vous publié votre première note ?"
-  step4_2: "Youpi ! Celle-ci est maintenant affichée sur votre fil d’actualité."
-  step5_1: "Maintenant, essayons de nous abonner à d’autres personnes afin de rendre votre fil plus vivant."
-  step5_2: "La page {featured} affiche les notes en tendance sur la présente instance et {explore} vous permet de trouver des utilisateur·rice·s en tendance. Essayez de vous abonner aux gens que vous aimez !"
-  step5_3: "Pour pouvoir suivre d’autres utilisateur·rice, cliquez sur leur avatar afin d’afficher la page du profil utilisateur ensuite appuyez sur le bouton « S’abonner »."
-  step5_4: "Si l’autre utilisateur possède une icône sous forme d’un cadenas à côté de son nom, il devra accepter votre demande d’abonnement manuellement."
-  step6_1: "Maintenant, vous êtes en mesure de voir s’afficher les notes des autres utilisateur·rice·s sur votre propre fil."
-  step6_2: "Vous avez également la possibilité d’intéragir rapidement avec les notes des autres utilisateur·rice·s en ajoutant des « réactions »."
-  step6_3: "Pour ajouter une réaction à une note, cliquez sur le signe « + » de celle-ci et sélectionnez l’émoji souhaité."
-  step7_1: "Félicitations ! Vous avez atteint la fin du tutoriel de base pour l’utilisation de Misskey."
-  step7_2: "Si vous désirez en savoir plus sur Misskey, jetez un œil sur la section {help}."
-  step7_3: "Bon courage et amusez-vous bien sur Misskey ! 🚀"
+  title: "Comment utiliser Calckey"
+  step1_1 : "Bienvenue!"
+  step1_2 : "On va vous installer. Vous serez opérationnel en un rien de temps"
+  step2_1 : "Tout d'abord, remplissez votre profil"
+  step2_2 : "En fournissant quelques informations sur qui vous êtes, il sera plus facile pour les autres de savoir s'ils veulent voir vos notes ou vous suivre."
+  step3_1 : "Maintenant il est temps de suivre des gens !"
+  step3_2 : "Votre page d'accueil et vos timelines sociales sont basées sur les personnes que vous suivez, alors essayez de suivre quelques comptes pour commencer.\nCliquez sur le cercle plus en haut à droite d'un profil pour le suivre."
+  step4_1 : "On y va."
+  step4_2 : "Pour votre premier post, certaines personnes aiment faire un post {introduction} ou un simple post 'Hello world'."
+  step5_1 : "Lignes de temps, lignes de temps partout !"
+  step5_2 : "Votre instance a {timelines} différentes chronologies activées !"
+  step5_3 : "La timeline Home {icon} est l'endroit où vous pouvez voir les publications de vos followers."
+  step5_4 : "La timeline locale {icon} est l'endroit où vous pouvez voir les messages de tout le monde sur cette instance."
+  step5_5 : "La timeline {icon} recommandée est l'endroit où vous pouvez voir les messages des instances que les administrateurs recommandent."
+  step5_6 : "La timeline {icon} sociale est l'endroit où vous pouvez voir les publications des amis de vos followers."
+  step5_7 : "La timeline globale {icon} est l'endroit où vous pouvez voir les messages de toutes les autres instances connectées."
+  step6_1 : "Alors quel est cet endroit ?"
+  step6_2 : "Eh bien, vous ne venez pas de rejoindre Calckey. Vous avez rejoint un portail vers le Fediverse, un réseau interconnecté de milliers de serveurs, appelés \"instances\"."
+  step6_3 : "Chaque serveur fonctionne différemment, et tous les serveurs n'utilisent pas Calckey. Cependant, celui-ci le fait ! C'est un peu délicat, mais vous aurez le coup de main en un rien de temps."
+  step6_4 : "Maintenant, allez-y, explorez et amusez-vous !"
 _2fa:
   alreadyRegistered: "Configuration déjà achevée."
   registerDevice: "Ajouter un nouvel appareil"
diff --git a/locales/it-IT.yml b/locales/it-IT.yml
index af8f52369..b1485a336 100644
--- a/locales/it-IT.yml
+++ b/locales/it-IT.yml
@@ -1026,28 +1026,26 @@ _time:
   hour: "ore"
   day: "giorni"
 _tutorial:
-  title: "Come usare Misskey"
-  step1_1: "Benvenuto/a!"
-  step1_2: "Questa pagina si chiama una \" Timeline \". Mostra in ordine cronologico le \" note \" delle persone che segui."
-  step1_3: "Attualmente la tua Timeline è vuota perché non segui alcun account e non hai pubblicato alcuna nota ancora."
-  step2_1: "Prima di scrivere una nota o di seguire un account, imposta il tuo profilo!"
-  step2_2: "Aggiungere qualche informazione su di te aumenterà le tue possibilità di essere seguit@ da altre persone. "
-  step3_1: "Hai finito di impostare il tuo profilo?"
-  step3_2: "Ora, puoi pubblicare una nota. Facciamo una prova! Premi il pulsante a forma di penna in cima allo schermo per aprire una finestra di dialogo.  "
-  step3_3: "Scritto il testo della nota, puoi pubblicarla premendo il pulsante nella parte superiore destra della finestra di dialogo."
-  step3_4: "Non ti viene niente in mente? Perché non scrivi semplicemente \"Ho appena cominciato a usare Misskey\"?"
-  step4_1: "Hai pubblicato qualcosa?"
-  step4_2: "Se puoi visualizzare la tua nota sulla timeline, ce l'hai fatta!"
-  step5_1: "Adesso, cerca di seguire altre persone per vivacizzare la tua timeline. "
-  step5_2: "La pagina {featured} mostra le note di tendenza su questa istanza, e magari ti aiuterà a trovare account che ti piacciono e che vorrai seguire. Oppure, potrai trovare utenti popolari usando {explore}."
-  step5_3: "Per seguire altrə utenti, clicca sul loro avatar per aprire la pagina di profilo dove puoi premere il pulsante \"Seguire\". "
-  step5_4: "Alcunə utenti scelgono di confermare manualmente le richieste di follow che ricevono, quindi a seconda delle persone potrebbe volerci un pò prima che la tua richiesta sia accolta."
-  step6_1: "Ora, se puoi visualizzare le note di altrə utenti sulla tua timeline, ce l'hai fatta!"
-  step6_2: "Puoi inviare una risposta rapida alle note di altrə utenti mandando loro \"reazioni\"."
-  step6_3: "Per inviare una reazione, premi l'icona + della nota e scegli l'emoji che vuoi mandare."
-  step7_1: "Complimenti! Sei arrivat@ alla fine dell'esercitazione di base su come usare Misskey. "
-  step7_2: "Se vuoi saperne di più su Misskey, puoi dare un'occhiata alla sezione {help}."
-  step7_3: "Da ultimo, buon divertimento su Misskey! 🚀"
+  titolo: "Come usare Calckey"
+  step1_1: "Benvenuto!"
+  step1_2: "Vediamo di configurarla. Sarete operativi in men che non si dica!"
+  step2_1: "Per prima cosa, compila il tuo profilo"
+  step2_2: "Fornendo alcune informazioni su chi siete, sarà più facile per gli altri capire se vogliono vedere le vostre note o seguirvi"
+  step3_1: "Ora è il momento di seguire alcune persone!"
+  step3_2: "La vostra home e le vostre timeline social si basano su chi seguite, quindi provate a seguire un paio di account per iniziare.\nCliccate sul cerchio più in alto a destra di un profilo per seguirlo"
+  step4_1: "Fatevi conoscere"
+  step4_2: "Per il vostro primo post, alcuni preferiscono fare un post di {introduction} o un semplice \"Ciao mondo!\""
+  step5_1: "Linee temporali, linee temporali dappertutto!"
+  step5_2: "La tua istanza ha attivato {timelines} diverse timelines"
+  step5_3: "La timeline Home {icon} è quella in cui si possono vedere i post dei propri follower"
+  step5_4: "La timeline Locale {icon} è quella in cui si possono vedere i post di tutti gli altri utenti di questa istanza"
+  step5_5: "La timeline Raccomandati {icon} è quella in cui si possono vedere i post delle istanze raccomandate dagli amministratori"
+  step5_6: "La timeline Social {icon} è quella in cui si possono vedere i post degli amici dei propri follower"
+  step5_7: "La timeline Globale {icon} è quella in cui si possono vedere i post di ogni altra istanza collegata"
+  step6_1: "Allora, cos'è questo posto?"
+  step6_2: "Beh, non ti sei semplicemente unito a Calckey. Sei entrato in un portale del Fediverse, una rete interconnessa di migliaia di server, chiamata \"istanze\""
+  step6_3: "Ogni server funziona in modo diverso, e non tutti i server eseguono Calckey. Questo però lo fa! È un po' complicato, ma ci riuscirete in poco tempo"
+  step6_4: "Ora andate, esplorate e divertitevi!"
 _2fa:
   registerDevice: "Aggiungi dispositivo"
 _permissions:
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index afd464041..e1c31c1b2 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1247,7 +1247,7 @@ _tutorial:
   step3_1: "さあ、何人かの人をフォローする時間です！"
   step3_2: "あなたのホームとソーシャルタイムラインは、あなたが誰をフォローしているかで決まります。 まずは、いくつかのアカウントをフォローしてみましょう。"
   step4_1: "さあ、外に出てみましょう。"
-  step4_2: "最初の投稿は、{自己紹介}の投稿や、シンプルに「こんにちは、世界よ！」的な投稿をするのが好きな人もいます。"
+  step4_2: "最初の投稿は、{introduction}の投稿や、シンプルに「こんにちは、世界よ！」的な投稿をするのが好きな人もいます。"
   step5_1: "タイムライン、タイムラインだらけ！"
   step5_2: "あなたのインスタンスは{timelines}異なるタイムラインを有効にしています。"
   step5_3: "ホーム{icon}のタイムラインは、あなたのフォロワーからの投稿を見ることができます。"
diff --git a/locales/ja-KS.yml b/locales/ja-KS.yml
index 7d93fd83e..fe89c865b 100644
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@@ -1006,8 +1006,6 @@ _time:
   minute: "分"
   hour: "時間"
   day: "日"
-_tutorial:
-  step3_1: "プロフィール設定はええ感じにできたか？"
 _2fa:
   alreadyRegistered: "もう設定終わっとるわ。"
 _permissions:
diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
index d77f7e920..cbdae7a33 100644
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -1179,29 +1179,6 @@ _time:
   minute: "분"
   hour: "시간"
   day: "일"
-_tutorial:
-  title: "Misskey의 사용 방법"
-  step1_1: "환영합니다!"
-  step1_2: "이 페이지는 \"타임라인\"이라고 불립니다. 당신이 \"팔로우\"하고 있는 사람들의 \"노트\"가 시간순으로 나타납니다."
-  step1_3: "아직 아무 유저도 팔로우하고 있지 않기에 타임라인은 비어 있을 것입니다."
-  step2_1: "새 노트를 작성하거나 다른 사람을 팔로우하기 전에, 먼저 프로필을 완성해보도록 합시다."
-  step2_2: "당신이 어떤 사람인지를 알린다면, 다른 사람들이 당신을 팔로우할 확률이 올라갈 것입니다."
-  step3_1: "프로필 설정은 잘 끝내셨나요?"
-  step3_2: "그럼 시험삼아 노트를 작성해 보세요. 화면에 있는 연필 버튼을 누르면 작성 폼이 열립니다."
-  step3_3: "내용을 작성한 후, 폼 오른쪽 상단의 버튼을 눌러 노트를 올릴 수 있습니다."
-  step3_4: "쓸 말이 없나요? \"Misskey 시작했어요!\" 같은 건 어떨까요? :>"
-  step4_1: "노트 작성을 끝내셨나요?"
-  step4_2: "당신의 노트가 타임라인에 표시되어 있다면 성공입니다."
-  step5_1: "이제, 다른 사람을 팔로우하여 타임라인을 활기차게 만들어보도록 합시다."
-  step5_2: "{featured}에서 이 인스턴스의 인기 노트를 보실 수 있습니다. {explore}에서는 인기 사용자를 찾을 수 있구요. 마음에 드는 사람을 골라 팔로우해 보세요!"
-  step5_3: "다른 유저를 팔로우하려면 해당 유저의 아이콘을 클릭하여 프로필 페이지를 띄운 후, 팔로우 버튼을 눌러 주세요."
-  step5_4: "사용자에 따라 팔로우가 승인될 때까지 시간이 걸릴 수 있습니다."
-  step6_1: "타임라인에 다른 사용자의 노트가 나타난다면 성공입니다."
-  step6_2: "다른 유저의 노트에 \"리액션\"을 붙여 간단하게 당신의 반응을 전달할 수도 있습니다."
-  step6_3: "리액션을 붙이려면, 노트의 \"+\" 버튼을 클릭하고 원하는 이모지를 선택합니다."
-  step7_1: "이것으로 Misskey의 기본 튜토리얼을 마치겠습니다. 수고하셨습니다!"
-  step7_2: "Misskey에 대해 더 알고 싶으시다면 {help}를 참고해 주세요."
-  step7_3: "그럼 Misskey를 즐기세요! 🚀"
 _2fa:
   alreadyRegistered: "이미 설정이 완료되었습니다."
   registerDevice: "디바이스 등록"
diff --git a/locales/pl-PL.yml b/locales/pl-PL.yml
index bdc90a84d..5d2a77d9f 100644
--- a/locales/pl-PL.yml
+++ b/locales/pl-PL.yml
@@ -1112,28 +1112,26 @@ _time:
   hour: "godz."
   day: "dzień"
 _tutorial:
-  title: "Jak korzystać z Misskey"
-  step1_1: "Witaj!"
-  step1_2: "Ta strona nazywa się „oś czasu”. Pokazuje chronologicznie uporządkowane wpisy osób, które „śledzisz”."
-  step1_3: "Twoja oś czasu jest jeszcze pusta, ponieważ nie opublikowałeś(-aś) jeszcze żadnych wpisów i nie obserwujesz jeszcze nikogo."
-  step2_1: "Ukończmy konfigurację profilu zanim utworzymy wpis lub zaczniemy kogoś obserwować."
-  step2_2: "Podanie pewnych informacji o tym, kim jesteś, ułatwi innym określenie, czy chcą widzieć Twoje wpisy lub Cię obserwować."
-  step3_1: "Zakończyłeś(-aś) konfigurację profilu?"
-  step3_2: "Następnie spróbujmy opublikować wpis. Możesz to zrobić, naciskając przycisk z ikoną ołówka na ekranie."
-  step3_3: "Wypełnij pole i kliknij przycisk w prawym górnym rogu by wysłać post."
-  step3_4: "Nie masz nic do powiedzenia? Spróbuj \"ustawiam swój misskey\"!"
-  step4_1: "Zakończyłeś publikowanie pierwszego wpisu?"
-  step4_2: "Hurra! Teraz Twój pierwszy wpis powinien być wyświetlany na Twojej osi czasu."
-  step5_1: "Teraz spróbujmy ożywić Twoją oś czasu, przez zaobserwowanie innych ludzi."
-  step5_2: "{featured} pokaże Ci popularne wpisy na tej instancji. {explore} pozwoli Ci znaleźć popularnych użytkowników. Spróbuj znaleźć tam osoby, które chcesz obserwować!"
-  step5_3: "Aby obserwować innych użytkowników, kliknij ich ikonę i naciśnij przycisk \"Obserwuj\" na ich profilu."
-  step5_4: "Jeśli inny użytkownik ma ikonę kłódki obok swojej nazwy, może minąć trochę czasu, zanim ten użytkownik ręcznie zatwierdzi Twoją prośbę o obserwowanie."
-  step6_1: "Powinieneś teraz widzieć wpisy innych użytkowników na swojej osi czasu."
-  step6_2: "Możesz także umieścić „reakcje” na wpisach innych osób, aby szybko na nie odpowiedzieć."
-  step6_3: "Aby dodać \"reakcję\", naciśnij znak \"+\" na wpisie innego użytkownika i wybierz emotikonę, którą chcesz zareagować."
-  step7_1: "Gratulacje! Ukończyłeś podstawowy samouczek Misskey."
-  step7_2: "Jeśli chcesz dowiedzieć się więcej o Misskey, wypróbuj sekcję {help}."
-  step7_3: "A teraz powodzenia i baw się dobrze z Misskey! 🚀"
+  title: "Jak korzystać z Calckey"
+  step1_1: "Witamy!"
+  step1_2: "Pozwól, że cię skonfigurujemy. Będziesz działać w mgnieniu oka!"
+  step2_1: "Po pierwsze, proszę wypełnić swój profil"
+  step2_2: "Podanie kilku informacji o tym, kim jesteś, ułatwi innym stwierdzenie, czy chcą zobaczyć Twoje notatki lub śledzić Cię."
+  step3_1: "Teraz czas na śledzenie niektórych osób!"
+  step3_2: "Twoje domowe i społeczne linie czasu opierają się na tym, kogo śledzisz, więc spróbuj śledzić kilka kont, aby zacząć.\nKliknij kółko z plusem w prawym górnym rogu profilu, aby go śledzić."
+  step4_1: "Pozwól, że się tam dostaniesz."
+  step4_2: "Dla twojego pierwszego postu, niektórzy ludzie lubią zrobić {introduction} post lub prosty \"Hello world!\""
+  step5_1: "Timelines, timelines everywhere!"
+  step5_2: "Twoja instancja ma włączone {timelines} różne timelines"
+  step5_3: "Oś czasu Home {icon} to miejsce, w którym możesz zobaczyć posty od swoich zwolenników"
+  step5_4: "The Local {icon} timeline to miejsce, w którym możesz zobaczyć posty od wszystkich innych osób na tej instancji."
+  step5_5: "Oś czasu Recommended {icon} to miejsce, gdzie możesz zobaczyć posty z instancji, które admini polecają."
+  step5_6: "Oś czasu Social {icon} to miejsce, w którym możesz zobaczyć posty od znajomych swoich followersów."
+  step5_7: "The Global {icon} timeline to miejsce, gdzie możesz zobaczyć posty z każdej innej połączonej instancji."
+  step6_1: "Więc, co to jest to miejsce?"
+  step6_2: "Cóż, nie dołączyłeś po prostu do Calckey. Dołączyłeś do portalu do Fediverse, połączonej sieci tysięcy serwerów, zwanych instancjami."
+  step6_3: "Każdy serwer działa w inny sposób, i nie wszystkie serwery działają z Calckey. Ten jednak działa! Jest to trochę skomplikowane, ale w krótkim czasie załapiesz o co chodzi."
+  step6_4: "A teraz idź, odkrywaj i baw się dobrze!"
 _2fa:
   alreadyRegistered: "Zarejestrowałeś już urządzenie do uwierzytelniania dwuskładnikowego."
   registerDevice: "Zarejestruj nowe urządzenie"
diff --git a/locales/ru-RU.yml b/locales/ru-RU.yml
index afce5ec02..276d8ac3e 100644
--- a/locales/ru-RU.yml
+++ b/locales/ru-RU.yml
@@ -1108,28 +1108,26 @@ _time:
   hour: "ч"
   day: "сут"
 _tutorial:
-  title: "Как пользоваться Misskey"
+  title: "Как использовать Calckey"
   step1_1: "Добро пожаловать!"
-  step1_2: "Эта страница называется «лента». Здесь будут появляться «заметки»: ваши личные и тех, на кого вы «подписаны». Они будут располагаться в порядке времени их появления."
-  step1_3: "Правда, ваша лента пока пуста. Она начнёт заполняться, когда вы будете писать свои заметки и подписываться на других."
-  step2_1: "Давайте, заполним профиль, прежде чем начать писать заметки и подписываться на других."
-  step2_2: "То, что вы расскажете в профиле, поможет лучше вас узнать, а значит, многим будет легче присоединиться — вы скорее получите новых подписчиков и читателей."
-  step3_1: "Успешно заполнили профиль?"
-  step3_2: "Что ж, теперь самое время опубликуовать заметку. Если нажать вверху страницы на изображение карандаша, появится форма для текста."
-  step3_3: "Напишите в неё, что хотите, и нажмите на кнопку в правом верхнем углу."
-  step3_4: "Ничего не приходит в голову? Как насчёт: «Я новенький, пока осваиваюсь в Misskey»?"
-  step4_1: "С написанием первой заметки покончено?"
-  step4_2: "Отлично, теперь она должна появиться в вашей ленте."
-  step5_1: "А теперь самое время немного оживить ленту, подписавшись на других."
-  step5_2: "На странице «{featured}» собраны популярные сегодня заметки, читая которые, вы можете найти кого-то вам интересного, а на странице «{explore}» можно посмотреть, кто популярен у остальных."
-  step5_3: "Чтобы подписаться на кого-нибудь, щёлкните по его аватару и в открывшемся профиле нажмите кнопку «Подписаться»."
-  step5_4: "Некоторые пользователи (около их имени «висит замок») вручную подтверждают чужие подписки. Так что иногда подписка начинает работать не сразу.\n"
-  step6_1: "Если теперь в ленте видны и чужие заметки, значит у вас получилось."
-  step6_2: "Здесь можно непринуждённо выразить свои чувства к чьей-то заметке, отметив «реакцию» под ней."
-  step6_3: "Отмечайте реакции, нажмая на символ «+» под заметкой и выбирая значок по душе."
-  step7_1: "На этом вводный урок по использованию Misskey закончен. Спасибо, что прошли его до конца!"
-  step7_2: "Хотите изучить Misskey глубже — добро пожаловать в раздел «{help}»."
-  step7_3: "Приятно вам провести время с Misskey🚀"
+  step1_2: "Давайте настроим вас. Вы будете работать в кратчайшие сроки!"
+  step2_1: "Сначала, пожалуйста, заполните свой профиль"
+  step2_2: "Предоставив некоторую информацию о себе, другим людям будет легче понять, хотят ли они видеть ваши записи или следить за вами."
+  step3_1: "Теперь пора следить за некоторыми людьми!"
+  step3_2: "Ваша домашняя и социальная ленты основаны на том, за кем вы следите, поэтому для начала попробуйте следить за парой аккаунтов.\nНажмите на кружок с плюсом в правом верхнем углу профиля, чтобы следить за ним."
+  step4_1: "Давайте выйдем на вас"
+  step4_2: "Для своего первого сообщения некоторые люди любят делать {introduction} сообщение или простое \"Hello world!\""
+  step5_1: "Временные рамки, везде временные рамки!"
+  step5_2: "В вашем экземпляре включены {timelines} различных временных линий."
+  step5_3: "Главная {icon} временная шкала - это шкала, где вы можете видеть сообщения ваших подписчиков."
+  step5_4: "Местная {icon} временная шкала - это шкала, где вы можете видеть сообщения всех остальных пользователей данного экземпляра"
+  step5_5: "Временная шкала Рекомендуемые {icon} - это шкала, где вы можете видеть сообщения от инстанций, рекомендованных администраторами."
+  step5_6: "На временной шкале Social {icon} отображаются сообщения от друзей ваших подписчиков"
+  step5_7: "Глобальная {icon} временная шкала - это место, где вы можете видеть сообщения от всех других подключенных экземпляров"
+  step6_1: "Итак, что это за место?"
+  step6_2: "Ну, вы не просто присоединились к Кальки. Вы присоединились к порталу в Fediverse, взаимосвязанной сети из тысяч серверов, называемых \"инстансами\"."
+  step6_3: "Каждый сервер работает по-своему, и не на всех серверах работает Calckey. Но этот работает! Это немного сложно, но вы быстро разберетесь"
+  step6_4: "Теперь идите, изучайте и развлекайтесь!"
 _2fa:
   alreadyRegistered: "Двухфакторная аутентификация уже настроена."
   registerDevice: "Зарегистрируйте ваше устройство"
diff --git a/locales/sk-SK.yml b/locales/sk-SK.yml
index 43129edcf..77b690459 100644
--- a/locales/sk-SK.yml
+++ b/locales/sk-SK.yml
@@ -1176,28 +1176,26 @@ _time:
   hour: "hod"
   day: "dní"
 _tutorial:
-  title: "Ako používať Misskey"
-  step1_1: "Vitajte!"
-  step1_2: "Táto stránka sa volá \"časová os\". Zobrazuje chronologicky zoradené \"poznámky\" od ľudí, ktorých sledujete."
-  step1_3: "Vaša časová os je teraz prázdna pretože ste nepridali žiadne poznámky ani nikoho zatiaľ nesledujete."
-  step2_1: "Podˇme dokončiť nastavenia vášho profilu pred napísaním poznámky alebo sledovaním niekoho."
-  step2_2: "Poskytnutím informácií o vás uľahčíte ostatným, či chcú vidieť alebo sledovať vaše poznámky."
-  step3_1: "Dokončili ste nastavovanie svojho profilu?"
-  step3_2: "Poďme vyskúšať napísať poznámku. Môžete to spraviť stlačením ikony ceruzky na vrchu obrazovky."
-  step3_3: "Vyplňte polia a stlačte tlačítko vpravo hore."
-  step3_4: "Nemáte čo povedať? Skúste \"len si nastavujem môj msky\"!"
-  step4_1: "Napísali ste svoju prvú poznámku?"
-  step4_2: "Hurá! Teraz by vaša prvá poznámka mala byť na vašej časovej osi."
-  step5_1: "Teraz skúsme oživiť časovú os sledovaním nejakých ľudí."
-  step5_2: "{featured} zobrazí populárne poznámku na tomto serveri. {explore} môžete objavovať populárnych používateľov. Skúste tam nájsť ľudí, ktorých by ste radi sledovali!"
-  step5_3: "Ak chcete sledovať ďalších používateľov, kliknite na ich ikonu a stlačte tlačidlo \"Sledovať\" na ich profile."
-  step5_4: "Ak má niektorý používateľ ikonu zámku vedľa svojho mena, znamená to, že môže trvať určitý čas, kým daný používateľ schváli vašu žiadosť o sledovanie."
-  step6_1: "Teraz by ste mali vidieť poznámky ďalších používateľov na svojej časovej osi."
-  step6_2: "Môžete dať \"reakcie\" na poznámky ďalších ľudí ako rýchlu odpoveď."
-  step6_3: "Reakciu pridáte kliknutím na \"+\" niekoho poznámke a vybratím emoji, ktorou chcete reagovať."
-  step7_1: "Gralujeme! Dokončili ste základného sprievodcu Misskey."
-  step7_2: "Ak sa chcete naučiť viac o Misskey, skúste sekciu {help}."
-  step7_3: "A teraz, veľa šťastia, bavte sa s Misskey! 🚀"
+  title: "How to use Calckey"
+  step1_1: "Welcome!"
+  step1_2: "Let's get you set up. You'll be up and running in no time!"
+  step2_1: "First, please fill out your profile."
+  step2_2: "Providing some information about who you are will make it easier for others to tell if they want to see your notes or follow you."
+  step3_1: "Now time to follow some people!"
+  step3_2: "Your home and social timelines are based off of who you follow, so try following a couple accounts to get started.\nClick the plus circle on the top right of a profile to follow them."
+  step4_1: "Let's get you out there."
+  step4_2: "For your first post, some people like to made a {introduction} post or a simple \"Hello world!\""
+  step5_1: "Timelines, timelines everywhere!"
+  step5_2: "Your instance has {timelines} different timelines enabled."
+  step5_3: "The Home {icon} timeline is where you can see posts from your followers."
+  step5_4: "The Local {icon} timeline is where you can see posts from everyone else on this instance."
+  step5_5: "The Recommended {icon} timeline is where you can see posts from instances the admins recommend."
+  step5_6: "The Social {icon} timeline is where you can see posts from friends of your followers."
+  step5_7: "The Global {icon} timeline is where you can see posts from every other connected instance."
+  step6_1: "So, what is this place?"
+  step6_2: "Well, you didn't just join Calckey. You joined a portal to the Fediverse, an interconnected network of thousands of servers, called \"instances\"."
+  step6_3: "Each server works in different ways, and not all servers run Calckey. This one does though! It's a bit complicated, but you'll get the hang of it in no time."
+  step6_4: "Now go, explore, and have fun!"
 _2fa:
   alreadyRegistered: "Už ste zaregistrovali 2-faktorové autentifikačné zariadenie."
   registerDevice: "Registrovať nové zariadenie"
diff --git a/locales/uk-UA.yml b/locales/uk-UA.yml
index 96f94ee2f..63a919460 100644
--- a/locales/uk-UA.yml
+++ b/locales/uk-UA.yml
@@ -940,28 +940,26 @@ _time:
   hour: "г"
   day: "д"
 _tutorial:
-  title: "Як користуватись Misskey"
+  title: "Як використовувати Calckey"
   step1_1: "Ласкаво просимо!"
-  step1_2: "Ця сторінка має назву \"стрічка подій\". На ній з'являються записи користувачів на яких ви підписані."
-  step1_3: "Наразі ваша стрічка порожня, оскільки ви ще не написали жодної нотатки і не підписані на інших."
-  step2_1: "Перш ніж зробити запис або підписатись на когось, спочатку заповніть свій обліковий запис."
-  step2_2: "Надання деякої інформації про себе дозволить іншим користувачам підписатись на вас."
-  step3_1: "Ви успішно налаштували свій обліковий запис?"
-  step3_2: "Наступним кроком є написання нотатки. Це можна зробити, натиснувши зображення олівця на екрані."
-  step3_3: "Після написання вмісту ви можете опублікувати його, натиснувши кнопку у верхньому правому куті форми."
-  step3_4: "Не знаєте що написати? Спробуйте \"налаштовую свій msky\"!"
-  step4_1: "Ви розмістили свій перший запис?"
-  step4_2: "Ура! Ваш перший запис відображається на вашій стрічці подій."
-  step5_1: "Настав час оживити вашу стрічку подій підписавшись на інших користувачів."
-  step5_2: "{featured} показує популярні записи , а {explore} популярних користувачів з цього інстансу. Спробуйте підписатись на користувача, який вам сподобався!"
-  step5_3: "Щоб підписатись на інших користувачів, нажміть на їхнє зображення, а потім на кнопку \"підписатись\"."
-  step5_4: "Якщо користувач має замок при імені, то йому потрібно буде вручну підтвердити вашу заявку на підписку."
-  step6_1: "Тепер ви повинні бачити записи інших користувачів на вашій стрічці подій."
-  step6_2: "Також ви можете швидко відповісти, або  \"відреагувати\" на записи інших користувачів."
-  step6_3: "Щоб \"відреагувати\", нажміть на знак плюс \"+\" на записі і виберіть емоджі яким ви хочете \"відреагувати\"."
-  step7_1: "Вітаю! Ви пройшли ознайомлення з Misskey."
-  step7_2: "Якщо ви хочете більше дізнатись про Misskey, зайдіть в розділ {help}."
-  step7_3: "Насолоджуйтесь Misskey! 🚀"
+  step1_2: "Давайте налаштуємо вас. Ви будете працювати в найкоротші терміни!"
+  step2_1: "Спочатку, будь ласка, заповніть свій профіль"
+  step2_2: "Надавши деяку інформацію про себе, іншим людям буде легше зрозуміти, чи хочуть вони бачити ваші записи або стежити за вами."
+  step3_1: "Тепер настав час стежити за деякими людьми!"
+  step3_2: "Ваша домашня і соціальна стрічки ґрунтуються на тому, за ким ви стежите, тому для початку спробуйте стежити за кількома акаунтами.\nНатисніть на гурток із плюсом у правому верхньому кутку профілю, щоб стежити за ним."
+  step4_1: "Давайте вийдемо на вас"
+  step4_2: "Для свого першого повідомлення деякі люди люблять робити {introduction} повідомлення або просте \"Hello world!\""
+  step5_1: "Тимчасові рамки, скрізь тимчасові рамки!"
+  step5_2: "У вашому екземплярі включені {timelines} різних часових ліній."
+  step5_3: "Головна {icon} часова шкала - це шкала, де ви можете бачити повідомлення ваших підписників."
+  step5_4: "Місцева {icon} тимчасова шкала - це шкала, де ви можете бачити повідомлення всіх інших користувачів даного екземпляра"
+  step5_5: "Тимчасова шкала Рекомендовані {icon} - це шкала, де ви можете бачити повідомлення від інстанцій, рекомендованих адміністраторами."
+  step5_6: "На часовій шкалі Social {icon} відображаються повідомлення від друзів ваших підписників"
+  step5_7: "Глобальна {icon} часова шкала - це місце, де ви можете бачити повідомлення від усіх інших підключених екземплярів"
+  step6_1: "Отже, що це за місце?"
+  step6_2: "Ну, ви не просто приєдналися до Кальки. Ви приєдналися до порталу в Fediverse, взаємопов'язаної мережі з тисяч серверів, званих \"інстансами\"."
+  step6_3: "Кожен сервер працює по-своєму, і не на всіх серверах працює Calckey. Але цей працює! Це трохи складно, але ви швидко розберетеся"
+  step6_4: "Тепер ідіть, вивчайте і розважайтеся!"
 _2fa:
   registerKey: "Зареєструвати новий ключ безпеки"
 _permissions:
diff --git a/locales/vi-VN.yml b/locales/vi-VN.yml
index 23e730950..c54aca17e 100644
--- a/locales/vi-VN.yml
+++ b/locales/vi-VN.yml
@@ -1181,28 +1181,26 @@ _time:
   hour: "giờ"
   day: "ngày"
 _tutorial:
-  title: "Cách dùng Misskey"
-  step1_1: "Xin chào!"
-  step1_2: "Trang này gọi là \"bảng tin\". Nó hiện \"tút\" từ những người mà bạn \"theo dõi\" theo thứ tự thời gian."
-  step1_3: "Bảng tin của bạn đang trống, bởi vì bạn chưa đăng tút nào hoặc chưa theo dõi ai."
-  step2_1: "Hãy hoàn thành việc thiết lập hồ sơ của bạn trước khi viết tút hoặc theo dõi bất kỳ ai."
-  step2_2: "Cung cấp một số thông tin giới thiệu bạn là ai sẽ giúp người khác dễ dàng biết được họ muốn đọc tút hay theo dõi bạn."
-  step3_1: "Hoàn thành thiết lập hồ sơ của bạn?"
-  step3_2: "Sau đó, hãy thử đăng một tút tiếp theo. Bạn có thể làm như vậy bằng cách nhấn vào nút có biểu tượng bút chì trên màn hình."
-  step3_3: "Nhập nội dung vào khung soạn thảo và nhấn nút đăng ở góc trên."
-  step3_4: "Chưa biết nói gì? Thử \"Tôi mới tham gia Misskey\"!"
-  step4_1: "Đăng xong tút đầu tiên của bạn?"
-  step4_2: "De! Tút đầu tiên của bạn đã hiện trên bảng tin."
-  step5_1: "Bây giờ, hãy thử làm cho bảng tin của bạn sinh động hơn bằng cách theo dõi những người khác."
-  step5_2: "{feature} sẽ hiển thị cho bạn các tút nổi bật trên máy chủ này. {explore} sẽ cho phép bạn tìm thấy những người dùng thú vị. Hãy thử tìm những người bạn muốn theo dõi ở đó!"
-  step5_3: "Để theo dõi những người dùng khác, hãy nhấn vào ảnh đại diện của họ và nhấn nút \"Theo dõi\" trên hồ sơ của họ."
-  step5_4: "Nếu người dùng khác có biểu tượng ổ khóa bên cạnh tên của họ, có thể mất một khoảng thời gian để người dùng đó phê duyệt yêu cầu theo dõi của bạn theo cách thủ công."
-  step6_1: "Bạn sẽ có thể xem tút của những người dùng khác trên bảng tin của mình ngay bây giờ."
-  step6_2: "Bạn cũng có thể đặt \"biểu cảm\" trên tút của người khác để phản hồi nhanh chúng."
-  step6_3: "Để đính kèm \"biểu cảm\", hãy nhấn vào dấu \"+\" trên tút của người dùng khác rồi chọn biểu tượng cảm xúc mà bạn muốn dùng."
-  step7_1: "Xin chúc mừng! Bây giờ bạn đã hoàn thành phần hướng dẫn cơ bản của Misskey."
-  step7_2: "Nếu bạn muốn tìm hiểu thêm về Misskey, hãy thử phần {help}."
-  step7_3: "Bây giờ, chúc may mắn và vui vẻ với Misskey! 🚀"
+  title: "How to use Calckey"
+  step1_1: "Welcome!"
+  step1_2: "Let's get you set up. You'll be up and running in no time!"
+  step2_1: "First, please fill out your profile."
+  step2_2: "Providing some information about who you are will make it easier for others to tell if they want to see your notes or follow you."
+  step3_1: "Now time to follow some people!"
+  step3_2: "Your home and social timelines are based off of who you follow, so try following a couple accounts to get started.\nClick the plus circle on the top right of a profile to follow them."
+  step4_1: "Let's get you out there."
+  step4_2: "For your first post, some people like to made a {introduction} post or a simple \"Hello world!\""
+  step5_1: "Timelines, timelines everywhere!"
+  step5_2: "Your instance has {timelines} different timelines enabled."
+  step5_3: "The Home {icon} timeline is where you can see posts from your followers."
+  step5_4: "The Local {icon} timeline is where you can see posts from everyone else on this instance."
+  step5_5: "The Recommended {icon} timeline is where you can see posts from instances the admins recommend."
+  step5_6: "The Social {icon} timeline is where you can see posts from friends of your followers."
+  step5_7: "The Global {icon} timeline is where you can see posts from every other connected instance."
+  step6_1: "So, what is this place?"
+  step6_2: "Well, you didn't just join Calckey. You joined a portal to the Fediverse, an interconnected network of thousands of servers, called \"instances\"."
+  step6_3: "Each server works in different ways, and not all servers run Calckey. This one does though! It's a bit complicated, but you'll get the hang of it in no time."
+  step6_4: "Now go, explore, and have fun!"
 _2fa:
   alreadyRegistered: "Bạn đã đăng ký thiết bị xác minh 2 bước."
   registerDevice: "Đăng ký một thiết bị"
diff --git a/locales/zh-CN.yml b/locales/zh-CN.yml
index c7d6cfd94..f24e5ad85 100644
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@@ -1181,28 +1181,26 @@ _time:
   hour: "小时"
   day: "日"
 _tutorial:
-  title: "Misskey的使用方法"
+  title: "如何使用Calckey"
   step1_1: "欢迎！"
-  step1_2: "这个页面叫做「时间线」，它会按照时间顺序显示所有你「关注」的人所发的「帖子」。"
-  step1_3: "如果你并没有发布任何帖子，也没有关注其他的人，你的时间线页面应当什么都没有显示。"
-  step2_1: "在您想要发帖或关注其他人之前，请先设置一下个人资料吧。"
-  step2_2: "如果别人能够更加的了解你，关注你的概率也会得到提升。"
-  step3_1: "已经设置完个人资料了吗？"
-  step3_2: "那么接下来，试着写一些什么东西来发布吧。你可以通过点击屏幕上的铅笔图标来打开投稿页面。"
-  step3_3: "写完内容后，点击窗口右上方的按钮就可以投稿。"
-  step3_4: "不知道说些什么好吗？那就写下「Misskey我来啦！」这样的话吧。"
-  step4_1: "将你的话语发布出去了吗？"
-  step4_2: "太棒了！现在你可以在你的时间线中看到你刚刚发布的帖子了。"
-  step5_1: "接下来，关注其他人来使时间线更生动吧。"
-  step5_2: "{featured}将向您展示热门趋势的帖子。 {explore}将让您找到热门用户。 尝试关注您喜欢的人！"
-  step5_3: "要关注其他用户，请单击他的头像，然后在他的个人资料上按下“关注”按钮。"
-  step5_4: "如果用户的名称旁边有锁定图标，则该用户需要手动批准您的关注请求。"
-  step6_1: "现在，您将可以在时间线上看到其他用户的帖子。"
-  step6_2: "您还可以在其他人的帖子上进行「回应」，以快速做出简单回复。"
-  step6_3: "在他人的贴子上按下「+」图标，即可选择想要的表情来进行「回应」。"
-  step7_1: "对Misskey基本操作的简单介绍，就到此结束了。 辛苦了！"
-  step7_2: "如果你想了解更多有关Misskey的信息，请参见{help}。"
-  step7_3: "接下来，享受Misskey带来的乐趣吧🚀"
+  step1_2: "让我们把你安排好。你很快就会启动并运行！"
+  step2_1: "首先，请完成您的个人资料。"
+  step2_2: "通过提供一些关于你自己的信息，其他人会更容易了解他们是否想看到你的帖子或关注你。"
+  step3_1: "现在是时候跟随一些人了！"
+  step3_2: "你的主页和社交馈送是基于你所关注的人，所以试着先关注几个账户。{n点击个人资料右上角的加号圈就可以关注它。"
+  step4_1: "让我们出去找你。"
+  step4_2: "对于他们的第一条信息，有些人喜欢做{introduction}或一个简单的 \"hello world!\""
+  step5_1: "时间限制，到处是时间限制！"
+  step5_2: "您的实例已启用各种时间线的{timelines}。"
+  step5_3: "主{icon}时间线是你可以看到你的订阅者的帖子的时间线。"
+  step5_4: "本地{icon}时间线是你可以看到实例中所有其他用户的信息的时间线。"
+  step5_5: "推荐的{icon}时间线 - 是时间轴，你可以看到管理员推荐的实例的信息"
+  step5_6: "社交{icon}时间线显示来自你的订阅者朋友的信息。"
+  step5_7: "全球{icon}时间线是你可以看到来自所有其他连接的实例的消息。"
+  step6_1: "那么，这里是什么地方？"
+  step6_2: "好吧，你不只是加入卡尔基。你已经加入了Fediverse的一个门户，这是一个由成千上万台服务器组成的互联网络，被称为 \"实例\""
+  step6_3: "每个服务器的工作方式不同，并不是所有的服务器都运行Calckey。但这个人确实如此! 这有点复杂，但你很快就会明白的。"
+  step6_4: "现在去学习并享受乐趣！"
 _2fa:
   alreadyRegistered: "此设备已被注册"
   registerDevice: "注册设备"
diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml
index ef3b45471..93aa045e7 100644
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@@ -1181,28 +1181,26 @@ _time:
   hour: "小時"
   day: "日"
 _tutorial:
-  title: "Misskey使用方法"
-  step1_1: "歡迎！"
-  step1_2: "此為「時間軸」頁面，它會按照時間順序顯示你「追隨」的人發出的「貼文」"
-  step1_3: "由於你沒有發佈任何貼文，也沒有追隨任何人，所以你的時間軸目前是空的。"
-  step2_1: "在發文或追隨其他人之前先讓我們設定一下個人資料吧。"
-  step2_2: "提供一些關於自己的資訊來讓其他人更有追隨你的意願。"
-  step3_1: "個人資料都設定好了嗎？"
-  step3_2: "接下來，讓我們來試試看發個文，按一下畫面上的鉛筆圖示來開始"
-  step3_3: "輸入完內容後，按視窗右上角的按鈕來發文"
-  step3_4: "不知道該寫什麼內容嗎？試試看「開始使用Misskey了」如何。"
-  step4_1: "貼文發出去了嗎？"
-  step4_2: "如果你的貼文出現在時間軸上，就代表發文成功。"
-  step5_1: "現在試試看追隨其他人來讓你的時間軸變得更生動吧。"
-  step5_2: "你會在{featured}上看到受歡迎的貼文，你也可以從列表中追隨你喜歡的人，或者在{explore}上找到熱門使用者。"
-  step5_3: "想要追隨其他人，只要點擊他們的大頭貼並按「追隨」即可。"
-  step5_4: "如果使用者的名字旁有鎖頭的圖示，代表他們需要手動核准你的追隨請求。"
-  step6_1: "現在你可以在時間軸上看到其他用戶的貼文。"
-  step6_2: "你也可以對別人的貼文作出「情感」，作出簡單的回覆。"
-  step6_3: "在他人的貼文按下\"+\"圖標，即可選擇喜好的表情符號進行回應。"
-  step7_1: "以上為Misskey的基本操作說明，教學在此告一段落。辛苦了。"
-  step7_2: "歡迎到{help}來瞭解更多Misskey相關介紹。"
-  step7_3: "那麼，祝您在Misskey玩的開心~ 🚀"
+  title: "如何使用Calckey"
+  step1_1: "欢迎！"
+  step1_2: "让我们把你安排好。你很快就会启动并运行！"
+  step2_1: "首先，请完成您的个人资料。"
+  step2_2: "通过提供一些关于你自己的信息，其他人会更容易了解他们是否想看到你的帖子或关注你。"
+  step3_1: "现在是时候跟随一些人了！"
+  step3_2: "你的主页和社交馈送是基于你所关注的人，所以试着先关注几个账户。{n点击个人资料右上角的加号圈就可以关注它。"
+  step4_1: "让我们出去找你。"
+  step4_2: "对于他们的第一条信息，有些人喜欢做{introduction}或一个简单的 \"hello world!\""
+  step5_1: "时间限制，到处是时间限制！"
+  step5_2: "您的实例已启用各种时间线的{timelines}。"
+  step5_3: "主{icon}时间线是你可以看到你的订阅者的帖子的时间线。"
+  step5_4: "本地{icon}时间线是你可以看到实例中所有其他用户的信息的时间线。"
+  step5_5: "推荐的{icon}时间线 - 是时间轴，你可以看到管理员推荐的实例的信息"
+  step5_6: "社交{icon}时间线显示来自你的订阅者朋友的信息。"
+  step5_7: "全球{icon}时间线是你可以看到来自所有其他连接的实例的消息。"
+  step6_1: "那么，这里是什么地方？"
+  step6_2: "好吧，你不只是加入卡尔基。你已经加入了Fediverse的一个门户，这是一个由成千上万台服务器组成的互联网络，被称为 \"实例\""
+  step6_3: "每个服务器的工作方式不同，并不是所有的服务器都运行Calckey。但这个人确实如此! 这有点复杂，但你很快就会明白的。"
+  step6_4: "现在去学习并享受乐趣！"
 _2fa:
   alreadyRegistered: "此設備已經被註冊過了"
   registerDevice: "註冊裝置"

From 10cb1caac8e72f96c16b057e01abad0f5673f117 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sat, 12 Nov 2022 13:16:56 -0800
Subject: [PATCH 12/49] typing locale

---
 locales/ar-SA.yml | 2 +-
 locales/en-US.yml | 2 +-
 locales/id-ID.yml | 2 +-
 locales/ko-KR.yml | 2 +-
 locales/pl-PL.yml | 2 +-
 locales/sk-SK.yml | 2 +-
 locales/th-TH.yml | 2 +-
 locales/vi-VN.yml | 2 +-
 locales/zh-TW.yml | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/locales/ar-SA.yml b/locales/ar-SA.yml
index 6bc450fa3..da4361ef7 100644
--- a/locales/ar-SA.yml
+++ b/locales/ar-SA.yml
@@ -694,7 +694,7 @@ receiveAnnouncementFromInstance: "استلم إشعارات من هذا المث
 emailNotification: "إشعارات البريد الكتروني"
 inChannelSearch: "ابحث عن قناة"
 useReactionPickerForContextMenu: "افتح منتقي التفاعلات عند النقر بالزر الأيمن"
-typingUsers: "{users} يكتب(ون)..."
+typingUsers: "{users} يكتب(ون)"
 jumpToSpecifiedDate: "انتقل إلى تاريخ محدد"
 showingPastTimeline: "أنت تستعرض حاليًا خيطًا زمنيًا قديمًا"
 clear: "عودة"
diff --git a/locales/en-US.yml b/locales/en-US.yml
index 2fea9cc9d..f4d5c2bda 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -732,7 +732,7 @@ emailNotification: "Email notifications"
 publish: "Publish"
 inChannelSearch: "Search in channel"
 useReactionPickerForContextMenu: "Open reaction picker on right-click"
-typingUsers: "{users} is/are typing..."
+typingUsers: "{users} is typing"
 jumpToSpecifiedDate: "Jump to specific date"
 showingPastTimeline: "Currently displaying an old timeline"
 clear: "Return"
diff --git a/locales/id-ID.yml b/locales/id-ID.yml
index 1971aa0dc..483701744 100644
--- a/locales/id-ID.yml
+++ b/locales/id-ID.yml
@@ -727,7 +727,7 @@ emailNotification: "Pemberitahuan surel"
 publish: "Terbitkan"
 inChannelSearch: "Cari di kanal"
 useReactionPickerForContextMenu: "Buka pemilih reaksi dengan klik-kanan"
-typingUsers: "{users} sedang mengetik..."
+typingUsers: "{users} sedang mengetik"
 jumpToSpecifiedDate: "Loncat ke tanggal spesifik"
 showingPastTimeline: "Sedang menampilkan linimasa lama"
 clear: "Bersihkan"
diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
index cbdae7a33..f1fa1ca23 100644
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -730,7 +730,7 @@ emailNotification: "메일 알림"
 publish: "게시"
 inChannelSearch: "채널에서 검색"
 useReactionPickerForContextMenu: "우클릭하여 리액션 선택기 열기"
-typingUsers: "{users} 님이 입력하고 있어요.."
+typingUsers: "{users} 님이 입력하고 있어요"
 jumpToSpecifiedDate: "특정 날짜로 이동"
 showingPastTimeline: "과거의 타임라인을 표시하고 있어요"
 clear: "지우기"
diff --git a/locales/pl-PL.yml b/locales/pl-PL.yml
index 5d2a77d9f..52bca644f 100644
--- a/locales/pl-PL.yml
+++ b/locales/pl-PL.yml
@@ -716,7 +716,7 @@ emailNotification: "Powiadomienia e-mail"
 publish: "Publikuj"
 inChannelSearch: "Szukaj na kanale"
 useReactionPickerForContextMenu: "Otwórz wybornik reakcji prawym kliknięciem"
-typingUsers: "{users} pisze(-ą)..."
+typingUsers: "{users} pisze"
 jumpToSpecifiedDate: "Przejdź do określonej daty"
 showingPastTimeline: "Obecnie wyświetla starą oś czasu"
 clear: "Wróć"
diff --git a/locales/sk-SK.yml b/locales/sk-SK.yml
index 77b690459..0145c515b 100644
--- a/locales/sk-SK.yml
+++ b/locales/sk-SK.yml
@@ -729,7 +729,7 @@ emailNotification: "Emailové upozornenia"
 publish: "Zverejniť"
 inChannelSearch: "Hľadať v kanáli"
 useReactionPickerForContextMenu: "Otvoriť výber reakcií na pravý klik"
-typingUsers: "{users} píše/u"
+typingUsers: "{users} píše"
 jumpToSpecifiedDate: "Skočiť na konkrétny dátum"
 showingPastTimeline: "Práve vidíte starú časovú os"
 clear: "Vrátiť"
diff --git a/locales/th-TH.yml b/locales/th-TH.yml
index b2fd25dc4..7d78b1ef7 100644
--- a/locales/th-TH.yml
+++ b/locales/th-TH.yml
@@ -730,7 +730,7 @@ emailNotification: "การแจ้งเตือนทางอีเมล
 publish: "เผยแพร่"
 inChannelSearch: "ค้นหาในช่อง"
 useReactionPickerForContextMenu: "เปิดตัวเลือกปฏิกิริยาเมื่อคลิกขวา"
-typingUsers: "{users} กำลัง/กำลังพิมพ์..."
+typingUsers: "{users} กำลัง"
 jumpToSpecifiedDate: "ข้ามไปยังวันที่เฉพาะเจาะจง"
 showingPastTimeline: "กำลังแสดงผลไทม์ไลน์เก่า"
 clear: "ล้าง"
diff --git a/locales/vi-VN.yml b/locales/vi-VN.yml
index c54aca17e..bc4c178ae 100644
--- a/locales/vi-VN.yml
+++ b/locales/vi-VN.yml
@@ -730,7 +730,7 @@ emailNotification: "Thông báo email"
 publish: "Đăng"
 inChannelSearch: "Tìm trong kênh"
 useReactionPickerForContextMenu: "Nhấn chuột phải để mở bộ chọn biểu cảm"
-typingUsers: "{users} đang nhập…"
+typingUsers: "{users} đang nhập"
 jumpToSpecifiedDate: "Đến một ngày cụ thể"
 showingPastTimeline: "Hiện đang hiển thị dòng thời gian cũ"
 clear: "Hoàn lại"
diff --git a/locales/zh-TW.yml b/locales/zh-TW.yml
index 93aa045e7..6ecc9f087 100644
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@@ -730,7 +730,7 @@ emailNotification: "郵件通知"
 publish: "發佈"
 inChannelSearch: "頻道内搜尋"
 useReactionPickerForContextMenu: "點擊右鍵開啟反應工具欄"
-typingUsers: "{users}輸入中..."
+typingUsers: "{users}輸入中"
 jumpToSpecifiedDate: "跳轉到特定日期"
 showingPastTimeline: "顯示過往的時間線"
 clear: "清除"

From d5fbd8ca0c3c11893668b41456d13203cc95a09f Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sat, 12 Nov 2022 13:27:07 -0800
Subject: [PATCH 13/49] fix pages index

---
 package.json                                  | 2 +-
 packages/client/src/pages/messaging/index.vue | 2 ++
 packages/client/src/pages/pages.vue           | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index fe53a2c21..d3a4aae3d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.12.8",
+	"version": "12.119.0-calc.12.9",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index 965ebb0b6..8de089a15 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -169,6 +169,8 @@ function syncSlide(index) {
 }
 
 onMounted(() => {
+	syncSlide(tabs.indexOf(swiperRef.activeIndex));
+
 	connection = markRaw(stream.useChannel('messagingIndex'));
 
 	connection.on('message', onMessage);
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 248b00bbc..13e8c3651 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -39,7 +39,7 @@
 
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
-import Virtual from 'swiper';
+import { Virtual } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import MkPagePreview from '@/components/MkPagePreview.vue';
 import MkPagination from '@/components/MkPagination.vue';

From 1d0fcee862148ab80bbf893300f351b394bcede5 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sat, 12 Nov 2022 13:38:28 -0800
Subject: [PATCH 14/49] fix pages swiping

---
 package.json                          | 2 +-
 packages/client/src/pages/explore.vue | 6 +++++-
 packages/client/src/pages/pages.vue   | 9 ++++++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index d3a4aae3d..8f054541f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.12.9",
+	"version": "12.119.0-calc.12.10",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index cbf4987e9..0be45a442 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { computed, watch, onMounted } from 'vue';
 import { Virtual } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import XFeatured from './explore.featured.vue';
@@ -118,4 +118,8 @@ function syncSlide(index) {
 	swiperRef.slideTo(index);
 }
 
+onMounted(() => {
+	syncSlide(tabs.indexOf(swiperRef.activeIndex));
+});
+
 </script>
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 13e8c3651..1e56b25a0 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject } from 'vue';
+import { computed, watch, onMounted } from 'vue';
 import { Virtual } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import MkPagePreview from '@/components/MkPagePreview.vue';
@@ -56,6 +56,7 @@ const router = useRouter();
 
 let tab = $ref('featured');
 const tabs = ['featured', 'my', 'liked'];
+watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
 
 const featuredPagesPagination = {
 	endpoint: 'pages/featured' as const,
@@ -101,6 +102,8 @@ definePageMetadata(computed(() => ({
 
 let swiperRef = null;
 
+let swiperRef = null;
+
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
 	syncSlide(tabs.indexOf(tab));
@@ -113,6 +116,10 @@ function onSlideChange() {
 function syncSlide(index) {
 	swiperRef.slideTo(index);
 }
+
+onMounted(() => {
+	syncSlide(tabs.indexOf(swiperRef.activeIndex));
+});
 </script>
 
 <style lang="scss" scoped>

From 9ff9bb0a448a25d835c5d8d0bb5e6fd82f4a6d9c Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sat, 12 Nov 2022 13:46:13 -0800
Subject: [PATCH 15/49] replay tutorial from help menu

---
 packages/client/src/ui/_common_/navbar.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 333253709..494c62781 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -57,6 +57,7 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, watch } from 'vue';
+import XTutorial from '@/components/MkTutorialDialog.vue';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
@@ -139,6 +140,14 @@ function openInstanceMenu(ev: MouseEvent) {
 			to: '/mfm-cheat-sheet',
 			text: i18n.ts._mfm.cheatSheet,
 			icon: 'ph-code-bold ph-lg',
+		}, {
+			type: 'button',
+			action: async () => {
+				defaultStore.set('tutorial', 0);
+				os.popup(XTutorial, {}, {}, 'closed');
+			},
+			text: i18n.ts.tutorial,
+			icon: 'ph-circle-wavy-question-bold ph-lg',
 		}, {
 			type: 'link',
 			to: '/scratchpad',

From 3cd3ea8cbd503bad7132735ee9e6a2287043d3bf Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 10:53:06 -0800
Subject: [PATCH 16/49] critical fix

---
 package.json                        | 2 +-
 packages/client/src/pages/pages.vue | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 8f054541f..9d34f44a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.12.10",
+	"version": "12.119.0-calc.12.11",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 1e56b25a0..8d4cb3f02 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -102,8 +102,6 @@ definePageMetadata(computed(() => ({
 
 let swiperRef = null;
 
-let swiperRef = null;
-
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
 	syncSlide(tabs.indexOf(tab));

From 456d0df31b7a7e4db0c634f68a377a25911de424 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 10:58:30 -0800
Subject: [PATCH 17/49] styling

---
 packages/client/src/components/MkMediaBanner.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index 5d299148e..feadae35e 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -75,6 +75,8 @@ onMounted(() => {
 	margin-top: 4px;
 	overflow: hidden;
 	--plyr-color-main: var(--accent);
+	--plyr-audio-controls-background: var(--panelHighlight);
+	--plyr-audio-controls-background-hover: var(--accentedBg);
 
 	> .download,
 	> .sensitive {

From decd9114c5fb17b1ced5181bae09196fbadfc3b4 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 11:03:12 -0800
Subject: [PATCH 18/49] correct controls color

---
 package.json                                     | 2 +-
 packages/client/src/components/MkMediaBanner.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9d34f44a7..46b21ee92 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.12.11",
+	"version": "12.119.0-calc.12.12",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index feadae35e..7b11c4e36 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -77,6 +77,7 @@ onMounted(() => {
 	--plyr-color-main: var(--accent);
 	--plyr-audio-controls-background: var(--panelHighlight);
 	--plyr-audio-controls-background-hover: var(--accentedBg);
+	--plyr-audio-control-color: var(--navFg);
 
 	> .download,
 	> .sensitive {

From 9fd89dcc4ccc0b338eab05720b55aa9a1c915a55 Mon Sep 17 00:00:00 2001
From: Kainoa Kanter <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 20:32:17 +0100
Subject: [PATCH 19/49] Update 'README.md'

---
 README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 5b70c3187..1fc75e3f8 100644
--- a/README.md
+++ b/README.md
@@ -74,12 +74,18 @@ corepack enable
 - To add custom CSS for all users, edit `./custom/instance.css`.
 - To add static assets (such as images for the splash screen), place them in the `./custom/` directory. They'll then be avaliable on `https://yourinstance.tld/static-assets/filename.ext`.
 
+## 🧑‍🔬 Configuring a new instance
+
+- Run `cp .config/example.yml .config/default.yml`
+- Edit `.config/default.yml`, making sure to fill out required fields.
+- Also copy and edit `.config/docker_example.env` to `.config/docker.env` if you're using Docker.
+
 ## 🚚 Migrating from Misskey to Calckey
 
 > ⚠️ Because of their changes, migrating from Foundkey is not supported.
 
 ```sh
-cp ../misskey/.config/default.yml ./.config/default.yml # replace `../misskey/` with misskey path, replace `default.yml` with `docker.yml` if you use docker
+cp ../misskey/.config/default.yml ./.config/default.yml # replace `../misskey/` with misskey path, add `docker.env` if you use Docker
 cp -r ../misskey/files . # if you don't use object storage
 ```
 

From 06dff476dc156698083cf776a42b855a8df6f4f3 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 12:06:39 -0800
Subject: [PATCH 20/49] replayTutorial

---
 locales/en-US.yml                          | 1 +
 locales/ja-JP.yml                          | 1 +
 packages/client/src/ui/_common_/navbar.vue | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index f4d5c2bda..f5758ed64 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -919,6 +919,7 @@ updateAvailable: "There might be an update available!"
 swipeOnDesktop: "Allow mobile-style swiping on desktop"
 logoImageUrl: "Logo image URL"
 showAdminUpdates: "Indicate a new Calckey version is avaliable (admin only)"
+replayTutorial: "Replay tutorial"
 
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing NSFW media via Machine Learning. This will slightly increase the load on the server."
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index e1c31c1b2..b045f5448 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -919,6 +919,7 @@ updateAvailable: "アップデートがありますよ"
 swipeOnDesktop: "デスクトップでモバイルスタイルのスワイプを可能にする"
 logoImageUrl: "ロゴのURL"
 showAdminUpdates: "新しいCalckeyのバージョンが利用可能であることを示す(管理者のみ)"
+replayTutorial: "リプレイチュートリアル"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 494c62781..33e818a2f 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -146,7 +146,7 @@ function openInstanceMenu(ev: MouseEvent) {
 				defaultStore.set('tutorial', 0);
 				os.popup(XTutorial, {}, {}, 'closed');
 			},
-			text: i18n.ts.tutorial,
+			text: i18n.ts.replayTutorial,
 			icon: 'ph-circle-wavy-question-bold ph-lg',
 		}, {
 			type: 'link',

From 4f3bc5a226f2751616d5abe5419956cf069cc59d Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 12:14:55 -0800
Subject: [PATCH 21/49] fix?

---
 package.json                                | 2 +-
 packages/client/src/pages/explore.users.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 46b21ee92..8c4a8105b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.12.12",
+	"version": "12.119.0-calc.12.13",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 0536b2f41..019cbd1c2 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -6,7 +6,7 @@
 	</MkTab>
 	<div v-if="origin === 'local'">
 		<template v-if="tag == null">
-			<MkFolder v-show="thereArePinnedUsers" class="_gap" persist-key="explore-pinned-users">
+			<MkFolder v-show="thereArePinnedUsers != null && thereArePinnedUsers" class="_gap" persist-key="explore-pinned-users">
 				<template #header><i class="ph-bookmark-simple-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
 				<XUserList :pagination="pinnedUsers"/>
 			</MkFolder>

From c70dc36e373693c0487199dde914398334bf9091 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 12:51:32 -0800
Subject: [PATCH 22/49] test

---
 package.json                                         |  2 +-
 .../src/pages/messaging/messaging-room.message.vue   | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 8c4a8105b..37893e1de 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.12.13",
+	"version": "12.119.0-calc.12.14",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index f0b67325b..0d8cd1731 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -8,12 +8,12 @@
 			</button>
 			<div v-if="!message.isDeleted" class="content">
 				<Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
-				<div v-if="message.file" class="file">
-					<XMediaList v-if="message.file.type.split('/')[0] == 'image' || message.file.type.split('/')[0] == 'video'" :media-list="[message.file]" max-width="400px" style="border-radius: 5px"/>
-					<a v-else :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
-						<p>{{ message.file.name }}</p>
-					</a>
-				</div>
+			</div>
+			<div v-if="message.file" class="file">
+				<XMediaList v-if="message.file.type.split('/')[0] == 'image' || message.file.type.split('/')[0] == 'video'" :media-list="[message.file]" max-width="400px" style="border-radius: 5px"/>
+				<a v-else :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
+					<p>{{ message.file.name }}</p>
+				</a>
 			</div>
 			<div v-else class="content">
 				<p class="is-deleted">{{ i18n.ts.deleted }}</p>

From 4491e0ba21ec624303b52730de052ad5f99679e4 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 13:00:57 -0800
Subject: [PATCH 23/49] fix chat message

---
 package.json                                                   | 2 +-
 packages/client/src/pages/messaging/messaging-room.message.vue | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 37893e1de..e1f1af8bb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.12.14",
+	"version": "12.119.0-calc.12.15",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 0d8cd1731..4295c0218 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -9,7 +9,8 @@
 			<div v-if="!message.isDeleted" class="content">
 				<Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
 			</div>
-			<div v-if="message.file" class="file">
+			<br/>
+			<div v-if="message.file" class="file" width="400px">
 				<XMediaList v-if="message.file.type.split('/')[0] == 'image' || message.file.type.split('/')[0] == 'video'" :media-list="[message.file]" max-width="400px" style="border-radius: 5px"/>
 				<a v-else :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
 					<p>{{ message.file.name }}</p>

From 7dba36c8aca3abc4c8a25b793ea7bcd3fa246fb1 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 13:04:00 -0800
Subject: [PATCH 24/49] more width fix

---
 package.json                                        |  2 +-
 .../src/pages/messaging/messaging-room.message.vue  | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index e1f1af8bb..81b9b7032 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.12.15",
+	"version": "12.119.0-calc.12.16",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 4295c0218..bd8df97e7 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -9,17 +9,16 @@
 			<div v-if="!message.isDeleted" class="content">
 				<Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
 			</div>
-			<br/>
-			<div v-if="message.file" class="file" width="400px">
-				<XMediaList v-if="message.file.type.split('/')[0] == 'image' || message.file.type.split('/')[0] == 'video'" :media-list="[message.file]" max-width="400px" style="border-radius: 5px"/>
-				<a v-else :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
-					<p>{{ message.file.name }}</p>
-				</a>
-			</div>
 			<div v-else class="content">
 				<p class="is-deleted">{{ i18n.ts.deleted }}</p>
 			</div>
 		</div>
+		<div v-if="message.file" class="file" width="400px">
+			<XMediaList v-if="message.file.type.split('/')[0] == 'image' || message.file.type.split('/')[0] == 'video'" width="400px" :media-list="[message.file]" max-width="400px" style="border-radius: 5px"/>
+			<a v-else :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
+				<p>{{ message.file.name }}</p>
+			</a>
+		</div>
 		<div></div>
 		<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
 		<footer>

From 3dd84a15d8261672f1f23f52fc0e9cc57ee298c2 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 13:14:34 -0800
Subject: [PATCH 25/49] chore: :arrow_up: update deps

---
 packages/backend/package.json | 6 +++---
 packages/client/package.json  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/backend/package.json b/packages/backend/package.json
index 8fd7e1b23..190d57ff7 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -36,7 +36,7 @@
 		"archiver": "5.3.1",
 		"autobind-decorator": "2.4.0",
 		"autwh": "0.1.0",
-		"aws-sdk": "2.1251.0",
+		"aws-sdk": "2.1253.0",
 		"bcryptjs": "2.4.3",
 		"blurhash": "1.1.5",
 		"bull": "4.10.1",
@@ -80,7 +80,7 @@
 		"mocha": "10.1.0",
 		"multer": "1.4.4-lts.1",
 		"nested-property": "4.0.0",
-		"node-fetch": "3.2.10",
+		"node-fetch": "3.3.0",
 		"nodemailer": "6.8.0",
 		"nsfwjs": "2.4.2",
 		"oauth": "^0.9.15",
@@ -111,7 +111,7 @@
 		"stringz": "2.1.0",
 		"summaly": "2.7.0",
 		"syslog-pro": "1.0.0",
-		"systeminformation": "5.12.13",
+		"systeminformation": "5.12.14",
 		"tesseract.js": "^3.0.3",
 		"tinycolor2": "1.4.2",
 		"tmp": "0.2.1",
diff --git a/packages/client/package.json b/packages/client/package.json
index 1d65c2242..cd333c34d 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -13,7 +13,7 @@
 		"@rollup/pluginutils": "^4.2.1",
 		"@syuilo/aiscript": "0.11.1",
 		"@vitejs/plugin-vue": "3.2.0",
-		"@vue/compiler-sfc": "3.2.44",
+		"@vue/compiler-sfc": "3.2.45",
 		"autobind-decorator": "2.4.0",
 		"autosize": "5.0.1",
 		"blurhash": "1.1.5",
@@ -58,7 +58,7 @@
 		"uuid": "9.0.0",
 		"vanilla-tilt": "1.7.3",
 		"vite": "^3.2.3",
-		"vue": "3.2.44",
+		"vue": "3.2.45",
 		"vue-isyourpasswordsafe": "^2.0.0",
 		"vue-plyr": "^7.0.0",
 		"vue-prism-editor": "2.0.0-alpha.2",

From cbc3c1c83373a02d6c4408dd1ba55d9dd714a618 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 13:36:17 -0800
Subject: [PATCH 26/49] remove fontawesome far icons

---
 package.json                                     | 2 +-
 packages/client/src/components/MkEmojiPicker.vue | 2 +-
 packages/client/src/components/MkKeyValue.vue    | 2 +-
 packages/client/src/components/MkSignup.vue      | 4 ++--
 packages/client/src/pages/gallery/post.vue       | 2 +-
 packages/client/src/pages/page.vue               | 6 +++---
 packages/client/src/pages/settings/webhook.vue   | 4 ++--
 7 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 81b9b7032..5d47846c9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.12.16",
+	"version": "12.119.0-calc.12.17",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 0c1764e82..30a5cbc05 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -46,7 +46,7 @@
 			</section>
 
 			<section>
-				<header><i class="far fa-clock ph-fw ph-lg"></i> {{ i18n.ts.recentUsed }}</header>
+				<header><i class="ph-alarm-bold ph-fw ph-lg"></i> {{ i18n.ts.recentUsed }}</header>
 				<div class="body">
 					<button
 						v-for="emoji in recentlyUsedEmojis"
diff --git a/packages/client/src/components/MkKeyValue.vue b/packages/client/src/components/MkKeyValue.vue
index 586f7a3f9..9d392c3e9 100644
--- a/packages/client/src/components/MkKeyValue.vue
+++ b/packages/client/src/components/MkKeyValue.vue
@@ -5,7 +5,7 @@
 	</div>
 	<div class="value">
 		<slot name="value"></slot>
-		<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>
+		<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="ph-clipboard-text-bold"></i></button>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index 585ce38ad..39941a581 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -5,7 +5,7 @@
 		<template #prefix><i class="ph-key-bold ph-lg"></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>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.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="ph-question-bold"></i></div></template>
 		<template #prefix>@</template>
 		<template #suffix>@{{ host }}</template>
 		<template #caption>
@@ -19,7 +19,7 @@
 		</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>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.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="ph-question-bold"></i></div></template>
 		<template #prefix><i class="ph-envelope-simple-open-bold ph-lg"></i></template>
 		<template #caption>
 			<span v-if="emailState === 'wait'" style="color:#999"><i class="ph-circle-notch-bold ph-lg fa-pulse ph-fw ph-lg"></i> {{ i18n.ts.checking }}</span>
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index f1ffa854a..ccef47e29 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -19,7 +19,7 @@
 						<div class="actions">
 							<div class="like">
 								<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="ph-heart-bold ph-lg"></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>
+								<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="ph-heart-fill"></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="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="ph-pencil-bold ph-lg ph-fw ph-lg"></i></button>
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index d41e3d336..bd6a696a5 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -19,7 +19,7 @@
 					<div class="actions">
 						<div class="like">
 							<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" primary @click="unlike()"><i class="ph-heart-bold ph-lg"></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>
+							<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" @click="like()"><i class="ph-heart-fill"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
 						</div>
 						<div class="other">
 							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ph-repeat-bold ph-lg ph-fw ph-lg"></i></button>
@@ -44,8 +44,8 @@
 					</div>
 				</div>
 				<div class="footer">
-					<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> {{ i18n.ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
+					<div><i class="ph-alarm-bold"></i> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+					<div v-if="page.createdAt != page.updatedAt"><i class="ph-alarm-bold"></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">
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
index 7d462ce7b..e0ad346dd 100644
--- a/packages/client/src/pages/settings/webhook.vue
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -5,14 +5,14 @@
 			Create webhook
 		</FormLink>
 	</FormSection>
-	
+
 	<FormSection>
 		<MkPagination :pagination="pagination">
 			<template #default="{items}">
 				<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`" class="_formBlock">
 					<template #icon>
 						<i v-if="webhook.active === false" class="ph-pause-circle-bold ph-lg"></i>
-						<i v-else-if="webhook.latestStatus === null" class="far fa-circle"></i>
+						<i v-else-if="webhook.latestStatus === null" class="ph-circle-fill"></i>
 						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ph-check-bold ph-lg" :style="{ color: 'var(--success)' }"></i>
 						<i v-else class="ph-warning-bold ph-lg" :style="{ color: 'var(--error)' }"></i>
 					</template>

From 845aff45f9e223c7b042e91f5e706a134d533edd Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 13:37:56 -0800
Subject: [PATCH 27/49] fix pages margin

---
 packages/client/src/pages/page.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index bd6a696a5..8165b9067 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -195,7 +195,7 @@ definePageMetadata(computed(() => page ? {
 		}
 
 		> .content {
-			margin-top: 16px;
+			margin: 1rem;
 			padding: 16px 0 0 0;
 		}
 

From ae1b9f2ea733b74c45dac8933cdebc8133e6451b Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 13 Nov 2022 13:40:04 -0800
Subject: [PATCH 28/49] swap bold & fill for like

---
 packages/client/src/pages/gallery/post.vue | 4 ++--
 packages/client/src/pages/page.vue         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index ccef47e29..6aab3a00a 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -18,8 +18,8 @@
 						</div>
 						<div class="actions">
 							<div class="like">
-								<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="ph-heart-bold ph-lg"></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="ph-heart-fill"></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="ph-heart-fill ph-lg"></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="ph-heart-bold"></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="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="ph-pencil-bold ph-lg ph-fw ph-lg"></i></button>
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 8165b9067..b4b791876 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -18,8 +18,8 @@
 					</div>
 					<div class="actions">
 						<div class="like">
-							<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" primary @click="unlike()"><i class="ph-heart-bold ph-lg"></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="ph-heart-fill"></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="ph-heart-fill ph-lg"></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="ph-heart-bold"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
 						</div>
 						<div class="other">
 							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ph-repeat-bold ph-lg ph-fw ph-lg"></i></button>

From dc3b06af6d5dae004b94b205672c52756e55a3ce Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 15:55:55 -0800
Subject: [PATCH 29/49] singout from navbar

---
 package.json                             | 2 +-
 packages/client/src/account.ts           | 7 ++++++-
 packages/client/src/pages/user/index.vue | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5d47846c9..b42e7670c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.12.17",
+	"version": "12.119.0-calc.13-rc.1",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index 8cddd024f..eefcc9a10 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -221,7 +221,12 @@ export async function openAccountMenu(opts: {
 			icon: 'ph-users-bold ph-lg',
 			text: i18n.ts.manageAccounts,
 			to: '/settings/accounts',
-		}]], ev.currentTarget ?? ev.target, {
+		},{
+			type: 'button',
+			icon: 'ph-sign-out-bold ph-lg',
+			text: i18n.ts.logout,
+			action: () => { signout(); },
+		},]], ev.currentTarget ?? ev.target, {
 			align: 'left',
 		});
 	} else {
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 37b833fd8..205937537 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -144,6 +144,10 @@ function onSlideChange() {
 function syncSlide(index) {
 	swiperRef.slideTo(index);
 }
+
+onMounted(() => {
+	syncSlide(tabs.indexOf(swiperRef.activeIndex));
+});
 </script>
 
 <style lang="scss" scoped>

From 39f2a9fb129f35513c9f772bd3efad45a0fe0616 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 16:18:52 -0800
Subject: [PATCH 30/49] remove no history

---
 packages/client/src/pages/messaging/index.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index 8de089a15..dccd9715e 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -17,10 +17,6 @@
 						<MkPagination v-slot="{items}" :pagination="dmsPagination">
 							<MkChatPreview v-for="message in items" :key="message.id" class="yweeujhr message _block" :message="message"/>
 						</MkPagination>
-						<div v-if="messages.length == 0" class="_fullinfo">
-							<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-							<div>{{ i18n.ts.noHistory }}</div>
-						</div>
 					</div>
 				</swiper-slide>
 				<swiper-slide>

From 6dac040325ee8a6d52d6221a175419e7558343c2 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 16:24:04 -0800
Subject: [PATCH 31/49] plus action on top right for dms

---
 package.json                                  |  2 +-
 packages/client/src/pages/messaging/index.vue | 20 ++++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b42e7670c..ffa05a0a1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.1",
+	"version": "12.119.0-calc.13-rc.2",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index dccd9715e..fd0c02225 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -64,7 +64,12 @@ const tabs = ['dms', 'groups'];
 let tab = $ref(tabs[0]);
 watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ph-plus-bold ph-lg',
+	text: i18n.ts.addUser,
+	handler: startMenu,
+}]);
 
 const headerTabs = $computed(() => [{
 	key: 'dms',
@@ -122,6 +127,19 @@ function onRead(ids): void {
 	}
 }
 
+function startMenu(ev) {
+	os.popupMenu([{
+		text: i18n.ts.messagingWithUser,
+		icon: 'fas fa-user',
+		action: () => { startUser(); },
+	}, {
+		text: i18n.ts.messagingWithGroup,
+		icon: 'fas fa-users',
+		action: () => { startGroup(); },
+	}], ev.currentTarget ?? ev.target);
+}
+
+
 async function startUser(): void {
 	os.selectUser().then(user => {
 		router.push(`/my/messaging/${Acct.toString(user)}`);

From 5de412c3632818cf366a442a2201cf61adc67a4b Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 16:26:18 -0800
Subject: [PATCH 32/49] fix user profile

---
 packages/client/src/pages/user/index.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 205937537..9708e91aa 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -11,22 +11,29 @@
 			@slide-change="onSlideChange"
 		>
 			<swiper-slide>
-				<XHome :user="user"/>
+				<div class="home">
+					<XHome :user="user"/>
+				</div>
 			</swiper-slide>
 			<swiper-slide>
-				<XLikedPosts :user="user"/>
+				<div class="reactions">
+					<XReactions :user="user"/>
+				</div>
 			</swiper-slide>
 			<swiper-slide>
-				<XReactions :user="user"/>
+				<div class="clips">
+					<XClips :user="user"/>
+				</div>
 			</swiper-slide>
 			<swiper-slide>
-				<XClips :user="user"/>
+				<div class="pages">
+					<XPages :user="user"/>
+				</div>
 			</swiper-slide>
 			<swiper-slide>
-				<XPages :user="user"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XGallery :user="user"/>
+				<div class="gallery">
+					<XGallery :user="user"/>
+				</div>
 			</swiper-slide>
 		</swiper>
 	</div>

From 83f318a0dd2bb97a7a11e92375b286bbe4e0998a Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 16:35:59 -0800
Subject: [PATCH 33/49] .

---
 packages/client/src/pages/user/index.vue | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 9708e91aa..990a8dcee 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -11,29 +11,19 @@
 			@slide-change="onSlideChange"
 		>
 			<swiper-slide>
-				<div class="home">
-					<XHome :user="user"/>
-				</div>
+				<XHome :user="user"/>
 			</swiper-slide>
 			<swiper-slide>
-				<div class="reactions">
-					<XReactions :user="user"/>
-				</div>
+				<XReactions :user="user"/>
 			</swiper-slide>
 			<swiper-slide>
-				<div class="clips">
-					<XClips :user="user"/>
-				</div>
+				<XClips :user="user"/>
 			</swiper-slide>
 			<swiper-slide>
-				<div class="pages">
-					<XPages :user="user"/>
-				</div>
+				<XPages :user="user"/>
 			</swiper-slide>
 			<swiper-slide>
-				<div class="gallery">
-					<XGallery :user="user"/>
-				</div>
+				<XGallery :user="user"/>
 			</swiper-slide>
 		</swiper>
 	</div>

From 33cd0dc84ffe505893c1228708d5c1032c84adfd Mon Sep 17 00:00:00 2001
From: Kainoa Kanter <kainoa@t1c.dev>
Date: Tue, 15 Nov 2022 01:53:08 +0100
Subject: [PATCH 34/49] Update 'README.md'

---
 README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1fc75e3f8..fb33494fc 100644
--- a/README.md
+++ b/README.md
@@ -203,4 +203,10 @@ sudo docker compose up -d
 - I'd ***strongly*** recommend against using CloudFlare, but if you do, make sure to turn code minification off. 
 - For push notifications, run `npx web-push generate-vapid-keys`, the put the public and private keys into Control Panel > General > ServiceWorker.
 - For translations, make a [DeepL](https://deepl.com) account and generate an API key, then put it into Control Panel > General > DeepL Translation.
-- For link previews, go to Control Panel > Security > Summaly Proxy and put in `https://summaly.arkjp.net`.
\ No newline at end of file
+- For link previews, go to Control Panel > Security > Summaly Proxy and put in `https://summaly.arkjp.net`.
+- To add another admin account:
+	- Go to the user's page > 3 Dots > About > Moderation > turn on "Moderator"
+	- Go back to Overview > click the clipboard icon next to the ID
+	- Run `psql -d calckey` (or whatever the database name is)
+	- Run `UPDATE "user" SET "isAdmin" = true WHERE id='999999';` (replace 999999 with the copied ID)
+	- Have the new admin log out and log back in 
\ No newline at end of file

From 6319a93d005ef2175576095ed1c6f79aaa191b39 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 17:21:48 -0800
Subject: [PATCH 35/49] admin page fixes

---
 package.json                                  |  2 +-
 .../client/src/pages/admin/email-settings.vue |  1 +
 packages/client/src/pages/admin/emojis.vue    | 42 ++++++++++---------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index ffa05a0a1..4c111f54f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.2",
+	"version": "12.119.0-calc.13-rc.3",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue
index a38fa7ff9..96667effb 100644
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -107,6 +107,7 @@ function save() {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
+	icon: 'ph-test-tube-bold ph-lg',
 	text: i18n.ts.testEmail,
 	handler: testEmail,
 }, {
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index fa50c3e3b..f02a8b9b7 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -175,17 +175,17 @@ const menu = (ev: MouseEvent) => {
 		action: async () => {
 			os.api('export-custom-emojis', {
 			})
-			.then(() => {
-				os.alert({
-					type: 'info',
-					text: i18n.ts.exportRequested,
+				.then(() => {
+					os.alert({
+						type: 'info',
+						text: i18n.ts.exportRequested,
+					});
+				}).catch((err) => {
+					os.alert({
+						type: 'error',
+						text: err.message,
+					});
 				});
-			}).catch((err) => {
-				os.alert({
-					type: 'error',
-					text: err.message,
-				});
-			});
 		},
 	}, {
 		icon: 'ph-upload-simple-bold ph-lg',
@@ -195,17 +195,17 @@ const menu = (ev: MouseEvent) => {
 			os.api('admin/emoji/import-zip', {
 				fileId: file.id,
 			})
-			.then(() => {
-				os.alert({
-					type: 'info',
-					text: i18n.ts.importRequested,
+				.then(() => {
+					os.alert({
+						type: 'info',
+						text: i18n.ts.importRequested,
+					});
+				}).catch((err) => {
+					os.alert({
+						type: 'error',
+						text: err.message,
+					});
 				});
-			}).catch((err) => {
-				os.alert({
-					type: 'error',
-					text: err.message,
-				});
-			});
 		},
 	}], ev.currentTarget ?? ev.target);
 };
@@ -282,9 +282,11 @@ const headerActions = $computed(() => [{
 
 const headerTabs = $computed(() => [{
 	key: 'local',
+	icon: 'ph-hand-fist-bold ph-lg',
 	title: i18n.ts.local,
 }, {
 	key: 'remote',
+	icon: 'ph-planet-bold ph-lg',
 	title: i18n.ts.remote,
 }]);
 

From a5780a73191c2713b430c931d37dfe8024f176a0 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 17:45:11 -0800
Subject: [PATCH 36/49] fix fill out profile step of tutorial

---
 package.json                                  |  2 +-
 .../src/components/MkTutorialDialog.vue       |  3 +-
 .../client/src/pages/settings/profile.vue     | 29 ++++++++++++++-----
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 4c111f54f..7e558f33c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.3",
+	"version": "12.119.0-calc.13-rc.4",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue
index d85e21724..607006766 100644
--- a/packages/client/src/components/MkTutorialDialog.vue
+++ b/packages/client/src/components/MkTutorialDialog.vue
@@ -33,9 +33,8 @@
 						<h3>{{ i18n.ts._tutorial.step2_1 }}</h3>
 						<div>{{ i18n.ts._tutorial.step2_2 }}</div>
 						<br/>
-						<XSettings/>
+						<XSettings :save-button="true"/>
 						<br/>
-						<MkButton class="ok" primary @click="tutorial++"><i class="ph-check-bold ph-lg"></i> {{ i18n.ts.next }}</MkButton>
 					</div>
 					<div v-else-if="tutorial === 2" key="3" class="_content">
 						<h3>{{ i18n.ts._tutorial.step3_1 }}</h3>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index e663e00fd..8a83abb35 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -1,5 +1,9 @@
 <template>
 <div class="_formRoot">
+	<div v-if="saveButton == true">
+		<MkButton primary rounded @click="save">{{ i18n.ts.save }}</MkButton>
+	</div>
+	<br/>
 	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
 		<div class="avatar">
 			<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
@@ -56,6 +60,9 @@
 	<FormSwitch v-model="profile.isCat" class="_formBlock">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></FormSwitch>
 	<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></FormSwitch>
 	<FormSwitch v-model="profile.isBot" class="_formBlock">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></FormSwitch>
+	<div v-if="saveButton == true">
+		<MkButton primary rounded @click="save">{{ i18n.ts.save }}</MkButton>
+	</div>
 </div>
 </template>
 
@@ -78,16 +85,22 @@ import { langmap } from '@/scripts/langmap';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
 const profile = reactive({
-	name: $i.name,
-	description: $i.description,
-	location: $i.location,
-	birthday: $i.birthday,
-	lang: $i.lang,
-	isBot: $i.isBot,
-	isCat: $i.isCat,
-	showTimelineReplies: $i.showTimelineReplies,
+	name: $i?.name,
+	description: $i?.description,
+	location: $i?.location,
+	birthday: $i?.birthday,
+	lang: $i?.lang,
+	isBot: $i?.isBot,
+	isCat: $i?.isCat,
+	showTimelineReplies: $i?.showTimelineReplies,
 });
 
+const props = withDefaults(defineProps<{
+	saveButton?: boolean,
+}>(), {});
+
+let saveButton = $ref(props.saveButton ?? false);
+
 watch(() => profile, () => {
 	save();
 }, {

From efea67d64d4e9d2c3b8454e4296b70389681efd2 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 17:53:12 -0800
Subject: [PATCH 37/49] test explore page fix

---
 package.json                                | 2 +-
 packages/client/src/pages/explore.users.vue | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 7e558f33c..93afe3f75 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.4",
+	"version": "12.119.0-calc.13-rc.5",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 019cbd1c2..b6ba9ffa0 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -6,7 +6,8 @@
 	</MkTab>
 	<div v-if="origin === 'local'">
 		<template v-if="tag == null">
-			<MkFolder v-show="thereArePinnedUsers != null && thereArePinnedUsers" class="_gap" persist-key="explore-pinned-users">
+			<!-- <MkFolder v-show="thereArePinnedUsers != null && thereArePinnedUsers == true" class="_gap" persist-key="explore-pinned-users"> -->
+			<MkFolder class="_gap" persist-key="explore-pinned-users">
 				<template #header><i class="ph-bookmark-simple-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
 				<XUserList :pagination="pinnedUsers"/>
 			</MkFolder>
@@ -29,8 +30,8 @@
 			<template #header><i class="ph-hash-bold ph-lg ph-fw ph-lg" 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>
-				<MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/explore/tags/${tag.tag}`">{{ tag.tag }}</MkA>
+				<MkA v-for="t in tagsLocal" :key="'local:' + t.tag" :to="`/tags/${t.tag}`" class="local">{{ t.tag }}</MkA>
+				<MkA v-for="t in tagsRemote" :key="'remote:' + t.tag" :to="`/tags/${t.tag}`">{{ t.tag }}</MkA>
 			</div>
 		</MkFolder>
 
@@ -100,7 +101,7 @@ const pinnedUsersList = await os.api('pinned-users');
 
 if (pinnedUsersList?.length > 0) { thereArePinnedUsers = true; }
 
-const pinnedUsers = { endpoint: 'pinned-users' };
+const pinnedUsers = { endpoint: 'pinned-users', limit: 10 };
 const popularUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
 	state: 'alive',
 	origin: 'local',

From dbe6d03d24d6d7e16714128bf941830888df94a7 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 17:54:34 -0800
Subject: [PATCH 38/49] hide top option

---
 packages/client/src/pages/settings/navbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue
index b494923e9..9c41fdb89 100644
--- a/packages/client/src/pages/settings/navbar.vue
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -9,7 +9,7 @@
 		<template #label>{{ i18n.ts.display }}</template>
 		<option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option>
 		<option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option>
-		<option value="top">{{ i18n.ts._menuDisplay.top }}</option>
+		<!-- <option value="top">{{ i18n.ts._menuDisplay.top }}</option> -->
 		<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
 	</FormRadios>
 

From f9aaec00d2a2b0e05c7cdbe7e76edba735f53d86 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 17:58:21 -0800
Subject: [PATCH 39/49] t

---
 packages/client/src/pages/explore.users.vue    | 3 +--
 packages/client/src/pages/settings/profile.vue | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index b6ba9ffa0..331812580 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -6,8 +6,7 @@
 	</MkTab>
 	<div v-if="origin === 'local'">
 		<template v-if="tag == null">
-			<!-- <MkFolder v-show="thereArePinnedUsers != null && thereArePinnedUsers == true" class="_gap" persist-key="explore-pinned-users"> -->
-			<MkFolder class="_gap" persist-key="explore-pinned-users">
+			<MkFolder v-show="thereArePinnedUsers != null && thereArePinnedUsers == true" class="_gap" persist-key="explore-pinned-users">
 				<template #header><i class="ph-bookmark-simple-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
 				<XUserList :pagination="pinnedUsers"/>
 			</MkFolder>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 8a83abb35..82b95718b 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="_formRoot">
 	<div v-if="saveButton == true">
-		<MkButton primary rounded @click="save">{{ i18n.ts.save }}</MkButton>
+		<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
 	</div>
 	<br/>
 	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
@@ -61,7 +61,7 @@
 	<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></FormSwitch>
 	<FormSwitch v-model="profile.isBot" class="_formBlock">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></FormSwitch>
 	<div v-if="saveButton == true">
-		<MkButton primary rounded @click="save">{{ i18n.ts.save }}</MkButton>
+		<MkButton primary @click="save">{{ i18n.ts.save }}</MkButton>
 	</div>
 </div>
 </template>

From f35e850b02b318dee88d6d185e7bf11685efdb7f Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 17:58:45 -0800
Subject: [PATCH 40/49] revert as test for problem

---
 package.json                                |  2 +-
 packages/client/src/pages/explore.users.vue | 63 +++++++++------------
 2 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index 93afe3f75..4b6a62764 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.5",
+	"version": "12.119.0-calc.13-rc.6",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 331812580..dd4115cf2 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -6,50 +6,50 @@
 	</MkTab>
 	<div v-if="origin === 'local'">
 		<template v-if="tag == null">
-			<MkFolder v-show="thereArePinnedUsers != null && thereArePinnedUsers == true" class="_gap" persist-key="explore-pinned-users">
-				<template #header><i class="ph-bookmark-simple-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
+			<MkFolder class="_gap" persist-key="explore-pinned-users">
+				<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
 				<XUserList :pagination="pinnedUsers"/>
 			</MkFolder>
-			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-popular-users">
-				<template #header><i class="ph-chart-line-up-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
+			<MkFolder class="_gap" persist-key="explore-popular-users">
+				<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 v-if="$i != null" class="_gap" persist-key="explore-recently-updated-users">
-				<template #header><i class="ph-chat-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
+			<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>{{ i18n.ts.recentlyUpdatedUsers }}</template>
 				<XUserList :pagination="recentlyUpdatedUsers"/>
 			</MkFolder>
-			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-recently-registered-users">
-				<template #header><i class="ph-plus-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
+			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
+				<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="ph-hash-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.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="t in tagsLocal" :key="'local:' + t.tag" :to="`/tags/${t.tag}`" class="local">{{ t.tag }}</MkA>
-				<MkA v-for="t in tagsRemote" :key="'remote:' + t.tag" :to="`/tags/${t.tag}`">{{ t.tag }}</MkA>
+				<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
+				<MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/explore/tags/${tag.tag}`">{{ tag.tag }}</MkA>
 			</div>
 		</MkFolder>
 
 		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
-			<template #header><i class="ph-hash-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ tag }}</template>
+			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
 			<XUserList :pagination="tagUsers"/>
 		</MkFolder>
 
 		<template v-if="tag == null">
 			<MkFolder class="_gap">
-				<template #header><i class="ph-chart-line-up-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.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="ph-chat-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.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="ph-rocket-launch-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.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>
@@ -65,27 +65,21 @@ import MkTab from '@/components/MkTab.vue';
 import number from '@/filters/number';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
-import { $i } from '@/account';
 import { instance } from '@/instance';
 
 const props = defineProps<{
-	tag?: string;
-}>();
+		tag?: string;
+	}>();
 
 let origin = $ref('local');
 let tagsEl = $ref<InstanceType<typeof MkFolder>>();
 let tagsLocal = $ref([]);
 let tagsRemote = $ref([]);
-let thereArePinnedUsers = $ref(false);
 
 watch(() => props.tag, () => {
 	if (tagsEl) tagsEl.toggleContent(props.tag == null);
 });
 
-watch(() => pinnedUsersList, () => {
-	if (pinnedUsersList?.length > 0) thereArePinnedUsers = true;
-});
-
 const tagUsers = $computed(() => ({
 	endpoint: 'hashtags/users' as const,
 	limit: 30,
@@ -96,11 +90,7 @@ const tagUsers = $computed(() => ({
 	},
 }));
 
-const pinnedUsersList = await os.api('pinned-users');
-
-if (pinnedUsersList?.length > 0) { thereArePinnedUsers = true; }
-
-const pinnedUsers = { endpoint: 'pinned-users', limit: 10 };
+const pinnedUsers = { endpoint: 'pinned-users' };
 const popularUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
 	state: 'alive',
 	origin: 'local',
@@ -145,14 +135,15 @@ os.api('hashtags/list', {
 });
 </script>
 
-<style lang="scss" scoped>
-.vxjfqztj {
-	> * {
-		margin-right: 16px;
+	<style lang="scss" scoped>
+	.vxjfqztj {
+		> * {
+			margin-right: 16px;
 
-		&.local {
-			font-weight: bold;
+			&.local {
+				font-weight: bold;
+			}
 		}
 	}
-}
-</style>
+	</style>
+

From 24f451215dfef8694bc3adb129cd0181f68321d4 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 18:05:07 -0800
Subject: [PATCH 41/49] weird $i workaround (not a fan tbh)

---
 package.json                                |  2 +-
 packages/client/src/pages/explore.users.vue | 70 ++++++++++++---------
 2 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 4b6a62764..972f72544 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.6",
+	"version": "12.119.0-calc.13-rc.7",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index dd4115cf2..0449a3e1b 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -6,50 +6,50 @@
 	</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>{{ i18n.ts.pinnedUsers }}</template>
+			<MkFolder v-show="thereArePinnedUsers != null && thereArePinnedUsers == true" class="_gap" persist-key="explore-pinned-users">
+				<template #header><i class="ph-bookmark-simple-bold ph-lg ph-fw ph-lg" 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>{{ i18n.ts.popularUsers }}</template>
+			<MkFolder v-if="user != null" class="_gap" persist-key="explore-popular-users">
+				<template #header><i class="ph-chart-line-up-bold ph-lg ph-fw ph-lg" 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>{{ i18n.ts.recentlyUpdatedUsers }}</template>
+			<MkFolder v-if="user != null" class="_gap" persist-key="explore-recently-updated-users">
+				<template #header><i class="ph-chat-bold ph-lg ph-fw ph-lg" 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>{{ i18n.ts.recentlyRegisteredUsers }}</template>
+			<MkFolder v-if="user != null" class="_gap" persist-key="explore-recently-registered-users">
+				<template #header><i class="ph-plus-bold ph-lg ph-fw ph-lg" 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>{{ i18n.ts.popularTags }}</template>
+			<template #header><i class="ph-hash-bold ph-lg ph-fw ph-lg" 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>
-				<MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/explore/tags/${tag.tag}`">{{ tag.tag }}</MkA>
+				<MkA v-for="t in tagsLocal" :key="'local:' + t.tag" :to="`/tags/${t.tag}`" class="local">{{ t.tag }}</MkA>
+				<MkA v-for="t in tagsRemote" :key="'remote:' + t.tag" :to="`/tags/${t.tag}`">{{ t.tag }}</MkA>
 			</div>
 		</MkFolder>
 
 		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
-			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
+			<template #header><i class="ph-hash-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ tag }}</template>
 			<XUserList :pagination="tagUsers"/>
 		</MkFolder>
 
 		<template v-if="tag == null">
 			<MkFolder class="_gap">
-				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
+				<template #header><i class="ph-chart-line-up-bold ph-lg ph-fw ph-lg" 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>{{ i18n.ts.recentlyUpdatedUsers }}</template>
+				<template #header><i class="ph-chat-bold ph-lg ph-fw ph-lg" 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>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
+				<template #header><i class="ph-rocket-launch-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsersF"/>
 			</MkFolder>
 		</template>
@@ -58,28 +58,35 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { watch } from 'vue';
 import XUserList from '@/components/MkUserList.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkTab from '@/components/MkTab.vue';
-import number from '@/filters/number';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
-import { instance } from '@/instance';
+import { $i } from '@/account';
 
 const props = defineProps<{
-		tag?: string;
-	}>();
+	tag?: string;
+}>();
 
 let origin = $ref('local');
 let tagsEl = $ref<InstanceType<typeof MkFolder>>();
 let tagsLocal = $ref([]);
 let tagsRemote = $ref([]);
+let thereArePinnedUsers = $ref(false);
+let user = $ref(true);
 
 watch(() => props.tag, () => {
 	if (tagsEl) tagsEl.toggleContent(props.tag == null);
 });
 
+watch(() => pinnedUsersList, () => {
+	if (pinnedUsersList?.length > 0) thereArePinnedUsers = true;
+});
+
+if ($i == null) { user = false; }
+
 const tagUsers = $computed(() => ({
 	endpoint: 'hashtags/users' as const,
 	limit: 30,
@@ -90,7 +97,11 @@ const tagUsers = $computed(() => ({
 	},
 }));
 
-const pinnedUsers = { endpoint: 'pinned-users' };
+const pinnedUsersList = await os.api('pinned-users');
+
+if (pinnedUsersList?.length > 0) { thereArePinnedUsers = true; }
+
+const pinnedUsers = { endpoint: 'pinned-users', limit: 10 };
 const popularUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
 	state: 'alive',
 	origin: 'local',
@@ -135,15 +146,14 @@ os.api('hashtags/list', {
 });
 </script>
 
-	<style lang="scss" scoped>
-	.vxjfqztj {
-		> * {
-			margin-right: 16px;
+<style lang="scss" scoped>
+.vxjfqztj {
+	> * {
+		margin-right: 16px;
 
-			&.local {
-				font-weight: bold;
-			}
+		&.local {
+			font-weight: bold;
 		}
 	}
-	</style>
-
+}
+</style>

From cd799c3387124d0bff9a7702aaaa8d6fecfdf292 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 18:07:33 -0800
Subject: [PATCH 42/49] nvm

---
 package.json                                | 2 +-
 packages/client/src/pages/explore.users.vue | 9 +++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 972f72544..bc38805cc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.7",
+	"version": "12.119.0-calc.13-rc.8",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 0449a3e1b..1535525f2 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -10,15 +10,15 @@
 				<template #header><i class="ph-bookmark-simple-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
 				<XUserList :pagination="pinnedUsers"/>
 			</MkFolder>
-			<MkFolder v-if="user != null" class="_gap" persist-key="explore-popular-users">
+			<MkFolder class="_gap" persist-key="explore-popular-users">
 				<template #header><i class="ph-chart-line-up-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
 				<XUserList :pagination="popularUsers"/>
 			</MkFolder>
-			<MkFolder v-if="user != null" class="_gap" persist-key="explore-recently-updated-users">
+			<MkFolder class="_gap" persist-key="explore-recently-updated-users">
 				<template #header><i class="ph-chat-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
 				<XUserList :pagination="recentlyUpdatedUsers"/>
 			</MkFolder>
-			<MkFolder v-if="user != null" class="_gap" persist-key="explore-recently-registered-users">
+			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
 				<template #header><i class="ph-plus-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsers"/>
 			</MkFolder>
@@ -75,7 +75,6 @@ let tagsEl = $ref<InstanceType<typeof MkFolder>>();
 let tagsLocal = $ref([]);
 let tagsRemote = $ref([]);
 let thereArePinnedUsers = $ref(false);
-let user = $ref(true);
 
 watch(() => props.tag, () => {
 	if (tagsEl) tagsEl.toggleContent(props.tag == null);
@@ -85,8 +84,6 @@ watch(() => pinnedUsersList, () => {
 	if (pinnedUsersList?.length > 0) thereArePinnedUsers = true;
 });
 
-if ($i == null) { user = false; }
-
 const tagUsers = $computed(() => ({
 	endpoint: 'hashtags/users' as const,
 	limit: 30,

From e1a38c0d5d5d7e6ae3491dc0a3eee4dcb45c39ae Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 18:15:01 -0800
Subject: [PATCH 43/49] Reorder definitions (duh)

---
 package.json                                |  2 +-
 packages/client/src/pages/explore.users.vue | 22 ++++++++++-----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index bc38805cc..db3f26e9b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.8",
+	"version": "12.119.0-calc.13-rc.9",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 1535525f2..26cc4af35 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -6,19 +6,19 @@
 	</MkTab>
 	<div v-if="origin === 'local'">
 		<template v-if="tag == null">
-			<MkFolder v-show="thereArePinnedUsers != null && thereArePinnedUsers == true" class="_gap" persist-key="explore-pinned-users">
+			<MkFolder v-show="thereArePinnedUsers != null && thereArePinnedUsers" class="_gap" persist-key="explore-pinned-users">
 				<template #header><i class="ph-bookmark-simple-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
 				<XUserList :pagination="pinnedUsers"/>
 			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-popular-users">
+			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-popular-users">
 				<template #header><i class="ph-chart-line-up-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
 				<XUserList :pagination="popularUsers"/>
 			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-recently-updated-users">
+			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-recently-updated-users">
 				<template #header><i class="ph-chat-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
 				<XUserList :pagination="recentlyUpdatedUsers"/>
 			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
+			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-recently-registered-users">
 				<template #header><i class="ph-plus-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsers"/>
 			</MkFolder>
@@ -29,8 +29,8 @@
 			<template #header><i class="ph-hash-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
 
 			<div class="vxjfqztj">
-				<MkA v-for="t in tagsLocal" :key="'local:' + t.tag" :to="`/tags/${t.tag}`" class="local">{{ t.tag }}</MkA>
-				<MkA v-for="t in tagsRemote" :key="'remote:' + t.tag" :to="`/tags/${t.tag}`">{{ t.tag }}</MkA>
+				<MkA v-for="t in tagsLocal" :key="'local:' + t.tag" :to="`/explore/tags/${t.tag}`" class="local">{{ t.tag }}</MkA>
+				<MkA v-for="t in tagsRemote" :key="'remote:' + t.tag" :to="`/explore/tags/${t.tag}`">{{ t.tag }}</MkA>
 			</div>
 		</MkFolder>
 
@@ -76,6 +76,10 @@ let tagsLocal = $ref([]);
 let tagsRemote = $ref([]);
 let thereArePinnedUsers = $ref(false);
 
+const pinnedUsersList = await os.api('pinned-users');
+
+if (pinnedUsersList?.length > 0) { thereArePinnedUsers = true; }
+
 watch(() => props.tag, () => {
 	if (tagsEl) tagsEl.toggleContent(props.tag == null);
 });
@@ -94,11 +98,7 @@ const tagUsers = $computed(() => ({
 	},
 }));
 
-const pinnedUsersList = await os.api('pinned-users');
-
-if (pinnedUsersList?.length > 0) { thereArePinnedUsers = true; }
-
-const pinnedUsers = { endpoint: 'pinned-users', limit: 10 };
+const pinnedUsers = { endpoint: 'pinned-users' };
 const popularUsers = { endpoint: 'users', limit: 10, noPaging: true, params: {
 	state: 'alive',
 	origin: 'local',

From 59b33b08ce87b9d2040b3c662e7d6ad207a10840 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 18:35:01 -0800
Subject: [PATCH 44/49] more fixes

---
 package.json                                    |  2 +-
 packages/backend/src/server/web/index.ts        | 10 ----------
 packages/backend/src/server/web/views/base.pug  | 17 ++++++++++-------
 .../client/src/components/MkTutorialDialog.vue  |  2 +-
 packages/client/src/pages/explore.users.vue     |  4 ----
 5 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index db3f26e9b..69d84d4b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.9",
+	"version": "12.119.0-calc.13-rc.10",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/backend/src/server/web/index.ts b/packages/backend/src/server/web/index.ts
index cd8d6f530..c81506384 100644
--- a/packages/backend/src/server/web/index.ts
+++ b/packages/backend/src/server/web/index.ts
@@ -42,9 +42,6 @@ const app = new Koa();
 //#region Bull Dashboard
 const bullBoardPath = '/queue';
 
- // used as a url param to prevent caching css and images
- const nowDateMs = Date.now();
- 
 // Authenticate
 app.use(async (ctx, next) => {
 	if (ctx.path === bullBoardPath || ctx.path.startsWith(bullBoardPath + '/')) {
@@ -298,7 +295,6 @@ router.get(['/@:user', '/@:user/:sub'], async (ctx, next) => {
 			icon: meta.iconUrl,
 			themeColor: meta.themeColor,
 			privateMode: meta.privateMode,
-			nowDateMs: nowDateMs,
 		});
 		ctx.set('Cache-Control', 'public, max-age=15');
 	} else {
@@ -344,7 +340,6 @@ router.get('/notes/:note', async (ctx, next) => {
 			icon: meta.iconUrl,
 			privateMode: meta.privateMode,
 			themeColor: meta.themeColor,
-			nowDateMs: nowDateMs,
 		});
 
 		ctx.set('Cache-Control', 'public, max-age=15');
@@ -382,7 +377,6 @@ router.get('/@:user/pages/:page', async (ctx, next) => {
 			icon: meta.iconUrl,
 			themeColor: meta.themeColor,
 			privateMode: meta.privateMode,
-			nowDateMs: nowDateMs,
 		});
 
 		if (['public'].includes(page.visibility)) {
@@ -416,7 +410,6 @@ router.get('/clips/:clip', async (ctx, next) => {
 			privateMode: meta.privateMode,
 			icon: meta.iconUrl,
 			themeColor: meta.themeColor,
-			nowDateMs: nowDateMs,
 		});
 
 		ctx.set('Cache-Control', 'public, max-age=15');
@@ -443,7 +436,6 @@ router.get('/gallery/:post', async (ctx, next) => {
 			icon: meta.iconUrl,
 			themeColor: meta.themeColor,
 			privateMode: meta.privateMode,
-			nowDateMs: nowDateMs,
 		});
 
 		ctx.set('Cache-Control', 'public, max-age=15');
@@ -469,7 +461,6 @@ router.get('/channels/:channel', async (ctx, next) => {
 			icon: meta.iconUrl,
 			themeColor: meta.themeColor,
 			privateMode: meta.privateMode,
-			nowDateMs: nowDateMs,
 		});
 
 		ctx.set('Cache-Control', 'public, max-age=15');
@@ -545,7 +536,6 @@ router.get('(.*)', async ctx => {
 		themeColor: meta.themeColor,
 		randomMOTD: motd[Math.floor(Math.random() * motd.length)],
 		privateMode: meta.privateMode,
-		nowDateMs: nowDateMs,
 	});
 	ctx.set('Cache-Control', 'public, max-age=3');
 });
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 3077006ff..547fc34a8 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -20,23 +20,26 @@ doctype html
 
 html
 
+	- var timestamp = Date.now();
+
 	head
 		meta(charset='utf-8')
 		meta(name='application-name' content='Calckey')
 		meta(name='referrer' content='origin')
+		meta(name='darkreader-lock' content='')
 		meta(name='theme-color' content= themeColor || '#31748f')
 		meta(name='theme-color-orig' content= themeColor || '#31748f')
 		meta(property='twitter:card' content='summary')
 		meta(property='og:site_name' content= instanceName || 'Calckey')
 		meta(name='viewport' content='width=device-width, initial-scale=1')
-		link(rel='icon' href= icon || `/favicon.ico?${ nowDateMs }`)
-		link(rel='apple-touch-icon' href= icon || `/apple-touch-icon.png?${ nowDateMs }`)
+		link(rel='icon' href= icon || `/favicon.ico?${ timestamp }`)
+		link(rel='apple-touch-icon' href= icon || `/apple-touch-icon.png?${ timestamp }`)
 		link(rel='manifest' href='/manifest.json')
-		link(rel='prefetch' href=`/static-assets/badges/info.png?${ nowDateMs }`)
-		link(rel='prefetch' href=`/static-assets/badges/not-found.png?${ nowDateMs }`)
-		link(rel='prefetch' href=`/static-assets/badges/error.png?${ nowDateMs }`)
+		link(rel='prefetch' href=`/static-assets/badges/info.png?${ timestamp }`)
+		link(rel='prefetch' href=`/static-assets/badges/not-found.png?${ timestamp }`)
+		link(rel='prefetch' href=`/static-assets/badges/error.png?${ timestamp }`)
 		link(rel='stylesheet' href='/assets/phosphor/icons.css')
-		link(rel='stylesheet' href=`/static-assets/instance.css?${ nowDateMs }`)
+		link(rel='stylesheet' href=`/static-assets/instance.css?${ timestamp }`)
 		link(rel='modulepreload' href=`/assets/${clientEntry.file}`)
 
 		each href in clientEntry.css
@@ -77,7 +80,7 @@ html
 			br
 			| Please turn on your JavaScript
 		div#splash
-			img#splashIcon(src= splashIcon || `/static-assets/splash.png?${ nowDateMs }`)
+			img#splashIcon(src= splashIcon || `/static-assets/splash.png?${ timestamp }`)
 			span#splashText
 				block randomMOTD
 					= randomMOTD
diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue
index 607006766..0160ace21 100644
--- a/packages/client/src/components/MkTutorialDialog.vue
+++ b/packages/client/src/components/MkTutorialDialog.vue
@@ -2,7 +2,7 @@
 <XModalWindow
 	ref="dialog"
 	:width="800"
-	@close="dialog.close()"
+	@close="dialog?.close()"
 	@closed="$emit('closed')"
 >
 	<template #header>{{ i18n.ts._tutorial.title }}</template>
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 26cc4af35..9bea45e86 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -84,10 +84,6 @@ watch(() => props.tag, () => {
 	if (tagsEl) tagsEl.toggleContent(props.tag == null);
 });
 
-watch(() => pinnedUsersList, () => {
-	if (pinnedUsersList?.length > 0) thereArePinnedUsers = true;
-});
-
 const tagUsers = $computed(() => ({
 	endpoint: 'hashtags/users' as const,
 	limit: 30,

From 8eecacec4fe64e8d2e3eb9f7fc7d04749a334015 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 18:53:38 -0800
Subject: [PATCH 45/49] AVIF support

---
 CALCKEY.md                                             | 3 ++-
 package.json                                           | 2 +-
 packages/backend/src/misc/get-file-info.ts             | 4 ++--
 packages/backend/src/misc/is-mime-image.ts             | 2 +-
 packages/backend/src/models/repositories/drive-file.ts | 2 +-
 packages/backend/src/server/file/send-drive-file.ts    | 2 +-
 packages/backend/src/services/drive/add-file.ts        | 5 +++--
 packages/client/src/const.ts                           | 1 +
 packages/client/src/pages/user/index.photos.vue        | 1 +
 packages/client/src/scripts/upload.ts                  | 1 +
 10 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/CALCKEY.md b/CALCKEY.md
index c2925d4c8..7f0791075 100644
--- a/CALCKEY.md
+++ b/CALCKEY.md
@@ -84,7 +84,8 @@
 - Phosphor icons instead of FontAwesome
 - Fully deprecate MkEmojiPickerWindow in favor of MkEmojiPickerDialog
 - Link hover effect
-- Replace all `$ts` with i18n
+- Replace all `$ts` with i18n\
+- AVIF support
 - Obliteration of Ai-chan
 - [Make showing ads optional](https://github.com/misskey-dev/misskey/pull/8996)
 - [Tapping avatar in mobile opens account modal](https://github.com/misskey-dev/misskey/pull/9056)
diff --git a/package.json b/package.json
index 69d84d4b9..54dca8520 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.10",
+	"version": "12.119.0-calc.13-rc.11",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/backend/src/misc/get-file-info.ts b/packages/backend/src/misc/get-file-info.ts
index 1c988b248..b4922779a 100644
--- a/packages/backend/src/misc/get-file-info.ts
+++ b/packages/backend/src/misc/get-file-info.ts
@@ -63,7 +63,7 @@ export async function getFileInfo(path: string, opts: {
 	let height: number | undefined;
 	let orientation: number | undefined;
 
-	if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/bmp', 'image/tiff', 'image/svg+xml', 'image/vnd.adobe.photoshop'].includes(type.mime)) {
+	if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/bmp', 'image/tiff', 'image/svg+xml', 'image/vnd.adobe.photoshop', 'image/avif'].includes(type.mime)) {
 		const imageSize = await detectImageSize(path).catch(e => {
 			warnings.push(`detectImageSize failed: ${e}`);
 			return undefined;
@@ -90,7 +90,7 @@ export async function getFileInfo(path: string, opts: {
 
 	let blurhash: string | undefined;
 
-	if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/svg+xml'].includes(type.mime)) {
+	if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/svg+xml', 'image/avif'].includes(type.mime)) {
 		blurhash = await getBlurhash(path).catch(e => {
 			warnings.push(`getBlurhash failed: ${e}`);
 			return undefined;
diff --git a/packages/backend/src/misc/is-mime-image.ts b/packages/backend/src/misc/is-mime-image.ts
index 8993ede33..9d6e28f15 100644
--- a/packages/backend/src/misc/is-mime-image.ts
+++ b/packages/backend/src/misc/is-mime-image.ts
@@ -2,7 +2,7 @@ import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
 
 const dictionary = {
 	'safe-file': FILE_TYPE_BROWSERSAFE,
-	'sharp-convertible-image': ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/svg+xml'],
+	'sharp-convertible-image': ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/svg+xml', 'image/avif'],
 };
 
 export const isMimeImage = (mime: string, type: keyof typeof dictionary): boolean => dictionary[type].includes(mime);
diff --git a/packages/backend/src/models/repositories/drive-file.ts b/packages/backend/src/models/repositories/drive-file.ts
index 0d589d4f1..4366b02cc 100644
--- a/packages/backend/src/models/repositories/drive-file.ts
+++ b/packages/backend/src/models/repositories/drive-file.ts
@@ -60,7 +60,7 @@ export const DriveFileRepository = db.getRepository(DriveFile).extend({
 			}
 		}
 
-		const isImage = file.type && ['image/png', 'image/apng', 'image/gif', 'image/jpeg', 'image/webp', 'image/svg+xml'].includes(file.type);
+		const isImage = file.type && ['image/png', 'image/apng', 'image/gif', 'image/jpeg', 'image/webp', 'image/svg+xml', 'image/avif'].includes(file.type);
 
 		return thumbnail ? (file.thumbnailUrl || (isImage ? (file.webpublicUrl || file.url) : null)) : (file.webpublicUrl || file.url);
 	},
diff --git a/packages/backend/src/server/file/send-drive-file.ts b/packages/backend/src/server/file/send-drive-file.ts
index c34e04314..acfde9cfc 100644
--- a/packages/backend/src/server/file/send-drive-file.ts
+++ b/packages/backend/src/server/file/send-drive-file.ts
@@ -59,7 +59,7 @@ export default async function(ctx: Koa.Context) {
 
 				const convertFile = async () => {
 					if (isThumbnail) {
-						if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(mime)) {
+						if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml', 'image/avif'].includes(mime)) {
 							return await convertToWebp(path, 498, 280);
 						} else if (mime.startsWith('video/')) {
 							return await GenerateVideoThumbnail(path);
diff --git a/packages/backend/src/services/drive/add-file.ts b/packages/backend/src/services/drive/add-file.ts
index 709db88f2..a790fd510 100644
--- a/packages/backend/src/services/drive/add-file.ts
+++ b/packages/backend/src/services/drive/add-file.ts
@@ -49,6 +49,7 @@ async function save(file: DriveFile, path: string, name: string, type: string, h
 			if (type === 'image/png') ext = '.png';
 			if (type === 'image/webp') ext = '.webp';
 			if (type === 'image/apng') ext = '.apng';
+			if (type === 'image/avif') ext = '.avif';
 			if (type === 'image/vnd.mozilla.apng') ext = '.apng';
 		}
 
@@ -171,7 +172,7 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 		}
 	}
 
-	if (!['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml'].includes(type)) {
+	if (!['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml', 'image/avif'].includes(type)) {
 		logger.debug('web image and thumbnail not created (not an required file)');
 		return {
 			webpublic: null,
@@ -238,7 +239,7 @@ export async function generateAlts(path: string, type: string, generateWeb: bool
 	let thumbnail: IImage | null = null;
 
 	try {
-		if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(type)) {
+		if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml', 'image/avif'].includes(type)) {
 			thumbnail = await convertSharpToWebp(img, 498, 280);
 		} else {
 			logger.debug('thumbnail not created (not an required file)');
diff --git a/packages/client/src/const.ts b/packages/client/src/const.ts
index 505cf2748..88534f2a9 100644
--- a/packages/client/src/const.ts
+++ b/packages/client/src/const.ts
@@ -11,6 +11,7 @@ export const FILE_TYPE_BROWSERSAFE = [
 	'image/bmp',
 	'image/tiff',
 	'image/x-icon',
+	'image/avif',
 
 	// OggS
 	'audio/opus',
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 703b3adce..21907a134 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -52,6 +52,7 @@ onMounted(() => {
 		'image/gif',
 		'image/apng',
 		'image/vnd.mozilla.apng',
+		'image/avif',
 	];
 	os.api('users/notes', {
 		userId: props.user.id,
diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
index 6f50e9bd9..9f34685f6 100644
--- a/packages/client/src/scripts/upload.ts
+++ b/packages/client/src/scripts/upload.ts
@@ -26,6 +26,7 @@ const mimeTypeMap = {
 	'image/webp': 'webp',
 	'image/jpeg': 'jpg',
 	'image/png': 'png',
+	'image/avif': 'avif',
 } as const;
 
 export function uploadFile(

From 684c36556e10e0cc97984b7f3fcb2474b3786d09 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 18:54:03 -0800
Subject: [PATCH 46/49] typo

---
 CALCKEY.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CALCKEY.md b/CALCKEY.md
index 7f0791075..4a85c43b4 100644
--- a/CALCKEY.md
+++ b/CALCKEY.md
@@ -84,7 +84,7 @@
 - Phosphor icons instead of FontAwesome
 - Fully deprecate MkEmojiPickerWindow in favor of MkEmojiPickerDialog
 - Link hover effect
-- Replace all `$ts` with i18n\
+- Replace all `$ts` with i18n
 - AVIF support
 - Obliteration of Ai-chan
 - [Make showing ads optional](https://github.com/misskey-dev/misskey/pull/8996)

From 5f15ca4fde7d08d3d36d92fb03e65896783430ca Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 19:05:09 -0800
Subject: [PATCH 47/49] revert users/index.vue

---
 package.json                             |   2 +-
 packages/client/src/pages/user/index.vue | 201 +++++++++++------------
 2 files changed, 95 insertions(+), 108 deletions(-)

diff --git a/package.json b/package.json
index 54dca8520..f2b2df160 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.11",
+	"version": "12.119.0-calc.13-rc.12",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 990a8dcee..d9fdcbaff 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -1,53 +1,41 @@
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<div v-if="user">
-		<swiper
-			:modules="[Virtual]"
-			:space-between="20"
-			:virtual="true"
-			:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)"
-			@swiper="setSwiperRef"
-			@slide-change="onSlideChange"
-		>
-			<swiper-slide>
-				<XHome :user="user"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XReactions :user="user"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XClips :user="user"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XPages :user="user"/>
-			</swiper-slide>
-			<swiper-slide>
-				<XGallery :user="user"/>
-			</swiper-slide>
-		</swiper>
+	<template #header>
+		<MkPageHeader
+			v-model:tab="tab"
+			:actions="headerActions"
+			:tabs="headerTabs"
+		/>
+	</template>
+	<div>
+		<transition name="fade" mode="out-in">
+			<div v-if="user">
+				<XHome v-if="tab === 'home'" :user="user"/>
+				<XReactions v-else-if="tab === 'reactions'" :user="user"/>
+				<XClips v-else-if="tab === 'clips'" :user="user"/>
+				<XPages v-else-if="tab === 'pages'" :user="user"/>
+				<XGallery v-else-if="tab === 'gallery'" :user="user"/>
+			</div>
+			<MkError v-else-if="error" @retry="fetchUser()"/>
+			<MkLoading v-else/>
+		</transition>
 	</div>
-	<MkError v-else-if="error" @retry="fetchUser()"/>
-	<MkLoading v-else/>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
-import { Virtual } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/vue';
+import { defineAsyncComponent, computed, watch } from 'vue';
+import calcAge from 's-age';
 import * as Acct from 'misskey-js/built/acct';
 import type * as misskey from 'misskey-js';
+import { getScrollPosition } from '@/scripts/scroll';
+import number from '@/filters/number';
 import { userPage, acct as getAcct } from '@/filters/user';
 import * as os from '@/os';
 import { useRouter } from '@/router';
 import { definePageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
-import { defaultStore } from '@/store';
-import 'swiper/scss';
-import 'swiper/scss/virtual';
 
 const XHome = defineAsyncComponent(() => import('./home.vue'));
 const XReactions = defineAsyncComponent(() => import('./reactions.vue'));
@@ -55,36 +43,32 @@ const XClips = defineAsyncComponent(() => import('./clips.vue'));
 const XPages = defineAsyncComponent(() => import('./pages.vue'));
 const XGallery = defineAsyncComponent(() => import('./gallery.vue'));
 
-const props = withDefaults(defineProps<{
-	acct: string;
-	page?: string;
-}>(), {
-	page: 'home',
-});
+const props = withDefaults(
+	defineProps<{
+		acct: string;
+		page?: string;
+	}>(),
+	{
+		page: 'home',
+	},
+);
 
 const router = useRouter();
 
-let tabs = ['home'];
+let tab = $ref(props.page);
 let user = $ref<null | misskey.entities.UserDetailed>(null);
-if (($i && ($i.id === user?.id)) || user?.publicReactions) {
-	tabs.push('reactions');
-}
-if ((user?.instance != null)) {
-	tabs.push('clips', 'pages', 'gallery');
-}
-let tab = $ref(tabs[0]);
-watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
-
 let error = $ref(null);
 
 function fetchUser(): void {
 	if (props.acct == null) return;
 	user = null;
-	os.api('users/show', Acct.parse(props.acct)).then(u => {
-		user = u;
-	}).catch(err => {
-		error = err;
-	});
+	os.api('users/show', Acct.parse(props.acct))
+		.then((u) => {
+			user = u;
+		})
+		.catch((err) => {
+			error = err;
+		});
 }
 
 watch(() => props.acct, fetchUser, {
@@ -93,58 +77,61 @@ watch(() => props.acct, fetchUser, {
 
 const headerActions = $computed(() => []);
 
-const headerTabs = $computed(() => user ? [{
-	key: 'home',
-	title: i18n.ts.overview,
-	icon: 'ph-house-bold ph-lg',
-}, ...($i && ($i.id === user.id)) || user.publicReactions ? [{
-	key: 'reactions',
-	title: i18n.ts.reaction,
-	icon: 'ph-smiley-bold ph-lg',
-}] : [], {
-	key: 'clips',
-	title: i18n.ts.clips,
-	icon: 'ph-paperclip-bold ph-lg',
-}, {
-	key: 'pages',
-	title: i18n.ts.pages,
-	icon: 'ph-file-text-bold ph-lg',
-}, {
-	key: 'gallery',
-	title: i18n.ts.gallery,
-	icon: 'ph-image-square-bold ph-lg',
-}] : null);
+const headerTabs = $computed(() =>
+	user
+		? [
+			{
+				key: 'home',
+				title: i18n.ts.overview,
+				icon: 'ph-user-bold ph-large',
+			},
+			...(($i && $i.id === user.id) || user.publicReactions
+				? [
+					{
+						key: 'reactions',
+						title: i18n.ts.reaction,
+						icon: 'ph-smiley-bold ph-large',
+					},
+				]
+				: []),
+			{
+				key: 'clips',
+				title: i18n.ts.clips,
+				icon: 'ph-paperclip-bold ph-large',
+			},
+			{
+				key: 'pages',
+				title: i18n.ts.pages,
+				icon: 'ph-file-text-bold ph-large',
+			},
+			{
+				key: 'gallery',
+				title: i18n.ts.gallery,
+				icon: 'ph-image-square-bold ph-large',
+			},
+		]
+		: null,
+);
 
-definePageMetadata(computed(() => user ? {
-	icon: 'ph-user-bold ph-lg',
-	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
-	subtitle: `@${getAcct(user)}`,
-	userName: user,
-	avatar: user,
-	path: `/@${user.username}`,
-	share: {
-		title: user.name,
-	},
-} : null));
-
-let swiperRef = null;
-
-function setSwiperRef(swiper) {
-	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
-}
-
-function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
-}
-
-function syncSlide(index) {
-	swiperRef.slideTo(index);
-}
-
-onMounted(() => {
-	syncSlide(tabs.indexOf(swiperRef.activeIndex));
-});
+definePageMetadata(
+	computed(() =>
+		user
+			? {
+				icon: 'fas fa-user',
+				title: user.name
+					? `${user.name} (@${user.username})`
+					: `@${user.username}`,
+				subtitle: `@${getAcct(user)}`,
+				userName: user,
+				avatar: user,
+				path: `/@${user.username}`,
+				share: {
+					title: user.name,
+				},
+			}
+			: null,
+	),
+);
 </script>
 
 <style lang="scss" scoped>

From 7ff47714e0a3acf9312f3cb269e99c02418ed30b Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 19:13:04 -0800
Subject: [PATCH 48/49] .13

---
 package.json                                 |  2 +-
 packages/client/src/pages/clip.vue           |  4 ++--
 packages/client/src/pages/user/clips.vue     | 16 +++++++++-----
 packages/client/src/pages/user/gallery.vue   | 12 +++++-----
 packages/client/src/pages/user/index.vue     | 23 ++++++++------------
 packages/client/src/pages/user/pages.vue     |  8 ++++---
 packages/client/src/pages/user/reactions.vue | 20 +++++++++--------
 7 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/package.json b/package.json
index f2b2df160..acfa0a241 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.13-rc.12",
+	"version": "12.119.0-calc.13",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index ac4d481fe..0c779914a 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -1,7 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader :actions="headerActions"/></template>
-		<MkSpacer :content-max="800">
+	<MkSpacer :content-max="800">
 		<div v-if="clip">
 			<div class="okzinsic _panel">
 				<div v-if="clip.description" class="description">
@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import { computed, watch, provide } from 'vue';
-import * as misskey from 'misskey-js';
+import type * as misskey from 'misskey-js';
 import XNotes from '@/components/MkNotes.vue';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
index 50a5d4b81..02834c741 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -1,11 +1,15 @@
 <template>
 <div>
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<MkA v-for="item in items" :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>
-		</MkA>
-	</MkPagination>
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
+			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
+				<div class="_panel">
+					<b>{{ item.name }}</b>
+					<Mfm v-if="item.description" class="description" :text="item.description"/>
+				</div>
+			</MkA>
+		</MkPagination>
+	</MkSpacer>
 </div>
 </template>
 
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index 3b6768e64..109b06ec6 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -1,10 +1,12 @@
 <template>
 <div>
-	<MkPagination v-slot="{items}" :pagination="pagination">
-		<div class="jrnovfpt">
-			<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
-		</div>
-	</MkPagination>
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{items}" :pagination="pagination">
+			<div class="jrnovfpt">
+				<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
+			</div>
+		</MkPagination>
+	</MkSpacer>
 </div>
 </template>
 
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index d9fdcbaff..cb2b70bb0 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -86,29 +86,24 @@ const headerTabs = $computed(() =>
 				icon: 'ph-user-bold ph-large',
 			},
 			...(($i && $i.id === user.id) || user.publicReactions
-				? [
-					{
-						key: 'reactions',
-						title: i18n.ts.reaction,
-						icon: 'ph-smiley-bold ph-large',
-					},
-				]
-				: []),
-			{
+				? [{
+					key: 'reactions',
+					title: i18n.ts.reaction,
+					icon: 'ph-smiley-bold ph-large',
+				}] : []),
+			...(user.instance == null ? [{
 				key: 'clips',
 				title: i18n.ts.clips,
 				icon: 'ph-paperclip-bold ph-large',
-			},
-			{
+			}, {
 				key: 'pages',
 				title: i18n.ts.pages,
 				icon: 'ph-file-text-bold ph-large',
-			},
-			{
+			}, {
 				key: 'gallery',
 				title: i18n.ts.gallery,
 				icon: 'ph-image-square-bold ph-large',
-			},
+			}] : []),
 		]
 		: null,
 );
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
index bd16c4668..d728754b2 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -1,8 +1,10 @@
 <template>
 <div>
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
-	</MkPagination>
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
+			<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
+		</MkPagination>
+	</MkSpacer>
 </div>
 </template>
 
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index 7e84e100a..01cfa2ded 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -1,15 +1,17 @@
 <template>
 <div>
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
-			<div class="header">
-				<MkAvatar class="avatar" :user="user"/>
-				<MkReactionIcon class="reaction" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
-				<MkTime :time="item.createdAt" class="createdAt"/>
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
+			<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
+				<div class="header">
+					<MkAvatar class="avatar" :user="user"/>
+					<MkReactionIcon class="reaction" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
+					<MkTime :time="item.createdAt" class="createdAt"/>
+				</div>
+				<MkNote :key="item.id" :note="item.note"/>
 			</div>
-			<MkNote :key="item.id" :note="item.note"/>
-		</div>
-	</MkPagination>
+		</MkPagination>
+	</MkSpacer>
 </div>
 </template>
 

From f1ea811a519515c8e6ddaaf95d49acc43070c261 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 14 Nov 2022 19:29:24 -0800
Subject: [PATCH 49/49] compromised revert

---
 packages/client/src/pages/explore.users.vue | 41 ++++++++++-----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 9bea45e86..8a636517d 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -1,3 +1,5 @@
+
+4.8 KiB
 <template>
 <MkSpacer :content-max="1200">
 	<MkTab v-model="origin" style="margin-bottom: var(--margin);">
@@ -6,50 +8,50 @@
 	</MkTab>
 	<div v-if="origin === 'local'">
 		<template v-if="tag == null">
-			<MkFolder v-show="thereArePinnedUsers != null && thereArePinnedUsers" class="_gap" persist-key="explore-pinned-users">
-				<template #header><i class="ph-bookmark-simple-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
+			<MkFolder class="_gap" persist-key="explore-pinned-users">
+				<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
 				<XUserList :pagination="pinnedUsers"/>
 			</MkFolder>
 			<MkFolder v-if="$i != null" class="_gap" persist-key="explore-popular-users">
-				<template #header><i class="ph-chart-line-up-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.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 v-if="$i != null" class="_gap" persist-key="explore-recently-updated-users">
-				<template #header><i class="ph-chat-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.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 v-if="$i != null" class="_gap" persist-key="explore-recently-registered-users">
-				<template #header><i class="ph-plus-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.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="ph-hash-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.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="t in tagsLocal" :key="'local:' + t.tag" :to="`/explore/tags/${t.tag}`" class="local">{{ t.tag }}</MkA>
-				<MkA v-for="t in tagsRemote" :key="'remote:' + t.tag" :to="`/explore/tags/${t.tag}`">{{ t.tag }}</MkA>
+				<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
+				<MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/explore/tags/${tag.tag}`">{{ tag.tag }}</MkA>
 			</div>
 		</MkFolder>
 
 		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
-			<template #header><i class="ph-hash-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ tag }}</template>
+			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
 			<XUserList :pagination="tagUsers"/>
 		</MkFolder>
 
-		<template v-if="tag == null">
+		<template v-if="tag == null && $i != null">
 			<MkFolder class="_gap">
-				<template #header><i class="ph-chart-line-up-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.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="ph-chat-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.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="ph-rocket-launch-bold ph-lg ph-fw ph-lg" style="margin-right: 0.5em;"></i>{{ i18n.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>
@@ -58,27 +60,24 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
+import { computed, watch } from 'vue';
 import XUserList from '@/components/MkUserList.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkTab from '@/components/MkTab.vue';
+import number from '@/filters/number';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
+import { instance } from '@/instance';
 
 const props = defineProps<{
-	tag?: string;
-}>();
+		tag?: string;
+	}>();
 
 let origin = $ref('local');
 let tagsEl = $ref<InstanceType<typeof MkFolder>>();
 let tagsLocal = $ref([]);
 let tagsRemote = $ref([]);
-let thereArePinnedUsers = $ref(false);
-
-const pinnedUsersList = await os.api('pinned-users');
-
-if (pinnedUsersList?.length > 0) { thereArePinnedUsers = true; }
 
 watch(() => props.tag, () => {
 	if (tagsEl) tagsEl.toggleContent(props.tag == null);