From b1ac2a6949382eb87f74653ae9a71bbc7b7a1f8f Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 3 Jun 2023 16:46:40 +0900
Subject: [PATCH 1/4] Add vue-tsc

---
 package.json |  3 +-
 yarn.lock    | 86 +++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a998d8266a..45dbdf5f16 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "pack": "yarn run pack:main && yarn run pack:renderer",
     "pack:main": "webpack --node-env=production --mode production --progress --config .electron-vue/webpack.main.config.js",
     "pack:renderer": "webpack --node-env=production --mode production --progress --config .electron-vue/webpack.renderer.config.js",
-    "typecheck": "tsc -p . --noEmit",
+    "typecheck": "tsc -p . --noEmit && vue-tsc --noEmit",
     "spec": "NODE_ENV=test jest -u --maxWorkers=3",
     "postinstall": "electron-builder install-app-deps",
     "thirdparty": "license-checker --production --json > thirdparty.json && node scripts/thirdparty.js"
@@ -196,6 +196,7 @@
     "vue-html-loader": "^1.2.4",
     "vue-loader": "^17.2.2",
     "vue-style-loader": "^4.1.3",
+    "vue-tsc": "^1.6.5",
     "webpack": "^5.82.1",
     "webpack-cli": "^5.1.1",
     "webpack-dev-server": "^4.15.0",
diff --git a/yarn.lock b/yarn.lock
index 76c3457d6e..0c9a29cac9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2061,6 +2061,50 @@
     "@typescript-eslint/types" "5.59.8"
     eslint-visitor-keys "^3.3.0"
 
+"@volar/language-core@1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.4.1.tgz#66b5758252e35c4e5e71197ca7fa0344d306442c"
+  integrity sha512-EIY+Swv+TjsWpxOxujjMf1ZXqOjg9MT2VMXZ+1dKva0wD8W0L6EtptFFcCJdBbcKmGMFkr57Qzz9VNMWhs3jXQ==
+  dependencies:
+    "@volar/source-map" "1.4.1"
+
+"@volar/source-map@1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-1.4.1.tgz#e3b561775c742508e5e1f28609a4787c98056715"
+  integrity sha512-bZ46ad72dsbzuOWPUtJjBXkzSQzzSejuR3CT81+GvTEI2E994D8JPXzM3tl98zyCNnjgs4OkRyliImL1dvJ5BA==
+  dependencies:
+    muggle-string "^0.2.2"
+
+"@volar/typescript@1.4.1-patch.2":
+  version "1.4.1-patch.2"
+  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-1.4.1-patch.2.tgz#89f4bd199ca81a832d86d1449b01f49f2b72137c"
+  integrity sha512-lPFYaGt8OdMEzNGJJChF40uYqMO4Z/7Q9fHPQC/NRVtht43KotSXLrkPandVVMf9aPbiJ059eAT+fwHGX16k4w==
+  dependencies:
+    "@volar/language-core" "1.4.1"
+
+"@volar/vue-language-core@1.6.5":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@volar/vue-language-core/-/vue-language-core-1.6.5.tgz#db42520f1a29737c7e40fbb3e6aead8def85ba75"
+  integrity sha512-IF2b6hW4QAxfsLd5mePmLgtkXzNi+YnH6ltCd80gb7+cbdpFMjM1I+w+nSg2kfBTyfu+W8useCZvW89kPTBpzg==
+  dependencies:
+    "@volar/language-core" "1.4.1"
+    "@volar/source-map" "1.4.1"
+    "@vue/compiler-dom" "^3.3.0"
+    "@vue/compiler-sfc" "^3.3.0"
+    "@vue/reactivity" "^3.3.0"
+    "@vue/shared" "^3.3.0"
+    minimatch "^9.0.0"
+    muggle-string "^0.2.2"
+    vue-template-compiler "^2.7.14"
+
+"@volar/vue-typescript@1.6.5":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@volar/vue-typescript/-/vue-typescript-1.6.5.tgz#6ca9bfefa5dc64ff97fcdbc74249e5e7da44e533"
+  integrity sha512-er9rVClS4PHztMUmtPMDTl+7c7JyrxweKSAEe/o/Noeq2bQx6v3/jZHVHBe8ZNUti5ubJL/+Tg8L3bzmlalV8A==
+  dependencies:
+    "@volar/typescript" "1.4.1-patch.2"
+    "@volar/vue-language-core" "1.6.5"
+
 "@vue/compiler-core@3.3.4":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.3.4.tgz#7fbf591c1c19e1acd28ffd284526e98b4f581128"
@@ -2071,7 +2115,7 @@
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
-"@vue/compiler-dom@3.3.4":
+"@vue/compiler-dom@3.3.4", "@vue/compiler-dom@^3.3.0":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz#f56e09b5f4d7dc350f981784de9713d823341151"
   integrity sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==
@@ -2079,7 +2123,7 @@
     "@vue/compiler-core" "3.3.4"
     "@vue/shared" "3.3.4"
 
-"@vue/compiler-sfc@3.3.4", "@vue/compiler-sfc@^3.3.4":
+"@vue/compiler-sfc@3.3.4", "@vue/compiler-sfc@^3.3.0", "@vue/compiler-sfc@^3.3.4":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz#b19d942c71938893535b46226d602720593001df"
   integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==
@@ -2136,7 +2180,7 @@
     estree-walker "^2.0.2"
     magic-string "^0.30.0"
 
-"@vue/reactivity@3.3.4":
+"@vue/reactivity@3.3.4", "@vue/reactivity@^3.3.0":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.3.4.tgz#a27a29c6cd17faba5a0e99fbb86ee951653e2253"
   integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==
@@ -2168,7 +2212,7 @@
     "@vue/compiler-ssr" "3.3.4"
     "@vue/shared" "3.3.4"
 
-"@vue/shared@3.3.4":
+"@vue/shared@3.3.4", "@vue/shared@^3.3.0":
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
   integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
@@ -4179,6 +4223,11 @@ dayjs@^1.11.3, dayjs@^1.11.7:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
   integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
 
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -8088,6 +8137,13 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimatch@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.1.tgz#8a555f541cf976c622daf078bb28f29fb927c253"
+  integrity sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimatch@~3.0.2:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.8.tgz#5e6a59bd11e2ab0de1cfb843eb2d82e546c321c1"
@@ -8244,6 +8300,11 @@ ms@2.1.3, ms@^2.0.0:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+muggle-string@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.2.2.tgz#786aa53fea1652c61c6a59e1f839292b262bc72a"
+  integrity sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==
+
 multicast-dns@^7.2.5:
   version "7.2.5"
   resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced"
@@ -11356,6 +11417,23 @@ vue-style-loader@^4.1.3:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-template-compiler@^2.7.14:
+  version "2.7.14"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"
+  integrity sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
+vue-tsc@^1.6.5:
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.6.5.tgz#cd18804b12087c300b6c9ee2a1da41a63f11103e"
+  integrity sha512-Wtw3J7CC+JM2OR56huRd5iKlvFWpvDiU+fO1+rqyu4V2nMTotShz4zbOZpW5g9fUOcjnyZYfBo5q5q+D/q27JA==
+  dependencies:
+    "@volar/vue-language-core" "1.6.5"
+    "@volar/vue-typescript" "1.6.5"
+    semver "^7.3.8"
+
 vue-virtual-scroller@2.0.0-beta.8:
   version "2.0.0-beta.8"
   resolved "https://registry.yarnpkg.com/vue-virtual-scroller/-/vue-virtual-scroller-2.0.0-beta.8.tgz#eeceda57e4faa5ba1763994c873923e2a956898b"

From 9fe5427dc211b7e1acdfed0e8946aa53953d1138 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 3 Jun 2023 17:33:26 +0900
Subject: [PATCH 2/4] Use i18next-vue instead of vue3-i18next

---
 package.json                                  |  2 +-
 src/renderer/App.vue                          |  6 ++--
 src/renderer/components/Login/Authorize.vue   |  6 ++--
 src/renderer/components/Login/LoginForm.vue   | 18 +++++------
 .../components/Preferences/Account.vue        |  8 ++---
 .../components/Preferences/General.vue        | 10 +++---
 .../components/Preferences/Language.vue       |  8 ++---
 .../components/Preferences/Network.vue        |  6 ++--
 .../components/Preferences/Notification.vue   |  6 ++--
 src/renderer/components/Settings/Filters.vue  | 10 +++---
 .../components/Settings/Filters/Edit.vue      |  6 ++--
 .../components/Settings/Filters/New.vue       |  6 ++--
 .../components/Settings/Filters/form.vue      | 18 +++++------
 src/renderer/components/TimelineSpace.vue     |  8 ++---
 .../components/TimelineSpace/Compose.vue      | 28 ++++++++--------
 .../TimelineSpace/Contents/Bookmarks.vue      |  8 ++---
 .../TimelineSpace/Contents/DirectMessages.vue |  6 ++--
 .../TimelineSpace/Contents/Favourites.vue     |  8 ++---
 .../TimelineSpace/Contents/FollowRequests.vue |  8 ++---
 .../TimelineSpace/Contents/Hashtag/Tag.vue    |  8 ++---
 .../TimelineSpace/Contents/Home.vue           |  6 ++--
 .../TimelineSpace/Contents/Lists/Edit.vue     |  8 ++---
 .../TimelineSpace/Contents/Lists/Index.vue    | 14 ++++----
 .../TimelineSpace/Contents/Lists/Show.vue     |  8 ++---
 .../TimelineSpace/Contents/Local.vue          |  6 ++--
 .../TimelineSpace/Contents/Notifications.vue  |  6 ++--
 .../TimelineSpace/Contents/Public.vue         |  6 ++--
 .../TimelineSpace/Contents/Search.vue         | 16 +++++-----
 .../components/TimelineSpace/HeaderMenu.vue   | 30 ++++++++---------
 .../TimelineSpace/Modals/AddListMember.vue    |  6 ++--
 .../TimelineSpace/Modals/ListMembership.vue   |  8 ++---
 .../components/molecules/Toot/Poll.vue        |  8 ++---
 src/renderer/components/organisms/Toot.vue    | 32 ++++++++-----------
 src/renderer/main.ts                          |  6 ++--
 yarn.lock                                     | 10 +++---
 35 files changed, 174 insertions(+), 180 deletions(-)

diff --git a/package.json b/package.json
index 45dbdf5f16..d2bc08fa36 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "element-plus": "^2.3.4",
     "emoji-mart-vue-fast": "^12.0.4",
     "i18next": "^22.4.15",
+    "i18next-vue": "^2.1.1",
     "megalodon": "6.0.3",
     "minimist": "^1.2.8",
     "mitt": "^3.0.0",
@@ -107,7 +108,6 @@
     "vue-resize": "^2.0.0-alpha.1",
     "vue-router": "^4.2.2",
     "vue-virtual-scroller": "2.0.0-beta.8",
-    "vue3-i18next": "^0.2.2",
     "vuex": "^4.1.0",
     "vuex-router-sync": "^6.0.0-rc.1"
   },
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index e5b11c1149..03c1723941 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, onMounted, onUnmounted } from 'vue'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/App'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
@@ -18,7 +18,7 @@ export default defineComponent({
   setup() {
     const space = 'App'
     const store = useStore()
-    const i18n = useI18next()
+    const { i18next } = useTranslation()
     const { Shift_Slash } = useMagicKeys()
     const activeElement = useActiveElement()
 
@@ -43,7 +43,7 @@ export default defineComponent({
     onMounted(() => {
       store.dispatch(`${space}/${ACTION_TYPES.WATCH_SHORTCUT_EVENTS}`)
       store.dispatch(`${space}/${ACTION_TYPES.LOAD_PREFERENCES}`).then(conf => {
-        i18n.changeLanguage(conf.language.language)
+        i18next.changeLanguage(conf.language.language)
       })
     })
     onUnmounted(() => {
diff --git a/src/renderer/components/Login/Authorize.vue b/src/renderer/components/Login/Authorize.vue
index e5607aa6e7..f22f6ae51d 100644
--- a/src/renderer/components/Login/Authorize.vue
+++ b/src/renderer/components/Login/Authorize.vue
@@ -39,7 +39,7 @@
 <script lang="ts">
 import { defineComponent, ref, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { ElMessage } from 'element-plus'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { MyWindow } from '~/src/types/global'
@@ -51,7 +51,7 @@ export default defineComponent({
     const win = (window as any) as MyWindow
     const router = useRouter()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { escape } = useMagicKeys()
 
     const authorizeForm = reactive({
@@ -81,7 +81,7 @@ export default defineComponent({
       } catch (err) {
         console.error(err)
         ElMessage({
-          message: i18n.t('message.authorize_error'),
+          message: t('message.authorize_error'),
           type: 'error'
         })
       } finally {
diff --git a/src/renderer/components/Login/LoginForm.vue b/src/renderer/components/Login/LoginForm.vue
index d7de59e77e..a14cc5e4b8 100644
--- a/src/renderer/components/Login/LoginForm.vue
+++ b/src/renderer/components/Login/LoginForm.vue
@@ -38,7 +38,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, reactive, ref } from 'vue'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { ElLoading, ElMessage, FormInstance, FormRules } from 'element-plus'
 import { domainFormat } from '@/utils/validator'
 import { detector, OAuth } from 'megalodon'
@@ -49,7 +49,7 @@ import { LocalServer } from '~/src/types/localServer'
 export default defineComponent({
   name: 'login-form',
   setup() {
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const router = useRouter()
     const win = (window as any) as MyWindow
 
@@ -67,12 +67,12 @@ export default defineComponent({
         {
           type: 'string',
           required: true,
-          message: i18n.t('validation.login.require_domain_name')
+          message: t('validation.login.require_domain_name')
         },
         {
           pattern: domainFormat,
           trigger: 'change',
-          message: i18n.t('validation.login.domain_format')
+          message: t('validation.login.domain_format')
         }
       ]
     })
@@ -80,7 +80,7 @@ export default defineComponent({
     const login = async () => {
       const loading = ElLoading.service({
         lock: true,
-        text: i18n.t('message.loading'),
+        text: t('message.loading'),
         background: 'rgba(0, 0, 0, 0.7)'
       })
       try {
@@ -100,7 +100,7 @@ export default defineComponent({
         })
       } catch (err) {
         ElMessage({
-          message: i18n.t('message.authorize_url_error'),
+          message: t('message.authorize_url_error'),
           type: 'error'
         })
         console.error(err)
@@ -119,7 +119,7 @@ export default defineComponent({
             sns.value = await detector(`https://${cleanDomain}`)
             domain.value = cleanDomain
             ElMessage({
-              message: i18n.t('message.domain_confirmed', {
+              message: t('message.domain_confirmed', {
                 domain: cleanDomain
               }),
               type: 'success'
@@ -127,7 +127,7 @@ export default defineComponent({
           } catch (err) {
             console.error(err)
             ElMessage({
-              message: i18n.t('message.domain_doesnt_exist', {
+              message: t('message.domain_doesnt_exist', {
                 domain: form.domainName
               }),
               type: 'error'
@@ -138,7 +138,7 @@ export default defineComponent({
           return true
         } else {
           ElMessage({
-            message: i18n.t('validation.login.domain_format'),
+            message: t('validation.login.domain_format'),
             type: 'error'
           })
           return false
diff --git a/src/renderer/components/Preferences/Account.vue b/src/renderer/components/Preferences/Account.vue
index ae0b9f2c3b..88e2917f46 100644
--- a/src/renderer/components/Preferences/Account.vue
+++ b/src/renderer/components/Preferences/Account.vue
@@ -83,7 +83,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, onMounted } from 'vue'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useRouter } from 'vue-router'
 import { useStore } from '@/store'
 import { ACTION_TYPES, MUTATION_TYPES } from '@/store/Preferences/Account'
@@ -94,7 +94,7 @@ export default defineComponent({
   setup() {
     const space = 'Preferences/Account'
     const store = useStore()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const router = useRouter()
 
     const accounts = computed(() =>
@@ -117,7 +117,7 @@ export default defineComponent({
         await store.dispatch(`${space}/${ACTION_TYPES.LOAD_ACCOUNTS}`)
       } catch (err) {
         ElMessage({
-          message: i18n.t('message.account_load_error'),
+          message: t('message.account_load_error'),
           type: 'error'
         })
       } finally {
@@ -133,7 +133,7 @@ export default defineComponent({
         })
         .catch(() => {
           ElMessage({
-            message: i18n.t('message.account_remove_error'),
+            message: t('message.account_remove_error'),
             type: 'error'
           })
         })
diff --git a/src/renderer/components/Preferences/General.vue b/src/renderer/components/Preferences/General.vue
index ce348cff89..ee23450a59 100644
--- a/src/renderer/components/Preferences/General.vue
+++ b/src/renderer/components/Preferences/General.vue
@@ -46,7 +46,7 @@
 <script lang="ts">
 import { defineComponent, computed, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/Preferences/General'
 
@@ -55,7 +55,7 @@ export default defineComponent({
   setup() {
     const space = 'Preferences/General'
     const store = useStore()
-    const i18n = useI18next()
+    const { t, i18next } = useTranslation()
 
     const loading = computed(() => store.state.Preferences.General.loading)
     const backgroundColor = computed(() => store.state.App.theme.background_color)
@@ -113,7 +113,7 @@ export default defineComponent({
     onMounted(() => {
       store.dispatch(`${space}/${ACTION_TYPES.LOAD_GENERAL}`).catch(() => {
         ElMessage({
-          message: i18n.t('message.preferences_load_error'),
+          message: t('message.preferences_load_error'),
           type: 'error'
         })
       })
@@ -123,11 +123,11 @@ export default defineComponent({
       store
         .dispatch(`${space}/${ACTION_TYPES.RESET}`)
         .then(language => {
-          i18n.changeLanguage(language)
+          i18next.changeLanguage(language)
         })
         .catch(() => {
           ElMessage({
-            message: i18n.t('message.preferences_load_error'),
+            message: t('message.preferences_load_error'),
             type: 'error'
           })
         })
diff --git a/src/renderer/components/Preferences/Language.vue b/src/renderer/components/Preferences/Language.vue
index 697632b245..d71fd06718 100644
--- a/src/renderer/components/Preferences/Language.vue
+++ b/src/renderer/components/Preferences/Language.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, onMounted } from 'vue'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { ElMessage } from 'element-plus'
 import { useStore } from '@/store'
 import Language from '~/src/constants/language'
@@ -43,7 +43,7 @@ export default defineComponent({
   setup() {
     const space = 'Preferences/Language'
     const store = useStore()
-    const i18n = useI18next()
+    const { t, i18next } = useTranslation()
 
     const languages = [
       Language.cs,
@@ -75,7 +75,7 @@ export default defineComponent({
       get: () => store.state.Preferences.Language.language.language,
       set: (value: string) =>
         store.dispatch(`${space}/${ACTION_TYPES.CHANGE_LANGUAGE}`, value).then(key => {
-          i18n.changeLanguage(key)
+          i18next.changeLanguage(key)
         })
     })
 
@@ -89,7 +89,7 @@ export default defineComponent({
       set: (value: Array<string>) =>
         store.dispatch('Preferences/Language/updateSpellcheckerLanguages', value).catch(() => {
           ElMessage({
-            message: i18n.t('message.language_not_support_spellchecker_error'),
+            message: t('message.language_not_support_spellchecker_error'),
             type: 'error'
           })
         })
diff --git a/src/renderer/components/Preferences/Network.vue b/src/renderer/components/Preferences/Network.vue
index 60c748a196..dd99bc5cfe 100644
--- a/src/renderer/components/Preferences/Network.vue
+++ b/src/renderer/components/Preferences/Network.vue
@@ -43,7 +43,7 @@
 <script lang="ts">
 import { defineComponent, computed, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/Preferences/Network'
 
@@ -52,7 +52,7 @@ export default defineComponent({
   setup() {
     const space = 'Preferences/Network'
     const store = useStore()
-    const i18n = useI18next()
+    const { t } = useTranslation()
 
     const manualProxyConfiguration = computed(() => store.getters[`${space}/manualProxyConfiguration`])
     const source = computed({
@@ -83,7 +83,7 @@ export default defineComponent({
     onMounted(() => {
       store.dispatch(`${space}/${ACTION_TYPES.LOAD_PROXY}`).catch(() => {
         ElMessage({
-          message: i18n.t('message.preferences_load_error'),
+          message: t('message.preferences_load_error'),
           type: 'error'
         })
       })
diff --git a/src/renderer/components/Preferences/Notification.vue b/src/renderer/components/Preferences/Notification.vue
index 1546e25516..2677184c10 100644
--- a/src/renderer/components/Preferences/Notification.vue
+++ b/src/renderer/components/Preferences/Notification.vue
@@ -39,7 +39,7 @@
 <script lang="ts">
 import { defineComponent, computed, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/Preferences/Notification'
 
@@ -48,7 +48,7 @@ export default defineComponent({
   setup() {
     const space = 'Preferences/Notification'
     const store = useStore()
-    const i18n = useI18next()
+    const { t } = useTranslation()
 
     const notifyReply = computed({
       get: () => store.state.Preferences.Notification.notification.notify.reply,
@@ -117,7 +117,7 @@ export default defineComponent({
     onMounted(() => {
       store.dispatch(`${space}/${ACTION_TYPES.LOAD_NOTIFICATION}`).catch(() => {
         ElMessage({
-          message: i18n.t('message.preferences_load_error'),
+          message: t('message.preferences_load_error'),
           type: 'error'
         })
       })
diff --git a/src/renderer/components/Settings/Filters.vue b/src/renderer/components/Settings/Filters.vue
index 013f84e482..876cfa7d47 100644
--- a/src/renderer/components/Settings/Filters.vue
+++ b/src/renderer/components/Settings/Filters.vue
@@ -47,7 +47,7 @@
 import { defineComponent, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/Settings/Filters'
 
@@ -57,7 +57,7 @@ export default defineComponent({
     const space = 'Settings/Filters'
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
 
     const filters = computed(() => store.state.Settings.Filters.filters)
     const filtersLoading = computed(() => store.state.Settings.Filters.filtersLoading)
@@ -70,9 +70,9 @@ export default defineComponent({
     })
 
     const deleteFilter = (id: string) => {
-      ElMessageBox.confirm(i18n.t('settings.filters.delete.confirm'), 'Warning', {
-        confirmButtonText: i18n.t('settings.filters.delete.confirm_ok'),
-        cancelButtonText: i18n.t('settings.filters.delete.confirm_cancel'),
+      ElMessageBox.confirm(t('settings.filters.delete.confirm'), 'Warning', {
+        confirmButtonText: t('settings.filters.delete.confirm_ok'),
+        cancelButtonText: t('settings.filters.delete.confirm_cancel'),
         type: 'warning'
       }).then(() => {
         return store.dispatch(`${space}/${ACTION_TYPES.DELETE_FILTER}`, id)
diff --git a/src/renderer/components/Settings/Filters/Edit.vue b/src/renderer/components/Settings/Filters/Edit.vue
index fbabc851de..5cf2170cd7 100644
--- a/src/renderer/components/Settings/Filters/Edit.vue
+++ b/src/renderer/components/Settings/Filters/Edit.vue
@@ -10,7 +10,7 @@ import { defineComponent, computed, onMounted, toRefs } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useStore } from '@/store'
 import { useRouter } from 'vue-router'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import FilterForm from './form.vue'
 import { ACTION_TYPES } from '@/store/Settings/Filters/Edit'
 
@@ -22,7 +22,7 @@ export default defineComponent({
     const space = 'Settings/Filters/Edit'
     const store = useStore()
     const router = useRouter()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { filter_id } = toRefs(props)
 
     const loading = computed(() => store.state.Settings.Filters.Edit.loading)
@@ -46,7 +46,7 @@ export default defineComponent({
         .catch(err => {
           console.error(err)
           ElMessage({
-            message: i18n.t('message.update_filter_error'),
+            message: t('message.update_filter_error'),
             type: 'error'
           })
         })
diff --git a/src/renderer/components/Settings/Filters/New.vue b/src/renderer/components/Settings/Filters/New.vue
index 3bd24d7737..f1a873dbfa 100644
--- a/src/renderer/components/Settings/Filters/New.vue
+++ b/src/renderer/components/Settings/Filters/New.vue
@@ -9,7 +9,7 @@
 import { defineComponent, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useStore } from '@/store'
 import FilterForm from './form.vue'
 import { ACTION_TYPES } from '@/store/Settings/Filters/New'
@@ -21,7 +21,7 @@ export default defineComponent({
     const space = 'Settings/Filters/New'
     const store = useStore()
     const router = useRouter()
-    const i18n = useI18next()
+    const { t } = useTranslation()
 
     const loading = computed(() => store.state.Settings.Filters.New.loading)
     const sns = computed(() => store.state.TimelineSpace.sns)
@@ -40,7 +40,7 @@ export default defineComponent({
         .catch(err => {
           console.error(err)
           ElMessage({
-            message: i18n.t('message.create_filter_error'),
+            message: t('message.create_filter_error'),
             type: 'error'
           })
         })
diff --git a/src/renderer/components/Settings/Filters/form.vue b/src/renderer/components/Settings/Filters/form.vue
index 202b6d745f..f29b1f5aed 100644
--- a/src/renderer/components/Settings/Filters/form.vue
+++ b/src/renderer/components/Settings/Filters/form.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, toRefs, PropType } from 'vue'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { Entity } from 'megalodon'
 
 export default defineComponent({
@@ -52,36 +52,36 @@ export default defineComponent({
     }
   },
   setup(props, ctx) {
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { modelValue, sns } = toRefs(props)
 
     const expires = [
       {
-        label: i18n.t('settings.filters.expires.never'),
+        label: t('settings.filters.expires.never'),
         value: null
       },
       {
-        label: i18n.t('settings.filters.expires.30_minutes'),
+        label: t('settings.filters.expires.30_minutes'),
         value: 60 * 30
       },
       {
-        label: i18n.t('settings.filters.expires.1_hour'),
+        label: t('settings.filters.expires.1_hour'),
         value: 3600
       },
       {
-        label: i18n.t('settings.filters.expires.6_hours'),
+        label: t('settings.filters.expires.6_hours'),
         value: 3600 * 6
       },
       {
-        label: i18n.t('settings.filters.expires.12_hours'),
+        label: t('settings.filters.expires.12_hours'),
         value: 3600 * 12
       },
       {
-        label: i18n.t('settings.filters.expires.1_day'),
+        label: t('settings.filters.expires.1_day'),
         value: 3600 * 24
       },
       {
-        label: i18n.t('settings.filters.expires.1_week'),
+        label: t('settings.filters.expires.1_week'),
         value: 3600 * 24 * 7
       }
     ]
diff --git a/src/renderer/components/TimelineSpace.vue b/src/renderer/components/TimelineSpace.vue
index 8c63fca386..8b72d9ff8e 100644
--- a/src/renderer/components/TimelineSpace.vue
+++ b/src/renderer/components/TimelineSpace.vue
@@ -24,7 +24,7 @@
 import { defineComponent, computed, ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import SideMenu from './TimelineSpace/SideMenu.vue'
 import HeaderMenu from './TimelineSpace/HeaderMenu.vue'
 import Contents from './TimelineSpace/Contents.vue'
@@ -46,7 +46,7 @@ export default defineComponent({
     const space = 'TimelineSpace'
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
 
     const contentsRef = ref<HTMLElement | null>(null)
 
@@ -77,12 +77,12 @@ export default defineComponent({
       } catch (err) {
         if (err instanceof AccountLoadError) {
           ElMessage({
-            message: i18n.t('message.account_load_error'),
+            message: t('message.account_load_error'),
             type: 'error'
           })
         } else if (err instanceof TimelineFetchError) {
           ElMessage({
-            message: i18n.t('message.timeline_fetch_error'),
+            message: t('message.timeline_fetch_error'),
             type: 'error'
           })
         }
diff --git a/src/renderer/components/TimelineSpace/Compose.vue b/src/renderer/components/TimelineSpace/Compose.vue
index 79132f5357..bc059ce7d4 100644
--- a/src/renderer/components/TimelineSpace/Compose.vue
+++ b/src/renderer/components/TimelineSpace/Compose.vue
@@ -135,7 +135,7 @@ import { useRoute } from 'vue-router'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import emojiDefault from 'emoji-mart-vue-fast/data/all.json'
 import { Picker, EmojiIndex, EmojiData } from 'emoji-mart-vue-fast/src'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { ElMessage } from 'element-plus'
 import { useStore } from '@/store'
 import { MyWindow } from '~/src/types/global'
@@ -166,7 +166,7 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const store = useStore()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { up, down, enter, Ctrl_Enter, escape } = useMagicKeys({
       passive: false,
       onEventFired(e) {
@@ -197,31 +197,31 @@ export default defineComponent({
     })
     const expiresList = reactive<Array<Expire>>([
       {
-        label: i18n.t('compose.poll.expires.5_minutes'),
+        label: t('compose.poll.expires.5_minutes'),
         value: 60 * 5
       },
       {
-        label: i18n.t('compose.poll.expires.30_minutes'),
+        label: t('compose.poll.expires.30_minutes'),
         value: 60 * 30
       },
       {
-        label: i18n.t('compose.poll.expires.1_hour'),
+        label: t('compose.poll.expires.1_hour'),
         value: 3600
       },
       {
-        label: i18n.t('compose.poll.expires.6_hours'),
+        label: t('compose.poll.expires.6_hours'),
         value: 3600 * 6
       },
       {
-        label: i18n.t('compose.poll.expires.1_day'),
+        label: t('compose.poll.expires.1_day'),
         value: 3600 * 24
       },
       {
-        label: i18n.t('compose.poll.expires.3_days'),
+        label: t('compose.poll.expires.3_days'),
         value: 3600 * 24 * 3
       },
       {
-        label: i18n.t('compose.poll.expires.7_days'),
+        label: t('compose.poll.expires.7_days'),
         value: 3600 * 24 * 7
       }
     ])
@@ -345,7 +345,7 @@ export default defineComponent({
       // Validation
       if (form.status.length < 1 || form.status.length + form.spoiler.length > maxStatusChars.value) {
         ElMessage({
-          message: i18n.t('validation.compose.toot_length', {
+          message: t('validation.compose.toot_length', {
             min: 1,
             max: maxStatusChars.value
           }),
@@ -355,7 +355,7 @@ export default defineComponent({
       }
       if (attachments.value.length > 4) {
         ElMessage({
-          message: i18n.t('validation.compose.attach_length', {
+          message: t('validation.compose.attach_length', {
             max: 4
           }),
           type: 'error'
@@ -369,7 +369,7 @@ export default defineComponent({
             mes = [
               ...mes,
               {
-                message: i18n.t('validation.compose.poll_invalid'),
+                message: t('validation.compose.poll_invalid'),
                 type: 'error'
               }
             ]
@@ -514,7 +514,7 @@ export default defineComponent({
       const file = e.dataTransfer?.files.item(0)
       if (file === null || (!file.type.includes('image') && !file.type.includes('video'))) {
         ElMessage({
-          message: i18n.t('validation.compose.attach_image'),
+          message: t('validation.compose.attach_image'),
           type: 'error'
         })
         return false
@@ -522,7 +522,7 @@ export default defineComponent({
       uploadImage(file).catch(err => {
         console.error(err)
         ElMessage({
-          message: i18n.t('message.attach_error'),
+          message: t('message.attach_error'),
           type: 'error'
         })
       })
diff --git a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue b/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
index 0d943af02f..b69e48604b 100644
--- a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
@@ -26,7 +26,7 @@ import { computed, defineComponent, onMounted, ref, watch, reactive } from 'vue'
 import { logicAnd } from '@vueuse/math'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import parse from 'parse-link-header'
@@ -44,7 +44,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
 
     const focusedId = ref<string | null>(null)
     const heading = ref<boolean>(true)
@@ -95,7 +95,7 @@ export default defineComponent({
       } catch (err) {
         console.error(err)
         ElMessage({
-          message: i18n.t('message.bookmark_fetch_error'),
+          message: t('message.bookmark_fetch_error'),
           type: 'error'
         })
       } finally {
@@ -149,7 +149,7 @@ export default defineComponent({
           .catch(err => {
             console.error(err)
             ElMessage({
-              message: i18n.t('message.bookmark_fetch_error'),
+              message: t('message.bookmark_fetch_error'),
               type: 'error'
             })
           })
diff --git a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
index cbf2c773bd..def43de5f7 100644
--- a/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
+++ b/src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
@@ -26,7 +26,7 @@ import { defineComponent, ref, computed, onMounted, onBeforeUpdate, watch, react
 import { logicAnd } from '@vueuse/math'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Entity } from 'megalodon'
@@ -44,7 +44,7 @@ export default defineComponent({
     const space = 'TimelineSpace/Contents/DirectMessages'
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { j, k } = useMagicKeys()
     const activeElement = useActiveElement()
 
@@ -114,7 +114,7 @@ export default defineComponent({
           })
           .catch(() => {
             ElMessage({
-              message: i18n.t('message.timeline_fetch_error'),
+              message: t('message.timeline_fetch_error'),
               type: 'error'
             })
           })
diff --git a/src/renderer/components/TimelineSpace/Contents/Favourites.vue b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
index 57e607532b..27fbc04dab 100644
--- a/src/renderer/components/TimelineSpace/Contents/Favourites.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@@ -28,7 +28,7 @@ import { logicAnd } from '@vueuse/math'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
 import { ElMessage } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import parse from 'parse-link-header'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import Toot from '@/components/organisms/Toot.vue'
@@ -45,7 +45,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
 
     const focusedId = ref<string | null>(null)
     const scroller = ref<any>()
@@ -95,7 +95,7 @@ export default defineComponent({
       } catch (err) {
         console.error(err)
         ElMessage({
-          message: i18n.t('message.favourite_fetch_error'),
+          message: t('message.favourite_fetch_error'),
           type: 'error'
         })
       } finally {
@@ -157,7 +157,7 @@ export default defineComponent({
           .catch(err => {
             console.error(err)
             ElMessage({
-              message: i18n.t('message.favourite_fetch_error'),
+              message: t('message.favourite_fetch_error'),
               type: 'error'
             })
           })
diff --git a/src/renderer/components/TimelineSpace/Contents/FollowRequests.vue b/src/renderer/components/TimelineSpace/Contents/FollowRequests.vue
index a726abd38a..8de59a8c5b 100644
--- a/src/renderer/components/TimelineSpace/Contents/FollowRequests.vue
+++ b/src/renderer/components/TimelineSpace/Contents/FollowRequests.vue
@@ -9,7 +9,7 @@
 <script lang="ts">
 import { defineComponent, computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useStore } from '@/store'
 import User from '@/components/molecules/User.vue'
@@ -24,7 +24,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
 
     const win = (window as any) as MyWindow
     const id = computed(() => parseInt(route.params.id as string))
@@ -62,7 +62,7 @@ export default defineComponent({
         .catch(err => {
           console.error(err)
           ElMessage({
-            message: i18n.t('message.follow_request_accept_error'),
+            message: t('message.follow_request_accept_error'),
             type: 'error'
           })
         })
@@ -78,7 +78,7 @@ export default defineComponent({
         .catch(err => {
           console.error(err)
           ElMessage({
-            message: i18n.t('message.follow_request_reject_error'),
+            message: t('message.follow_request_reject_error'),
             type: 'error'
           })
         })
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
index 53247dc78c..647298a3a4 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
@@ -28,7 +28,7 @@ import { logicAnd } from '@vueuse/math'
 import { useMagicKeys, whenever, useActiveElement } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useRoute } from 'vue-router'
 import { useStore } from '@/store'
 import Toot from '@/components/organisms/Toot.vue'
@@ -44,7 +44,7 @@ export default defineComponent({
   setup(props) {
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { j, k, Ctrl_r, Cmd_r } = useMagicKeys()
     const activeElement = useActiveElement()
 
@@ -135,7 +135,7 @@ export default defineComponent({
       } catch (err) {
         console.error(err)
         ElMessage({
-          message: i18n.t('message.timeline_fetch_error'),
+          message: t('message.timeline_fetch_error'),
           type: 'error'
         })
       }
@@ -174,7 +174,7 @@ export default defineComponent({
           })
           .catch(() => {
             ElMessage({
-              message: i18n.t('message.timeline_fetch_error'),
+              message: t('message.timeline_fetch_error'),
               type: 'error'
             })
           })
diff --git a/src/renderer/components/TimelineSpace/Contents/Home.vue b/src/renderer/components/TimelineSpace/Contents/Home.vue
index d73284de65..5e7c521de7 100644
--- a/src/renderer/components/TimelineSpace/Contents/Home.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Home.vue
@@ -34,7 +34,7 @@ import { logicAnd } from '@vueuse/math'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import { Entity } from 'megalodon'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useRoute } from 'vue-router'
 import { useStore } from '@/store'
 import Toot from '@/components/organisms/Toot.vue'
@@ -52,7 +52,7 @@ export default defineComponent({
     const space = 'TimelineSpace/Contents/Home'
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { j, k } = useMagicKeys()
     const activeElement = useActiveElement()
 
@@ -162,7 +162,7 @@ export default defineComponent({
           })
           .catch(() => {
             ElMessage({
-              message: i18n.t('message.timeline_fetch_error'),
+              message: t('message.timeline_fetch_error'),
               type: 'error'
             })
           })
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
index 35cf127d0f..9d7ff66bda 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
@@ -14,7 +14,7 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, toRefs, ref, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useStore } from '@/store'
 import User from '@/components/molecules/User.vue'
@@ -35,7 +35,7 @@ export default defineComponent({
     const { list_id } = toRefs(props)
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
 
     const win = (window as any) as MyWindow
     const id = computed(() => parseInt(route.params.id as string))
@@ -66,7 +66,7 @@ export default defineComponent({
       } catch (err) {
         console.error(err)
         ElMessage({
-          message: i18n.t('message.members_fetch_error'),
+          message: t('message.members_fetch_error'),
           type: 'error'
         })
       }
@@ -79,7 +79,7 @@ export default defineComponent({
         await load()
       } catch (err) {
         ElMessage({
-          message: i18n.t('message.remove_user_error'),
+          message: t('message.remove_user_error'),
           type: 'error'
         })
       }
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
index b1a9a68029..47fb5ae4ad 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
@@ -29,7 +29,7 @@
 import { computed, defineComponent, onMounted, ref, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from '@/store'
 import { LocalAccount } from '~/src/types/localAccount'
@@ -42,7 +42,7 @@ export default defineComponent({
     const store = useStore()
     const route = useRoute()
     const router = useRouter()
-    const i18n = useI18next()
+    const { t } = useTranslation()
 
     const title = ref<string>('')
     const loading = ref<boolean>(false)
@@ -77,7 +77,7 @@ export default defineComponent({
       } catch (err) {
         console.error(err)
         ElMessage({
-          message: i18n.t('message.lists_fetch_error'),
+          message: t('message.lists_fetch_error'),
           type: 'error'
         })
       }
@@ -92,7 +92,7 @@ export default defineComponent({
       } catch (err) {
         console.error(err)
         ElMessage({
-          message: i18n.t('message.list_create_error'),
+          message: t('message.list_create_error'),
           type: 'error'
         })
       } finally {
@@ -103,9 +103,9 @@ export default defineComponent({
       return router.push(`/${id.value}/lists/${list.id}/edit`)
     }
     const del = (list: Entity.List) => {
-      ElMessageBox.confirm(i18n.t('lists.index.delete.confirm.message'), i18n.t('lists.index.delete.confirm.title'), {
-        confirmButtonText: i18n.t('lists.index.delete.confirm.ok'),
-        cancelButtonText: i18n.t('lists.index.delete.confirm.cancel'),
+      ElMessageBox.confirm(t('lists.index.delete.confirm.message'), t('lists.index.delete.confirm.title'), {
+        confirmButtonText: t('lists.index.delete.confirm.ok'),
+        cancelButtonText: t('lists.index.delete.confirm.cancel'),
         type: 'warning'
       }).then(async () => {
         if (!client.value) return
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
index 83df7f387b..86b932b1f3 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
@@ -27,7 +27,7 @@ import { defineComponent, toRefs, ref, computed, onMounted, watch, onUnmounted,
 import { logicAnd } from '@vueuse/math'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useStore } from '@/store'
 import Toot from '@/components/organisms/Toot.vue'
@@ -44,7 +44,7 @@ export default defineComponent({
   setup(props) {
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { j, k, Ctrl_r, Cmd_r } = useMagicKeys()
     const activeElement = useActiveElement()
 
@@ -141,7 +141,7 @@ export default defineComponent({
       } catch (err) {
         console.error(err)
         ElMessage({
-          message: i18n.t('message.timeline_fetch_error'),
+          message: t('message.timeline_fetch_error'),
           type: 'error'
         })
       }
@@ -171,7 +171,7 @@ export default defineComponent({
           ?.getListTimeline(list_id.value, { max_id: lastStatus.id, limit: 20 })
           .catch(() => {
             ElMessage({
-              message: i18n.t('message.timeline_fetch_error'),
+              message: t('message.timeline_fetch_error'),
               type: 'error'
             })
           })
diff --git a/src/renderer/components/TimelineSpace/Contents/Local.vue b/src/renderer/components/TimelineSpace/Contents/Local.vue
index 08914296ac..903ff8b94e 100644
--- a/src/renderer/components/TimelineSpace/Contents/Local.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Local.vue
@@ -27,7 +27,7 @@ import { logicAnd } from '@vueuse/math'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import { Entity } from 'megalodon'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useRoute } from 'vue-router'
 import { useStore } from '@/store'
 import Toot from '@/components/organisms/Toot.vue'
@@ -44,7 +44,7 @@ export default defineComponent({
     const space = 'TimelineSpace/Contents/Local'
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { j, k } = useMagicKeys()
     const activeElement = useActiveElement()
 
@@ -122,7 +122,7 @@ export default defineComponent({
           })
           .catch(() => {
             ElMessage({
-              message: i18n.t('message.timeline_fetch_error'),
+              message: t('message.timeline_fetch_error'),
               type: 'error'
             })
           })
diff --git a/src/renderer/components/TimelineSpace/Contents/Notifications.vue b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
index 2ce05d0537..d96ef5a826 100644
--- a/src/renderer/components/TimelineSpace/Contents/Notifications.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Notifications.vue
@@ -37,7 +37,7 @@ import Notification from '@/components/organisms/Notification.vue'
 import StatusLoading from '@/components/organisms/StatusLoading.vue'
 import { useStore } from '@/store'
 import { useRoute } from 'vue-router'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/Notifications'
 import { MUTATION_TYPES as SIDE_MENU_MUTATION } from '@/store/TimelineSpace/SideMenu'
 import { LocalAccount } from '~/src/types/localAccount'
@@ -52,7 +52,7 @@ export default defineComponent({
     const space = 'TimelineSpace/Contents/Notifications'
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { j, k } = useMagicKeys()
     const activeElement = useActiveElement()
 
@@ -146,7 +146,7 @@ export default defineComponent({
           })
           .catch(() => {
             ElMessage({
-              message: i18n.t('message.notification_fetch_error'),
+              message: t('message.notification_fetch_error'),
               type: 'error'
             })
           })
diff --git a/src/renderer/components/TimelineSpace/Contents/Public.vue b/src/renderer/components/TimelineSpace/Contents/Public.vue
index 8bdf4d5060..9b4941770f 100644
--- a/src/renderer/components/TimelineSpace/Contents/Public.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Public.vue
@@ -28,7 +28,7 @@ import { logicAnd } from '@vueuse/math'
 import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useRoute } from 'vue-router'
 import { useStore } from '@/store'
 import Toot from '@/components/organisms/Toot.vue'
@@ -44,7 +44,7 @@ export default defineComponent({
     const space = 'TimelineSpace/Contents/Public'
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { j, k } = useMagicKeys()
     const activeElement = useActiveElement()
 
@@ -145,7 +145,7 @@ export default defineComponent({
           .catch(err => {
             console.error(err)
             ElMessage({
-              message: i18n.t('message.timeline_fetch_error'),
+              message: t('message.timeline_fetch_error'),
               type: 'error'
             })
           })
diff --git a/src/renderer/components/TimelineSpace/Contents/Search.vue b/src/renderer/components/TimelineSpace/Contents/Search.vue
index b64d5e272f..a01b553893 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search.vue
@@ -20,7 +20,7 @@
 <script lang="ts">
 import { defineComponent, ref, onMounted, computed, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import generator, { MegalodonInterface, Entity } from 'megalodon'
 import { useStore } from '@/store'
 import SearchAccount from './Search/Account.vue'
@@ -36,7 +36,7 @@ export default defineComponent({
   components: { SearchAccount, SearchTag, SearchToots },
   setup() {
     const store = useStore()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const route = useRoute()
 
     const win = (window as any) as MyWindow
@@ -52,15 +52,15 @@ export default defineComponent({
     const searchTargets = [
       {
         target: 'account',
-        label: i18n.t('search.account')
+        label: t('search.account')
       },
       {
         target: 'tag',
-        label: i18n.t('search.tag')
+        label: t('search.tag')
       },
       {
         target: 'toot',
-        label: i18n.t('search.toot')
+        label: t('search.toot')
       }
     ]
     const userAgent = computed(() => store.state.App.userAgent)
@@ -94,7 +94,7 @@ export default defineComponent({
             .catch(err => {
               console.error(err)
               ElMessage({
-                message: i18n.t('message.search_error'),
+                message: t('message.search_error'),
                 type: 'error'
               })
             })
@@ -108,7 +108,7 @@ export default defineComponent({
             .catch(err => {
               console.error(err)
               ElMessage({
-                message: i18n.t('message.search_error'),
+                message: t('message.search_error'),
                 type: 'error'
               })
             })
@@ -122,7 +122,7 @@ export default defineComponent({
             .catch(err => {
               console.error(err)
               ElMessage({
-                message: i18n.t('message.search_error'),
+                message: t('message.search_error'),
                 type: 'error'
               })
             })
diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
index c76dcff7bc..d0a2dac58a 100644
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -15,7 +15,7 @@
 <script lang="ts">
 import { defineComponent, computed, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/HeaderMenu'
 
@@ -25,7 +25,7 @@ export default defineComponent({
     const space = 'TimelineSpace/HeaderMenu'
     const store = useStore()
     const route = useRoute()
-    const i18n = useI18next()
+    const { t } = useTranslation()
 
     const title = computed(() => store.state.TimelineSpace.HeaderMenu.title)
     const loading = computed(() => store.state.TimelineSpace.HeaderMenu.loading)
@@ -43,50 +43,50 @@ export default defineComponent({
     const channelName = () => {
       switch (route.name) {
         case 'home':
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.home'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.home'))
           break
         case 'notifications':
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.notification'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.notification'))
           break
         case 'favourites':
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.favourite'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.favourite'))
           break
         case 'bookmarks':
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.bookmark'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.bookmark'))
           break
         case 'follow-requests':
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.follow_requests'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.follow_requests'))
           break
         case 'local':
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.local'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.local'))
           break
         case 'public':
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.public'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.public'))
           break
         case 'hashtag-list':
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.hashtag'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.hashtag'))
           break
         case 'tag':
           store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, `#${route.params.tag}`)
           break
         case 'search':
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.search'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.search'))
           break
         case 'lists':
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.lists'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.lists'))
           break
         case 'direct-messages':
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.direct_messages'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.direct_messages'))
           break
         case 'edit-list':
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.members'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.members'))
           break
         case 'list':
           store.dispatch(`${space}/${ACTION_TYPES.FETCH_LIST}`, route.params.list_id)
           break
         default:
           console.debug(route)
-          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.home'))
+          store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, t('header_menu.home'))
           break
       }
     }
diff --git a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
index 96f3695423..c3f47babbc 100644
--- a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
+++ b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
@@ -37,7 +37,7 @@
 import { defineComponent, computed, ref } from 'vue'
 import { Entity } from 'megalodon'
 import { ElMessage } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/AddListMember'
@@ -47,7 +47,7 @@ export default defineComponent({
   setup() {
     const space = 'TimelineSpace/Modals/AddListMember'
     const store = useStore()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { enter } = useMagicKeys()
 
     const name = ref<string>('')
@@ -81,7 +81,7 @@ export default defineComponent({
         })
         .catch(() => {
           ElMessage({
-            message: i18n.t('message.add_user_error'),
+            message: t('message.add_user_error'),
             type: 'error'
           })
         })
diff --git a/src/renderer/components/TimelineSpace/Modals/ListMembership.vue b/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
index 7375926c36..5cd6f0143b 100644
--- a/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
+++ b/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
@@ -17,7 +17,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/ListMembership'
 
@@ -27,7 +27,7 @@ export default defineComponent({
     const space = 'TimelineSpace/Modals/ListMembership'
     const loading = ref<boolean>(false)
     const store = useStore()
-    const i18n = useI18next()
+    const { t } = useTranslation()
 
     const account = computed(() => store.state.TimelineSpace.Modals.ListMembership.account)
     const lists = computed(() => store.state.TimelineSpace.Modals.ListMembership.lists)
@@ -43,7 +43,7 @@ export default defineComponent({
           .dispatch(`${space}/${ACTION_TYPES.CHANGE_BELONG_TO_LISTS}`, value)
           .catch(() => {
             ElMessage({
-              message: i18n.t('message.update_list_memberships_error'),
+              message: t('message.update_list_memberships_error'),
               type: 'error'
             })
           })
@@ -58,7 +58,7 @@ export default defineComponent({
         await store.dispatch(`${space}/${ACTION_TYPES.FETCH_LIST_MEMBERSHIP}`, account.value)
       } catch (err) {
         ElMessage({
-          message: i18n.t('message.lists_fetch_error'),
+          message: t('message.lists_fetch_error'),
           type: 'error'
         })
       } finally {
diff --git a/src/renderer/components/molecules/Toot/Poll.vue b/src/renderer/components/molecules/Toot/Poll.vue
index a5533851dd..7a434ba427 100644
--- a/src/renderer/components/molecules/Toot/Poll.vue
+++ b/src/renderer/components/molecules/Toot/Poll.vue
@@ -30,7 +30,7 @@
 <script lang="ts">
 import { defineComponent, computed, ref, toRefs, PropType } from 'vue'
 import { Entity } from 'megalodon'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { useStore } from '@/store'
 import moment from 'moment'
 import TimeFormat from '~/src/constants/timeFormat'
@@ -44,7 +44,7 @@ export default defineComponent({
   },
   setup(props, ctx) {
     const store = useStore()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const { poll } = toRefs(props)
 
     const timeFormat = computed(() => store.state.App.timeFormat)
@@ -57,11 +57,11 @@ export default defineComponent({
       switch (timeFormat.value) {
         case TimeFormat.Relative.value:
           moment.locale(language.value)
-          return i18n.t('cards.toot.poll.left', {
+          return t('cards.toot.poll.left', {
             datetime: moment(datetime).from(epoch)
           })
         default:
-          return i18n.t('cards.toot.poll.until', {
+          return t('cards.toot.poll.until', {
             datetime: moment(datetime).format('YYYY-MM-DD HH:mm:ss')
           })
       }
diff --git a/src/renderer/components/organisms/Toot.vue b/src/renderer/components/organisms/Toot.vue
index 8dc59992e9..41494a2e61 100644
--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@@ -237,7 +237,7 @@ import data from 'emoji-mart-vue-fast/data/all.json'
 import moment from 'moment'
 import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { useRoute, useRouter } from 'vue-router'
-import { useI18next } from 'vue3-i18next'
+import { useTranslation } from 'i18next-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useStore } from '@/store'
 import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
@@ -305,7 +305,7 @@ export default defineComponent({
     const store = useStore()
     const route = useRoute()
     const router = useRouter()
-    const i18n = useI18next()
+    const { t } = useTranslation()
     const win = (window as any) as MyWindow
     const { focused, message, filters, account, server } = toRefs(props)
     const { r, b, f, o, p, i, x } = useMagicKeys()
@@ -453,15 +453,11 @@ export default defineComponent({
           })
           .catch(err => {
             console.error(err)
-            ElMessageBox.confirm(
-              i18n.t('cards.toot.open_account.text', { account: parsedAccount.acct }),
-              i18n.t('cards.toot.open_account.title'),
-              {
-                confirmButtonText: i18n.t('cards.toot.open_account.ok'),
-                cancelButtonText: i18n.t('cards.toot.open_account.cancel'),
-                type: 'Warning'
-              }
-            ).then(() => {
+            ElMessageBox.confirm(t('cards.toot.open_account.text', { account: parsedAccount.acct }), t('cards.toot.open_account.title'), {
+              confirmButtonText: t('cards.toot.open_account.ok'),
+              cancelButtonText: t('cards.toot.open_account.cancel'),
+              type: 'Warning'
+            }).then(() => {
               openLink(e)
             })
           })
@@ -536,7 +532,7 @@ export default defineComponent({
           .catch(err => {
             console.error(err)
             ElMessage({
-              message: i18n.t('message.unreblog_error'),
+              message: t('message.unreblog_error'),
               type: 'error'
             })
           })
@@ -550,7 +546,7 @@ export default defineComponent({
           .catch(err => {
             console.error(err)
             ElMessage({
-              message: i18n.t('message.reblog_error'),
+              message: t('message.reblog_error'),
               type: 'error'
             })
           })
@@ -566,7 +562,7 @@ export default defineComponent({
           .catch(err => {
             console.error(err)
             ElMessage({
-              message: i18n.t('message.unfavourite_error'),
+              message: t('message.unfavourite_error'),
               type: 'error'
             })
           })
@@ -580,7 +576,7 @@ export default defineComponent({
           .catch(err => {
             console.error(err)
             ElMessage({
-              message: i18n.t('message.favourite_error'),
+              message: t('message.favourite_error'),
               type: 'error'
             })
           })
@@ -596,7 +592,7 @@ export default defineComponent({
           .catch(err => {
             console.error(err)
             ElMessage({
-              message: i18n.t('message.unbookmark_error'),
+              message: t('message.unbookmark_error'),
               type: 'error'
             })
           })
@@ -610,7 +606,7 @@ export default defineComponent({
           .catch(err => {
             console.error(err)
             ElMessage({
-              message: i18n.t('message.bookmark_error'),
+              message: t('message.bookmark_error'),
               type: 'error'
             })
           })
@@ -637,7 +633,7 @@ export default defineComponent({
         })
         .catch(() => {
           ElMessage({
-            message: i18n.t('message.delete_error'),
+            message: t('message.delete_error'),
             type: 'error'
           })
         })
diff --git a/src/renderer/main.ts b/src/renderer/main.ts
index 63f671571d..9efcfe7ae3 100644
--- a/src/renderer/main.ts
+++ b/src/renderer/main.ts
@@ -65,7 +65,7 @@ import {
 } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { sync } from 'vuex-router-sync'
-import { createI18n } from 'vue3-i18next'
+import I18NextVue from 'i18next-vue'
 import 'vue-resize/dist/vue-resize.css'
 import VueResize from 'vue-resize'
 import VueVirtualScroller from 'vue-virtual-scroller'
@@ -139,8 +139,6 @@ library.add(
   faLink
 )
 
-const i18n = createI18n(i18next)
-
 const app = createApp(App)
 app.use(store, key)
 app.use(router)
@@ -148,7 +146,7 @@ app.use(ElementPlus)
 app.component('font-awesome-icon', FontAwesomeIcon)
 app.use(VueVirtualScroller)
 app.use(VueResize)
-app.use(i18n)
+app.use(I18NextVue, { i18next })
 
 app.directive('focus', {
   mounted(el) {
diff --git a/yarn.lock b/yarn.lock
index 0c9a29cac9..465cae66f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6332,6 +6332,11 @@ humanize-plus@^1.8.1:
   resolved "https://registry.yarnpkg.com/humanize-plus/-/humanize-plus-1.8.2.tgz#a65b34459ad6367adbb3707a82a3c9f916167030"
   integrity sha512-jaLeQyyzjjINGv7O9JJegjsaUcWjSj/1dcXvLEgU3pGdqCdP1PiC/uwr+saJXhTNBHZtmKnmpXyazgh+eceRxA==
 
+i18next-vue@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/i18next-vue/-/i18next-vue-2.1.1.tgz#acef6865e33d35ad0a515493c6242d3d2ae83207"
+  integrity sha512-1JKLKkd+WxBhbYadTQi2fK0UoWgHimn0dU5XTnpfCur9sQ1oEBKd5sGyF4eu6DyIM1hnPrEdrivT/wLGaueUXg==
+
 i18next@^22.4.15:
   version "22.4.15"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-22.4.15.tgz#951882b751872994f8502b5a6ef6f796e6a7d7f8"
@@ -11443,11 +11448,6 @@ vue-virtual-scroller@2.0.0-beta.8:
     vue-observe-visibility "^2.0.0-alpha.1"
     vue-resize "^2.0.0-alpha.1"
 
-vue3-i18next@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/vue3-i18next/-/vue3-i18next-0.2.2.tgz#3f6ff83bef9503333e15b32c786ce3bfe6e16511"
-  integrity sha512-Yv3HmfUBuxpd1S2NlryLfSKMV4zpd9N3ffQU0sAd+fCzNvBwO36MR7keWIaWMXRhgtMJaKyAWJTfjhA1OThJbA==
-
 vue@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"

From e80e0fe13e5cba9e197fb509e0bddc79fcdb7f7a Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 3 Jun 2023 18:38:17 +0900
Subject: [PATCH 3/4] Fix  in components

---
 src/renderer/components/GlobalHeader.vue                 | 7 +++++--
 src/renderer/components/Login/Authorize.vue              | 3 ++-
 src/renderer/components/Login/LoginForm.vue              | 3 ++-
 src/renderer/components/Preferences.vue                  | 5 ++++-
 src/renderer/components/Preferences/Account.vue          | 3 ++-
 src/renderer/components/Preferences/Appearance.vue       | 5 ++++-
 .../components/Preferences/Appearance/ColorPallet.vue    | 5 ++++-
 src/renderer/components/Preferences/Appearance/Toot.vue  | 5 ++++-
 src/renderer/components/Preferences/General.vue          | 3 ++-
 src/renderer/components/Preferences/Language.vue         | 3 ++-
 src/renderer/components/Preferences/Network.vue          | 3 ++-
 src/renderer/components/Preferences/Notification.vue     | 3 ++-
 src/renderer/components/Settings.vue                     | 5 ++++-
 src/renderer/components/Settings/Filters.vue             | 3 ++-
 src/renderer/components/Settings/Filters/Edit.vue        | 3 ++-
 src/renderer/components/Settings/Filters/New.vue         | 3 ++-
 src/renderer/components/Settings/Filters/form.vue        | 3 ++-
 src/renderer/components/Settings/General.vue             | 5 ++++-
 src/renderer/components/Settings/Timeline.vue            | 5 ++++-
 src/renderer/components/TimelineSpace/Compose.vue        | 3 ++-
 src/renderer/components/TimelineSpace/Contents.vue       | 5 ++++-
 .../components/TimelineSpace/Contents/Hashtag.vue        | 5 ++++-
 .../components/TimelineSpace/Contents/Hashtag/List.vue   | 5 ++++-
 .../components/TimelineSpace/Contents/Lists/Index.vue    | 3 ++-
 .../components/TimelineSpace/Contents/Search.vue         | 3 ++-
 src/renderer/components/TimelineSpace/Detail/Profile.vue | 5 ++++-
 src/renderer/components/TimelineSpace/HeaderMenu.vue     | 3 ++-
 .../components/TimelineSpace/Modals/AddListMember.vue    | 3 ++-
 src/renderer/components/TimelineSpace/Modals/Jump.vue    | 5 ++++-
 .../components/TimelineSpace/Modals/ListMembership.vue   | 3 ++-
 .../components/TimelineSpace/Modals/MuteConfirm.vue      | 5 ++++-
 src/renderer/components/TimelineSpace/Modals/Report.vue  | 5 ++++-
 .../components/TimelineSpace/Modals/Shortcut.vue         | 5 ++++-
 .../components/TimelineSpace/Modals/Thirdparty.vue       | 9 ++++++---
 src/renderer/components/TimelineSpace/ReceiveDrop.vue    | 7 ++++++-
 src/renderer/components/TimelineSpace/SideMenu.vue       | 5 ++++-
 src/renderer/components/molecules/Toot/Poll.vue          | 3 ++-
 src/renderer/components/molecules/User.vue               | 5 ++++-
 .../components/organisms/Notification/Follow.vue         | 5 ++++-
 .../components/organisms/Notification/FollowRequest.vue  | 5 ++++-
 .../components/organisms/Notification/Status.vue         | 5 ++++-
 .../components/organisms/Notification/StatusReaction.vue | 5 ++++-
 src/renderer/components/organisms/StatusLoading.vue      | 8 ++++----
 src/renderer/components/organisms/Toot.vue               | 5 +++--
 44 files changed, 144 insertions(+), 51 deletions(-)

diff --git a/src/renderer/components/GlobalHeader.vue b/src/renderer/components/GlobalHeader.vue
index 4aee370541..6cd7e6f4df 100644
--- a/src/renderer/components/GlobalHeader.vue
+++ b/src/renderer/components/GlobalHeader.vue
@@ -30,7 +30,7 @@
           </el-menu-item>
         </el-menu>
       </el-aside>
-      <router-view :key="$route.params.id"></router-view>
+      <router-view :key="$route.params.id as string"></router-view>
     </el-container>
   </div>
 </template>
@@ -41,6 +41,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useStore } from '@/store'
 import FailoverImg from '@/components/atoms/FailoverImg.vue'
 import { ACTION_TYPES } from '@/store/GlobalHeader'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   components: {
@@ -52,6 +53,7 @@ export default defineComponent({
     const store = useStore()
     const route = useRoute()
     const router = useRouter()
+    const { t } = useTranslation()
 
     const accounts = computed(() => store.state.GlobalHeader.accounts)
     const hide = computed(() => store.state.GlobalHeader.hide)
@@ -79,7 +81,8 @@ export default defineComponent({
       accounts,
       hide,
       themeColor,
-      activeRoute
+      activeRoute,
+      $t: t
     }
   },
   methods: {}
diff --git a/src/renderer/components/Login/Authorize.vue b/src/renderer/components/Login/Authorize.vue
index f22f6ae51d..1415c1490c 100644
--- a/src/renderer/components/Login/Authorize.vue
+++ b/src/renderer/components/Login/Authorize.vue
@@ -97,7 +97,8 @@ export default defineComponent({
       authorizeForm,
       submitting,
       authorizeSubmit,
-      close
+      close,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Login/LoginForm.vue b/src/renderer/components/Login/LoginForm.vue
index a14cc5e4b8..38c79716e5 100644
--- a/src/renderer/components/Login/LoginForm.vue
+++ b/src/renderer/components/Login/LoginForm.vue
@@ -153,7 +153,8 @@ export default defineComponent({
       allowLogin,
       rules,
       login,
-      confirm
+      confirm,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Preferences.vue b/src/renderer/components/Preferences.vue
index 39d08f80ef..26bc5417d8 100644
--- a/src/renderer/components/Preferences.vue
+++ b/src/renderer/components/Preferences.vue
@@ -59,6 +59,7 @@ import { defineComponent, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'preferences',
@@ -67,6 +68,7 @@ export default defineComponent({
     const router = useRouter()
     const route = useRoute()
     const { escape } = useMagicKeys()
+    const { t } = useTranslation()
 
     const primaryColor = computed(() => store.state.App.theme.primary_color)
     const backgroundColor = computed(() => store.state.App.theme.background_color)
@@ -84,7 +86,8 @@ export default defineComponent({
       primaryColor,
       backgroundColor,
       close,
-      activeRoute
+      activeRoute,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Preferences/Account.vue b/src/renderer/components/Preferences/Account.vue
index 88e2917f46..ed0919e6a6 100644
--- a/src/renderer/components/Preferences/Account.vue
+++ b/src/renderer/components/Preferences/Account.vue
@@ -164,7 +164,8 @@ export default defineComponent({
       removeAccount,
       forward,
       backward,
-      removeAllAssociations
+      removeAllAssociations,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Preferences/Appearance.vue b/src/renderer/components/Preferences/Appearance.vue
index 335c1b9623..ad6580d8db 100644
--- a/src/renderer/components/Preferences/Appearance.vue
+++ b/src/renderer/components/Preferences/Appearance.vue
@@ -57,6 +57,7 @@ import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
 import TimeFormat from '~/src/constants/timeFormat'
 import { ACTION_TYPES } from '@/store/Preferences/Appearance'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'appearance',
@@ -67,6 +68,7 @@ export default defineComponent({
   setup() {
     const space = 'Preferences/Appearance'
     const store = useStore()
+    const { t } = useTranslation()
 
     const nameStyles = [DisplayStyle.DisplayNameAndUsername, DisplayStyle.DisplayName, DisplayStyle.Username]
     const themes = [Theme.System, Theme.Light, Theme.Dark, Theme.SolarizedLight, Theme.SolarizedDark, Theme.KimbieDark, Theme.Custom]
@@ -117,7 +119,8 @@ export default defineComponent({
       customizeThemeColor,
       font,
       updateFontSize,
-      updateTootPadding
+      updateTootPadding,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Preferences/Appearance/ColorPallet.vue b/src/renderer/components/Preferences/Appearance/ColorPallet.vue
index 07ccdf6437..99e4079780 100644
--- a/src/renderer/components/Preferences/Appearance/ColorPallet.vue
+++ b/src/renderer/components/Preferences/Appearance/ColorPallet.vue
@@ -47,12 +47,14 @@
 import { defineComponent, computed } from 'vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/Preferences/Appearance'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'color-pallet',
   setup() {
     const space = 'Preferences/Appearance'
     const store = useStore()
+    const { t } = useTranslation()
 
     const background = computed({
       get: () => store.state.Preferences.Appearance.appearance.customThemeColor.background_color,
@@ -135,7 +137,8 @@ export default defineComponent({
       secondary,
       border,
       headerMenu,
-      wrapperMask
+      wrapperMask,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Preferences/Appearance/Toot.vue b/src/renderer/components/Preferences/Appearance/Toot.vue
index 61979db671..90acc2bc4a 100644
--- a/src/renderer/components/Preferences/Appearance/Toot.vue
+++ b/src/renderer/components/Preferences/Appearance/Toot.vue
@@ -49,6 +49,7 @@ import { defineComponent, computed, toRefs } from 'vue'
 import moment from 'moment'
 import DisplayStyle from '~/src/constants/displayStyle'
 import TimeFormat from '~/src/constants/timeFormat'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'toot',
@@ -64,6 +65,7 @@ export default defineComponent({
   },
   setup(props) {
     const { displayNameStyle, timeFormat } = toRefs(props)
+    const { t } = useTranslation()
 
     const sampleIcon = 'https://github.com/h3poteto/whalebird-desktop/raw/master/build/icons/256x256.png'
     const status = '<p>Sample status</p>'
@@ -105,7 +107,8 @@ export default defineComponent({
       timestamp,
       status,
       reblogsCount,
-      favouritesCount
+      favouritesCount,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Preferences/General.vue b/src/renderer/components/Preferences/General.vue
index ee23450a59..e91c028dfb 100644
--- a/src/renderer/components/Preferences/General.vue
+++ b/src/renderer/components/Preferences/General.vue
@@ -144,7 +144,8 @@ export default defineComponent({
       timeline_hide_attachments,
       other_launch,
       other_hideOnLaunch,
-      reset
+      reset,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Preferences/Language.vue b/src/renderer/components/Preferences/Language.vue
index d71fd06718..43587700e0 100644
--- a/src/renderer/components/Preferences/Language.vue
+++ b/src/renderer/components/Preferences/Language.vue
@@ -103,7 +103,8 @@ export default defineComponent({
       languages,
       displayLanguage,
       spellcheck,
-      spellcheckLanguages
+      spellcheckLanguages,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Preferences/Network.vue b/src/renderer/components/Preferences/Network.vue
index dd99bc5cfe..b5d99c1206 100644
--- a/src/renderer/components/Preferences/Network.vue
+++ b/src/renderer/components/Preferences/Network.vue
@@ -99,7 +99,8 @@ export default defineComponent({
       proxyPort,
       proxyUsername,
       proxyPassword,
-      onSave
+      onSave,
+      $t: t
     }
   },
   methods: {}
diff --git a/src/renderer/components/Preferences/Notification.vue b/src/renderer/components/Preferences/Notification.vue
index 2677184c10..e7582909b8 100644
--- a/src/renderer/components/Preferences/Notification.vue
+++ b/src/renderer/components/Preferences/Notification.vue
@@ -132,7 +132,8 @@ export default defineComponent({
       notifyReaction,
       notifyStatus,
       notifyPollVote,
-      notifyPollExpired
+      notifyPollExpired,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Settings.vue b/src/renderer/components/Settings.vue
index e7f6122e29..e9a577ba24 100644
--- a/src/renderer/components/Settings.vue
+++ b/src/renderer/components/Settings.vue
@@ -48,6 +48,7 @@ import { useMagicKeys, whenever } from '@vueuse/core'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from '@/store'
 import { MUTATION_TYPES } from '@/store/Settings'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'Settings',
@@ -57,6 +58,7 @@ export default defineComponent({
     const route = useRoute()
     const router = useRouter()
     const { escape } = useMagicKeys()
+    const { t } = useTranslation()
 
     const primaryColor = computed(() => store.state.App.theme.primary_color)
     const backgroundColor = computed(() => store.state.App.theme.background_color)
@@ -81,7 +83,8 @@ export default defineComponent({
       backgroundColor,
       id,
       activeRoute,
-      close
+      close,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Settings/Filters.vue b/src/renderer/components/Settings/Filters.vue
index 876cfa7d47..0c5af43233 100644
--- a/src/renderer/components/Settings/Filters.vue
+++ b/src/renderer/components/Settings/Filters.vue
@@ -85,7 +85,8 @@ export default defineComponent({
       backgroundColor,
       sns,
       id,
-      deleteFilter
+      deleteFilter,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Settings/Filters/Edit.vue b/src/renderer/components/Settings/Filters/Edit.vue
index 5cf2170cd7..7323feb08d 100644
--- a/src/renderer/components/Settings/Filters/Edit.vue
+++ b/src/renderer/components/Settings/Filters/Edit.vue
@@ -57,7 +57,8 @@ export default defineComponent({
       sns,
       filter,
       cancel,
-      onSubmit
+      onSubmit,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Settings/Filters/New.vue b/src/renderer/components/Settings/Filters/New.vue
index f1a873dbfa..e998602741 100644
--- a/src/renderer/components/Settings/Filters/New.vue
+++ b/src/renderer/components/Settings/Filters/New.vue
@@ -51,7 +51,8 @@ export default defineComponent({
       sns,
       filter,
       cancel,
-      onSubmit
+      onSubmit,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Settings/Filters/form.vue b/src/renderer/components/Settings/Filters/form.vue
index f29b1f5aed..b8bceb76a7 100644
--- a/src/renderer/components/Settings/Filters/form.vue
+++ b/src/renderer/components/Settings/Filters/form.vue
@@ -145,7 +145,8 @@ export default defineComponent({
       filterWholeWord,
       cancel,
       onSubmit,
-      accountDisabled
+      accountDisabled,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Settings/General.vue b/src/renderer/components/Settings/General.vue
index cddf091bf4..4d5568124b 100644
--- a/src/renderer/components/Settings/General.vue
+++ b/src/renderer/components/Settings/General.vue
@@ -23,12 +23,14 @@ import { defineComponent, computed, onMounted } from 'vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/Settings/General'
 import Visibility from '~/src/constants/visibility'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'General',
   setup() {
     const space = 'Settings/General'
     const store = useStore()
+    const { t } = useTranslation()
 
     const visibilities = [Visibility.Public, Visibility.Unlisted, Visibility.Private]
 
@@ -57,7 +59,8 @@ export default defineComponent({
       tootVisibility,
       tootSensitive,
       changeVisibility,
-      changeSensitive
+      changeSensitive,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/Settings/Timeline.vue b/src/renderer/components/Settings/Timeline.vue
index 24a10fee0d..6c6e1c4fb5 100644
--- a/src/renderer/components/Settings/Timeline.vue
+++ b/src/renderer/components/Settings/Timeline.vue
@@ -17,12 +17,14 @@
 import { defineComponent, computed, onMounted } from 'vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/Settings/Timeline'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'Timeline',
   setup() {
     const space = 'Settings/Timeline'
     const store = useStore()
+    const { t } = useTranslation()
 
     const marker_home = computed({
       get: () => store.state.Settings.Timeline.setting.markerHome,
@@ -45,7 +47,8 @@ export default defineComponent({
 
     return {
       marker_home,
-      marker_notifications
+      marker_notifications,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Compose.vue b/src/renderer/components/TimelineSpace/Compose.vue
index bc059ce7d4..917c1f976b 100644
--- a/src/renderer/components/TimelineSpace/Compose.vue
+++ b/src/renderer/components/TimelineSpace/Compose.vue
@@ -731,7 +731,8 @@ export default defineComponent({
       suggestHighlight,
       insertItem,
       highlightedIndex,
-      suggest
+      suggest,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Contents.vue b/src/renderer/components/TimelineSpace/Contents.vue
index 3afbd1b096..4a3e1a4ca0 100644
--- a/src/renderer/components/TimelineSpace/Contents.vue
+++ b/src/renderer/components/TimelineSpace/Contents.vue
@@ -15,16 +15,19 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
 import { useStore } from '@/store'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'Contents',
   setup() {
     const store = useStore()
+    const { t } = useTranslation()
 
     const loading = computed(() => store.state.TimelineSpace.Contents.loading)
 
     return {
-      loading
+      loading,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
index 841dd7b585..ce3bd106c6 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag.vue
@@ -19,6 +19,7 @@
 </template>
 
 <script lang="ts">
+import { useTranslation } from 'i18next-vue'
 import { computed, defineComponent, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -27,6 +28,7 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const router = useRouter()
+    const { t } = useTranslation()
 
     const tag = ref<string>('')
     const id = computed(() => route.params.id)
@@ -56,7 +58,8 @@ export default defineComponent({
       tagPage,
       tag,
       back,
-      search
+      search,
+      $t: t
     }
   },
   methods: {}
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
index 3ea9ed7347..5488b47756 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
@@ -22,12 +22,14 @@ import { defineComponent, computed, onMounted, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { LocalTag } from '~/src/types/localTag'
 import { MyWindow } from '~/src/types/global'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'list',
   setup() {
     const route = useRoute()
     const router = useRouter()
+    const { t } = useTranslation()
     const win = (window as any) as MyWindow
     const id = computed(() => parseInt(route.params.id as string))
     const tags = ref<Array<LocalTag>>([])
@@ -48,7 +50,8 @@ export default defineComponent({
     return {
       tags,
       openTimeline,
-      deleteTag
+      deleteTag,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue b/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
index 47fb5ae4ad..8165047c54 100644
--- a/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Lists/Index.vue
@@ -122,7 +122,8 @@ export default defineComponent({
       backgroundColor,
       createList,
       edit,
-      del
+      del,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Contents/Search.vue b/src/renderer/components/TimelineSpace/Contents/Search.vue
index a01b553893..974d0f0c70 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search.vue
@@ -139,7 +139,8 @@ export default defineComponent({
       search,
       accounts,
       tags,
-      statuses
+      statuses,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Detail/Profile.vue b/src/renderer/components/TimelineSpace/Detail/Profile.vue
index ecf6e4ef39..39d8226bf5 100644
--- a/src/renderer/components/TimelineSpace/Detail/Profile.vue
+++ b/src/renderer/components/TimelineSpace/Detail/Profile.vue
@@ -123,6 +123,7 @@ import FailoverImg from '@/components/atoms/FailoverImg.vue'
 import Posts from './Profile/Posts.vue'
 import Following from './Profile/Following.vue'
 import Followers from './Profile/Followers.vue'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'Profile',
@@ -136,6 +137,7 @@ export default defineComponent({
     const win = (window as any) as MyWindow
     const store = useStore()
     const route = useRoute()
+    const { t } = useTranslation()
 
     const theme = computed(() => {
       return {
@@ -321,7 +323,8 @@ export default defineComponent({
       metadataClick,
       precision,
       activeTab,
-      account
+      account,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/HeaderMenu.vue b/src/renderer/components/TimelineSpace/HeaderMenu.vue
index d0a2dac58a..a2ff6609e7 100644
--- a/src/renderer/components/TimelineSpace/HeaderMenu.vue
+++ b/src/renderer/components/TimelineSpace/HeaderMenu.vue
@@ -119,7 +119,8 @@ export default defineComponent({
       title,
       loading,
       reloadable,
-      reload
+      reload,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
index c3f47babbc..0505cbdd13 100644
--- a/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
+++ b/src/renderer/components/TimelineSpace/Modals/AddListMember.vue
@@ -94,7 +94,8 @@ export default defineComponent({
       addListMemberModal,
       username,
       search,
-      add
+      add,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Modals/Jump.vue b/src/renderer/components/TimelineSpace/Modals/Jump.vue
index 6f7439edc5..d60372b0d6 100644
--- a/src/renderer/components/TimelineSpace/Modals/Jump.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Jump.vue
@@ -27,12 +27,14 @@ import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, next
 import { useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
 import { MUTATION_TYPES, ACTION_TYPES, Channel } from '@/store/TimelineSpace/Modals/Jump'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'jump',
   setup() {
     const space = 'TimelineSpace/Modals/Jump'
     const store = useStore()
+    const { t } = useTranslation()
     const { up, down, enter } = useMagicKeys()
 
     const channelForm = ref<HTMLInputElement>()
@@ -109,7 +111,8 @@ export default defineComponent({
       filteredChannel,
       jump,
       changeSelected,
-      jumpCurrentSelected
+      jumpCurrentSelected,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Modals/ListMembership.vue b/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
index 5cd6f0143b..ef33bd79dc 100644
--- a/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
+++ b/src/renderer/components/TimelineSpace/Modals/ListMembership.vue
@@ -70,7 +70,8 @@ export default defineComponent({
       loading,
       lists,
       listMembershipModal,
-      belongToLists
+      belongToLists,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue b/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
index 84a5d5984a..253a26c54f 100644
--- a/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
+++ b/src/renderer/components/TimelineSpace/Modals/MuteConfirm.vue
@@ -16,12 +16,14 @@
 import { defineComponent, ref, computed } from 'vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/TimelineSpace/Modals/MuteConfirm'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'MuteConfirm',
   setup() {
     const space = 'TimelineSpace/Modals/MuteConfirm'
     const store = useStore()
+    const { t } = useTranslation()
 
     const notify = ref<boolean>(true)
 
@@ -42,7 +44,8 @@ export default defineComponent({
       notify,
       muteConfirmModal,
       closeModal,
-      submit
+      submit,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Modals/Report.vue b/src/renderer/components/TimelineSpace/Modals/Report.vue
index f323e266b9..7896aeeed8 100644
--- a/src/renderer/components/TimelineSpace/Modals/Report.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Report.vue
@@ -14,12 +14,14 @@
 import { defineComponent, computed, ref } from 'vue'
 import { useStore } from '@/store'
 import { MUTATION_TYPES, ACTION_TYPES } from '@/store/TimelineSpace/Modals/Report'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'Report',
   setup() {
     const space = 'TimelineSpace/Modals/Report'
     const store = useStore()
+    const { t } = useTranslation()
 
     const comment = ref<string>('')
 
@@ -45,7 +47,8 @@ export default defineComponent({
       comment,
       reportModal,
       closeModal,
-      submit
+      submit,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
index 50d26a5985..cd187231cf 100644
--- a/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Shortcut.vue
@@ -73,19 +73,22 @@
 import { defineComponent, computed } from 'vue'
 import { useStore } from '@/store'
 import { MUTATION_TYPES } from '@/store/TimelineSpace/Modals/Shortcut'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'shortcut',
   setup() {
     const space = 'TimelineSpace/Modals/Shortcut'
     const store = useStore()
+    const { t } = useTranslation()
     const shortcutModal = computed({
       get: () => store.state.TimelineSpace.Modals.Shortcut.modalOpen,
       set: (value: boolean) => store.commit(`${space}/${MUTATION_TYPES.CHANGE_MODAL}`, value)
     })
 
     return {
-      shortcutModal
+      shortcutModal,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Modals/Thirdparty.vue b/src/renderer/components/TimelineSpace/Modals/Thirdparty.vue
index a0499f561d..6d8ab0667e 100644
--- a/src/renderer/components/TimelineSpace/Modals/Thirdparty.vue
+++ b/src/renderer/components/TimelineSpace/Modals/Thirdparty.vue
@@ -3,7 +3,7 @@
     <el-dialog :title="$t('modals.thirdparty.title')" v-model="modalOpen" width="500px" class="thirdparty-modal">
       <table class="licenses">
         <tbody>
-          <tr v-for="lib in thirdparty" :key="lib">
+          <tr v-for="lib in thirdparty" :key="lib.package_name">
             <td>{{ lib.package_name }}</td>
             <td>{{ lib.license }}</td>
           </tr>
@@ -17,11 +17,13 @@
 import { defineComponent, onMounted, ref } from 'vue'
 import { MyWindow } from '~/src/types/global'
 import thirdparty from '~/src/config/thirdparty.json'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'Thirdparty',
   setup() {
-    const win = window as any as MyWindow
+    const win = (window as any) as MyWindow
+    const { t } = useTranslation()
     const modalOpen = ref(false)
 
     onMounted(() => {
@@ -32,7 +34,8 @@ export default defineComponent({
 
     return {
       modalOpen,
-      thirdparty
+      thirdparty,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/ReceiveDrop.vue b/src/renderer/components/TimelineSpace/ReceiveDrop.vue
index 2f20281f29..d4634140bb 100644
--- a/src/renderer/components/TimelineSpace/ReceiveDrop.vue
+++ b/src/renderer/components/TimelineSpace/ReceiveDrop.vue
@@ -9,10 +9,15 @@
 </template>
 
 <script lang="ts">
+import { useTranslation } from 'i18next-vue'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'receive-drop'
+  name: 'receive-drop',
+  setup() {
+    const { t } = useTranslation()
+    return { $t: t }
+  }
 })
 </script>
 
diff --git a/src/renderer/components/TimelineSpace/SideMenu.vue b/src/renderer/components/TimelineSpace/SideMenu.vue
index 9ed3e59a1a..4cabdcbada 100644
--- a/src/renderer/components/TimelineSpace/SideMenu.vue
+++ b/src/renderer/components/TimelineSpace/SideMenu.vue
@@ -256,6 +256,7 @@ import generator, { Entity, MegalodonInterface } from 'megalodon'
 import { LocalAccount } from '~/src/types/localAccount'
 import { LocalServer } from '~/src/types/localServer'
 import { LocalTag } from '~/src/types/localTag'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'side-menu',
@@ -264,6 +265,7 @@ export default defineComponent({
     const store = useStore()
     const route = useRoute()
     const router = useRouter()
+    const { t } = useTranslation()
 
     const win = (window as any) as MyWindow
 
@@ -402,7 +404,8 @@ export default defineComponent({
       handleProfile,
       doCollapse,
       releaseCollapse,
-      changeGlobalHeader
+      changeGlobalHeader,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/molecules/Toot/Poll.vue b/src/renderer/components/molecules/Toot/Poll.vue
index 7a434ba427..1dfe274630 100644
--- a/src/renderer/components/molecules/Toot/Poll.vue
+++ b/src/renderer/components/molecules/Toot/Poll.vue
@@ -94,7 +94,8 @@ export default defineComponent({
       percentage,
       vote,
       progress,
-      refresh
+      refresh,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/molecules/User.vue b/src/renderer/components/molecules/User.vue
index 91f65b0e92..9df5ce0a82 100644
--- a/src/renderer/components/molecules/User.vue
+++ b/src/renderer/components/molecules/User.vue
@@ -54,6 +54,7 @@ import { Entity } from 'megalodon'
 import FailoverImg from '~/src/renderer/components/atoms/FailoverImg.vue'
 import emojify from '~/src/renderer/utils/emojify'
 import { useRouter } from 'vue-router'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'user',
@@ -80,6 +81,7 @@ export default defineComponent({
   },
   setup(_props, ctx) {
     const router = useRouter()
+    const { t } = useTranslation()
     const username = (account: Entity.Account) => {
       if (account.display_name !== '') {
         return emojify(account.display_name, account.emojis)
@@ -113,7 +115,8 @@ export default defineComponent({
       unfollowAccount,
       followAccount,
       acceptRequest,
-      rejectRequest
+      rejectRequest,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/organisms/Notification/Follow.vue b/src/renderer/components/organisms/Notification/Follow.vue
index 676b67b9cc..4d0d15881d 100644
--- a/src/renderer/components/organisms/Notification/Follow.vue
+++ b/src/renderer/components/organisms/Notification/Follow.vue
@@ -34,6 +34,7 @@ import { useStore } from '@/store'
 import FailoverImg from '@/components/atoms/FailoverImg.vue'
 import { usernameWithStyle } from '@/utils/username'
 import { useRouter } from 'vue-router'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'follow',
@@ -55,6 +56,7 @@ export default defineComponent({
     const { focused } = toRefs(props)
     const store = useStore()
     const router = useRouter()
+    const { t } = useTranslation()
     const notificationRef = ref<any>(null)
 
     const displayNameStyle = computed(() => store.state.App.displayNameStyle)
@@ -79,7 +81,8 @@ export default defineComponent({
     return {
       notificationRef,
       username,
-      openUser
+      openUser,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/organisms/Notification/FollowRequest.vue b/src/renderer/components/organisms/Notification/FollowRequest.vue
index 45d2197e31..65f144beed 100644
--- a/src/renderer/components/organisms/Notification/FollowRequest.vue
+++ b/src/renderer/components/organisms/Notification/FollowRequest.vue
@@ -34,6 +34,7 @@ import { useStore } from '@/store'
 import FailoverImg from '@/components/atoms/FailoverImg.vue'
 import { usernameWithStyle } from '@/utils/username'
 import { useRouter } from 'vue-router'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'follow-request',
@@ -55,6 +56,7 @@ export default defineComponent({
     const { focused } = toRefs(props)
     const store = useStore()
     const router = useRouter()
+    const { t } = useTranslation()
     const notificationRef = ref<any>(null)
 
     const displayNameStyle = computed(() => store.state.App.displayNameStyle)
@@ -79,7 +81,8 @@ export default defineComponent({
     return {
       notificationRef,
       username,
-      openUser
+      openUser,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/organisms/Notification/Status.vue b/src/renderer/components/organisms/Notification/Status.vue
index 28f83ee182..528d9ab8b5 100644
--- a/src/renderer/components/organisms/Notification/Status.vue
+++ b/src/renderer/components/organisms/Notification/Status.vue
@@ -47,6 +47,7 @@ import { usernameWithStyle } from '@/utils/username'
 import { LocalAccount } from '~/src/types/localAccount'
 import { LocalServer } from '~/src/types/localServer'
 import { useRouter } from 'vue-router'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'mention',
@@ -76,6 +77,7 @@ export default defineComponent({
   setup(_props, ctx) {
     const store = useStore()
     const router = useRouter()
+    const { t } = useTranslation()
     const displayNameStyle = computed(() => store.state.App.displayNameStyle)
 
     const updateToot = (message: Entity.Status) => {
@@ -93,7 +95,8 @@ export default defineComponent({
       updateToot,
       deleteToot,
       username,
-      openUser
+      openUser,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/organisms/Notification/StatusReaction.vue b/src/renderer/components/organisms/Notification/StatusReaction.vue
index 7264f24522..47a20cfcf8 100644
--- a/src/renderer/components/organisms/Notification/StatusReaction.vue
+++ b/src/renderer/components/organisms/Notification/StatusReaction.vue
@@ -107,6 +107,7 @@ import Filtered from '@/utils/filter'
 import { parseDatetime } from '@/utils/datetime'
 import { usernameWithStyle } from '@/utils/username'
 import { MyWindow } from '~/src/types/global'
+import { useTranslation } from 'i18next-vue'
 
 export default defineComponent({
   name: 'status-reaction',
@@ -137,6 +138,7 @@ export default defineComponent({
     const store = useStore()
     const router = useRouter()
     const route = useRoute()
+    const { t } = useTranslation()
     const win = (window as any) as MyWindow
     const { focused, message, filters, reactionType } = toRefs(props)
 
@@ -262,7 +264,8 @@ export default defineComponent({
       spoilerText,
       reactionMessage,
       reactionClass,
-      reactionIcon
+      reactionIcon,
+      $t: t
     }
   }
 })
diff --git a/src/renderer/components/organisms/StatusLoading.vue b/src/renderer/components/organisms/StatusLoading.vue
index fe3411ae3c..d1ef685d1e 100644
--- a/src/renderer/components/organisms/StatusLoading.vue
+++ b/src/renderer/components/organisms/StatusLoading.vue
@@ -7,6 +7,7 @@
 </template>
 
 <script lang="ts">
+import { useTranslation } from 'i18next-vue'
 import { defineComponent, toRefs } from 'vue'
 
 export default defineComponent({
@@ -26,6 +27,7 @@ export default defineComponent({
     }
   },
   setup(props, ctx) {
+    const { t } = useTranslation()
     const { loading, since_id, max_id } = toRefs(props)
     const onClick = () => {
       if (loading.value) {
@@ -39,11 +41,9 @@ export default defineComponent({
     }
 
     return {
-      onClick
+      onClick,
+      $t: t
     }
-  },
-  methods: {
-    onClick() {}
   }
 })
 </script>
diff --git a/src/renderer/components/organisms/Toot.vue b/src/renderer/components/organisms/Toot.vue
index 41494a2e61..f5b8ec803a 100644
--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@@ -456,7 +456,7 @@ export default defineComponent({
             ElMessageBox.confirm(t('cards.toot.open_account.text', { account: parsedAccount.acct }), t('cards.toot.open_account.title'), {
               confirmButtonText: t('cards.toot.open_account.ok'),
               cancelButtonText: t('cards.toot.open_account.cancel'),
-              type: 'Warning'
+              type: 'warning'
             }).then(() => {
               openLink(e)
             })
@@ -742,7 +742,8 @@ export default defineComponent({
       toggleCW,
       emojiPickerOpened,
       emojiPickerShow,
-      emojiPickerHide
+      emojiPickerHide,
+      $t: t
     }
   }
 })

From a56890e68c89551b949787945bd1af3ed7c17d70 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 3 Jun 2023 21:09:37 +0900
Subject: [PATCH 4/4] Fix types

---
 src/renderer/components/Login/LoginForm.vue   |  6 ++++-
 src/renderer/components/Settings/Filters.vue  | 19 +++++++++++---
 .../components/Settings/Filters/Edit.vue      | 25 +++++++++++++++----
 .../components/Settings/Filters/New.vue       | 25 ++++++++++++++++---
 .../components/TimelineSpace/Compose.vue      |  9 ++++---
 .../components/TimelineSpace/Contents.vue     |  2 +-
 .../TimelineSpace/Contents/Bookmarks.vue      |  8 +++---
 .../TimelineSpace/Contents/Favourites.vue     |  8 +++---
 .../TimelineSpace/Contents/FollowRequests.vue | 18 ++++++++++---
 .../TimelineSpace/Contents/Hashtag/List.vue   |  2 +-
 .../TimelineSpace/Contents/Search.vue         |  9 ++++---
 .../TimelineSpace/Contents/Search/Tag.vue     |  6 ++---
 .../TimelineSpace/Contents/Search/Toots.vue   | 18 ++++++++++---
 .../components/TimelineSpace/ReceiveDrop.vue  |  2 +-
 .../organisms/Notification/StatusReaction.vue |  4 +--
 src/renderer/components/organisms/Toot.vue    |  4 +--
 16 files changed, 120 insertions(+), 45 deletions(-)

diff --git a/src/renderer/components/Login/LoginForm.vue b/src/renderer/components/Login/LoginForm.vue
index 38c79716e5..aef7ff535e 100644
--- a/src/renderer/components/Login/LoginForm.vue
+++ b/src/renderer/components/Login/LoginForm.vue
@@ -116,7 +116,11 @@ export default defineComponent({
           searching.value = true
           try {
             const cleanDomain = form.domainName.trim()
-            sns.value = await detector(`https://${cleanDomain}`)
+            const res = await detector(`https://${cleanDomain}`)
+            if (res === 'friendica') {
+              throw new Error('Friendica is not supported')
+            }
+            sns.value = res
             domain.value = cleanDomain
             ElMessage({
               message: t('message.domain_confirmed', {
diff --git a/src/renderer/components/Settings/Filters.vue b/src/renderer/components/Settings/Filters.vue
index 0c5af43233..ee8054fe1d 100644
--- a/src/renderer/components/Settings/Filters.vue
+++ b/src/renderer/components/Settings/Filters.vue
@@ -44,12 +44,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted } from 'vue'
+import { defineComponent, computed, onMounted, reactive } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
 import { useTranslation } from 'i18next-vue'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/Settings/Filters'
+import { LocalAccount } from '~/src/types/localAccount'
+import { LocalServer } from '~/src/types/localServer'
+import { MyWindow } from '~/src/types/global'
 
 export default defineComponent({
   name: 'Filters',
@@ -59,13 +62,23 @@ export default defineComponent({
     const route = useRoute()
     const { t } = useTranslation()
 
+    const win = (window as any) as MyWindow
+
+    const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
+      account: null,
+      server: null
+    })
+
     const filters = computed(() => store.state.Settings.Filters.filters)
     const filtersLoading = computed(() => store.state.Settings.Filters.filtersLoading)
     const backgroundColor = computed(() => store.state.App.theme.background_color)
-    const sns = computed(() => store.state.TimelineSpace.sns)
     const id = computed(() => route.params.id)
+    const sns = computed(() => account.server?.sns)
 
     onMounted(async () => {
+      const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
+      account.account = a
+      account.server = s
       await store.dispatch(`${space}/${ACTION_TYPES.FETCH_FILTERS}`)
     })
 
@@ -83,9 +96,9 @@ export default defineComponent({
       filters,
       filtersLoading,
       backgroundColor,
-      sns,
       id,
       deleteFilter,
+      sns,
       $t: t
     }
   }
diff --git a/src/renderer/components/Settings/Filters/Edit.vue b/src/renderer/components/Settings/Filters/Edit.vue
index 7323feb08d..81548fe770 100644
--- a/src/renderer/components/Settings/Filters/Edit.vue
+++ b/src/renderer/components/Settings/Filters/Edit.vue
@@ -6,13 +6,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, onMounted, toRefs } from 'vue'
+import { defineComponent, computed, onMounted, toRefs, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useStore } from '@/store'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useTranslation } from 'i18next-vue'
 import FilterForm from './form.vue'
 import { ACTION_TYPES } from '@/store/Settings/Filters/Edit'
+import { LocalAccount } from '~/src/types/localAccount'
+import { LocalServer } from '~/src/types/localServer'
+import { MyWindow } from '~/src/types/global'
 
 export default defineComponent({
   name: 'EditFilter',
@@ -22,17 +25,29 @@ export default defineComponent({
     const space = 'Settings/Filters/Edit'
     const store = useStore()
     const router = useRouter()
+    const route = useRoute()
     const { t } = useTranslation()
     const { filter_id } = toRefs(props)
 
+    const win = (window as any) as MyWindow
+    const id = computed(() => parseInt(route.params.id as string))
+    const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
+      account: null,
+      server: null
+    })
+
     const loading = computed(() => store.state.Settings.Filters.Edit.loading)
-    const sns = computed(() => store.state.TimelineSpace.sns)
     const filter = computed({
       get: () => store.state.Settings.Filters.Edit.filter,
       set: value => store.dispatch(`${space}/${ACTION_TYPES.EDIT_FILTER}`, value)
     })
+    const sns = computed(() => account.server?.sns)
+
+    onMounted(async () => {
+      const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
+      account.account = a
+      account.server = s
 
-    onMounted(() => {
       store.dispatch(`${space}/${ACTION_TYPES.FETCH_FILTER}`, filter_id.value)
     })
 
@@ -54,10 +69,10 @@ export default defineComponent({
 
     return {
       loading,
-      sns,
       filter,
       cancel,
       onSubmit,
+      sns,
       $t: t
     }
   }
diff --git a/src/renderer/components/Settings/Filters/New.vue b/src/renderer/components/Settings/Filters/New.vue
index e998602741..1f0e03bbec 100644
--- a/src/renderer/components/Settings/Filters/New.vue
+++ b/src/renderer/components/Settings/Filters/New.vue
@@ -6,13 +6,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { defineComponent, computed, reactive, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { useTranslation } from 'i18next-vue'
 import { useStore } from '@/store'
 import FilterForm from './form.vue'
 import { ACTION_TYPES } from '@/store/Settings/Filters/New'
+import { LocalAccount } from '~/src/types/localAccount'
+import { LocalServer } from '~/src/types/localServer'
+import { MyWindow } from '~/src/types/global'
 
 export default defineComponent({
   name: 'NewFilter',
@@ -21,14 +24,28 @@ export default defineComponent({
     const space = 'Settings/Filters/New'
     const store = useStore()
     const router = useRouter()
+    const route = useRoute()
     const { t } = useTranslation()
 
+    const win = (window as any) as MyWindow
+    const id = computed(() => parseInt(route.params.id as string))
+    const account = reactive<{ account: LocalAccount | null; server: LocalServer | null }>({
+      account: null,
+      server: null
+    })
+
     const loading = computed(() => store.state.Settings.Filters.New.loading)
-    const sns = computed(() => store.state.TimelineSpace.sns)
     const filter = computed({
       get: () => store.state.Settings.Filters.New.filter,
       set: value => store.dispatch(`${space}/${ACTION_TYPES.EDIT_FILTER}`, value)
     })
+    const sns = computed(() => account.server?.sns)
+
+    onMounted(async () => {
+      const [a, s]: [LocalAccount, LocalServer] = await win.ipcRenderer.invoke('get-local-account', id.value)
+      account.account = a
+      account.server = s
+    })
 
     const cancel = () => router.go(-1)
     const onSubmit = () => {
@@ -48,10 +65,10 @@ export default defineComponent({
 
     return {
       loading,
-      sns,
       filter,
       cancel,
       onSubmit,
+      sns,
       $t: t
     }
   }
diff --git a/src/renderer/components/TimelineSpace/Compose.vue b/src/renderer/components/TimelineSpace/Compose.vue
index 917c1f976b..36bf8e7b55 100644
--- a/src/renderer/components/TimelineSpace/Compose.vue
+++ b/src/renderer/components/TimelineSpace/Compose.vue
@@ -40,7 +40,7 @@
 
       <div class="preview" ref="previewRef">
         <div class="image-wrapper" v-for="media in attachments" :key="media.id">
-          <img :src="media.preview_url" class="preview-image" />
+          <img v-if="media.preview_url" :src="media.preview_url" class="preview-image" />
           <el-button class="remove-image" link @click="removeAttachment(media)"><font-awesome-icon icon="circle-xmark" /></el-button>
         </div>
       </div>
@@ -235,7 +235,7 @@ export default defineComponent({
     const attachments = ref<Array<Entity.Attachment | Entity.AsyncAttachment>>([])
     const cw = ref<boolean>(false)
     const visibility = ref(visibilityList.Public.key)
-    const nsfw = ref<boolean>(false)
+    const nsfw = ref<boolean | null>(false)
     const inReplyTo = computed(() => store.state.TimelineSpace.Compose.inReplyTo)
     const quoteTo = computed(() => store.state.TimelineSpace.Compose.quoteTo)
     const poll = reactive<{ options: Array<string>; expires_in: number }>({
@@ -269,8 +269,11 @@ export default defineComponent({
 
       const credentials = await c.verifyAccountCredentials()
       if (credentials.data.source) {
-        visibility.value = credentials.data.source.privacy
         nsfw.value = credentials.data.source.sensitive
+        const privacy = credentials.data.source.privacy
+        if (privacy && (privacy === 'public' || privacy === 'unlisted' || privacy === 'private' || privacy === 'direct')) {
+          visibility.value = privacy
+        }
       }
 
       const instance = await c.getInstance()
diff --git a/src/renderer/components/TimelineSpace/Contents.vue b/src/renderer/components/TimelineSpace/Contents.vue
index 4a3e1a4ca0..4cda55377e 100644
--- a/src/renderer/components/TimelineSpace/Contents.vue
+++ b/src/renderer/components/TimelineSpace/Contents.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="contents" :style="customWidth" @mouseup="dragEnd" @mousemove="resize">
+  <div id="contents">
     <div
       class="timeline-wrapper"
       v-loading="loading"
diff --git a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue b/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
index b69e48604b..a517968d78 100644
--- a/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Bookmarks.vue
@@ -64,7 +64,7 @@ export default defineComponent({
     const client = ref<MegalodonInterface | null>(null)
 
     const bookmarks = ref<Array<Entity.Status>>([])
-    const nextMaxId = ref<string | null>(null)
+    const nextMaxId = ref<string | undefined>(undefined)
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => bookmarks.value.findIndex(toot => focusedId.value === toot.uri))
@@ -90,7 +90,7 @@ export default defineComponent({
         if (link !== null && link.next) {
           nextMaxId.value = link.next.max_id
         } else {
-          nextMaxId.value = null
+          nextMaxId.value = undefined
         }
       } catch (err) {
         console.error(err)
@@ -143,7 +143,7 @@ export default defineComponent({
             if (link !== null && link.next) {
               nextMaxId.value = link.next.max_id
             } else {
-              nextMaxId.value = null
+              nextMaxId.value = undefined
             }
           })
           .catch(err => {
@@ -174,7 +174,7 @@ export default defineComponent({
         if (link !== null && link.next) {
           nextMaxId.value = link.next.max_id
         } else {
-          nextMaxId.value = null
+          nextMaxId.value = undefined
         }
       } finally {
         store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
diff --git a/src/renderer/components/TimelineSpace/Contents/Favourites.vue b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
index 27fbc04dab..dc2b37ee40 100644
--- a/src/renderer/components/TimelineSpace/Contents/Favourites.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Favourites.vue
@@ -65,7 +65,7 @@ export default defineComponent({
 
     const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
     const favourites = ref<Array<Entity.Status>>([])
-    const nextMaxId = ref<string | null>(null)
+    const nextMaxId = ref<string | undefined>(undefined)
     const modalOpened = computed<boolean>(() => store.getters[`TimelineSpace/Modals/modalOpened`])
     const currentFocusedIndex = computed(() => favourites.value.findIndex(status => focusedId.value === status.uri))
     const shortcutEnabled = computed(
@@ -90,7 +90,7 @@ export default defineComponent({
         if (link !== null && link.next) {
           nextMaxId.value = link.next.max_id
         } else {
-          nextMaxId.value = null
+          nextMaxId.value = undefined
         }
       } catch (err) {
         console.error(err)
@@ -151,7 +151,7 @@ export default defineComponent({
             if (link !== null && link.next) {
               nextMaxId.value = link.next.max_id
             } else {
-              nextMaxId.value = null
+              nextMaxId.value = undefined
             }
           })
           .catch(err => {
@@ -197,7 +197,7 @@ export default defineComponent({
         if (link !== null && link.next) {
           nextMaxId.value = link.next.max_id
         } else {
-          nextMaxId.value = null
+          nextMaxId.value = undefined
         }
       } finally {
         store.commit(`TimelineSpace/${TIMELINE_MUTATION.CHANGE_LOADING}`, false)
diff --git a/src/renderer/components/TimelineSpace/Contents/FollowRequests.vue b/src/renderer/components/TimelineSpace/Contents/FollowRequests.vue
index 8de59a8c5b..622e5c9391 100644
--- a/src/renderer/components/TimelineSpace/Contents/FollowRequests.vue
+++ b/src/renderer/components/TimelineSpace/Contents/FollowRequests.vue
@@ -1,7 +1,14 @@
 <template>
   <div id="follow-requests">
     <template v-for="account in requests">
-      <user :user="account" :request="true" @acceptRequest="accept" @rejectRequest="reject"></user>
+      <user
+        :key="account.id"
+        v-if="isAccount(account)"
+        :user="account"
+        :request="true"
+        @accept-equest="accept"
+        @reject-request="reject"
+      ></user>
     </template>
   </div>
 </template>
@@ -36,7 +43,7 @@ export default defineComponent({
     })
     const client = ref<MegalodonInterface | null>(null)
 
-    const requests = ref<Array<Entity.Account>>([])
+    const requests = ref<Array<Entity.Account | Entity.FollowRequest>>([])
 
     onMounted(async () => {
       await initialize()
@@ -84,10 +91,15 @@ export default defineComponent({
         })
     }
 
+    const isAccount = (req: any): req is Entity.Account => {
+      return (req as Entity.Account)?.moved !== undefined
+    }
+
     return {
       requests,
       accept,
-      reject
+      reject,
+      isAccount
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue b/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
index 5488b47756..60d5a47bc1 100644
--- a/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Hashtag/List.vue
@@ -2,7 +2,7 @@
   <div id="list">
     <table class="tag-list">
       <tbody>
-        <tr v-for="tag in tags" :key="tag._id" @click.stop.prevent="openTimeline(tag.tagName)">
+        <tr v-for="tag in tags" :key="tag.id" @click.stop.prevent="openTimeline(tag.tagName)">
           <td>
             {{ tag.tagName }}
           </td>
diff --git a/src/renderer/components/TimelineSpace/Contents/Search.vue b/src/renderer/components/TimelineSpace/Contents/Search.vue
index 974d0f0c70..82be82fcf7 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search.vue
@@ -9,10 +9,10 @@
         <div class="clearfix"></div>
       </el-form>
     </div>
-    <div class="search-result">
+    <div class="search-result" v-if="account.account && account.server">
       <search-account v-if="target === 'account'" :results="accounts"></search-account>
-      <search-tag v-else-if="target === 'tag'" :results="tags"></search-tag>
-      <search-toots v-else-if="target === 'toot'" :results="statuses"></search-toots>
+      <search-tag v-else-if="target === 'tag'" :tags="tags"></search-tag>
+      <search-toots v-else-if="target === 'toot'" :statuses="statuses" :account="account.account" :server="account.server"></search-toots>
     </div>
   </div>
 </template>
@@ -140,7 +140,8 @@ export default defineComponent({
       accounts,
       tags,
       statuses,
-      $t: t
+      $t: t,
+      account
     }
   }
 })
diff --git a/src/renderer/components/TimelineSpace/Contents/Search/Tag.vue b/src/renderer/components/TimelineSpace/Contents/Search/Tag.vue
index 01445a1314..09c8a326da 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search/Tag.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search/Tag.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="search_tag">
-    <DynamicScroller :items="results" :min-item-size="46" key-field="name" class="scroller" page-mode>
+    <DynamicScroller :items="tags" :min-item-size="46" key-field="name" class="scroller" page-mode>
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.name]" :data-index="index" :watchData="true">
           <tag :tag="item"></tag>
@@ -19,8 +19,8 @@ export default defineComponent({
   name: 'search-tag',
   components: { Tag },
   props: {
-    results: {
-      type: Object as PropType<Array<Entity.Account>>,
+    tags: {
+      type: Object as PropType<Array<Entity.Tag>>,
       required: true
     }
   }
diff --git a/src/renderer/components/TimelineSpace/Contents/Search/Toots.vue b/src/renderer/components/TimelineSpace/Contents/Search/Toots.vue
index ab625a9d33..5c33cadd97 100644
--- a/src/renderer/components/TimelineSpace/Contents/Search/Toots.vue
+++ b/src/renderer/components/TimelineSpace/Contents/Search/Toots.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="search_account">
-    <DynamicScroller :items="results" :min-item-size="60" class="scroller" page-mode>
+    <DynamicScroller :items="statuses" :min-item-size="60" class="scroller" page-mode>
       <template v-slot="{ item, index, active }">
         <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
-          <toot :message="item"></toot>
+          <toot :message="item" :account="account" :server="server"></toot>
         </DynamicScrollerItem>
       </template>
     </DynamicScroller>
@@ -14,13 +14,23 @@
 import { defineComponent, PropType } from 'vue'
 import { Entity } from 'megalodon'
 import Toot from '@/components/organisms/Toot.vue'
+import { LocalAccount } from '~/src/types/localAccount'
+import { LocalServer } from '~/src/types/localServer'
 
 export default defineComponent({
   name: 'search-account',
   components: { Toot },
   props: {
-    results: {
-      type: Object as PropType<Array<Entity.Account>>,
+    statuses: {
+      type: Object as PropType<Array<Entity.Status>>,
+      required: true
+    },
+    account: {
+      type: Object as PropType<LocalAccount>,
+      required: true
+    },
+    server: {
+      type: Object as PropType<LocalServer>,
       required: true
     }
   }
diff --git a/src/renderer/components/TimelineSpace/ReceiveDrop.vue b/src/renderer/components/TimelineSpace/ReceiveDrop.vue
index d4634140bb..d54edac87c 100644
--- a/src/renderer/components/TimelineSpace/ReceiveDrop.vue
+++ b/src/renderer/components/TimelineSpace/ReceiveDrop.vue
@@ -13,7 +13,7 @@ import { useTranslation } from 'i18next-vue'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'receive-drop',
+  name: 'ReceiveDrop',
   setup() {
     const { t } = useTranslation()
     return { $t: t }
diff --git a/src/renderer/components/organisms/Notification/StatusReaction.vue b/src/renderer/components/organisms/Notification/StatusReaction.vue
index 47a20cfcf8..454f264696 100644
--- a/src/renderer/components/organisms/Notification/StatusReaction.vue
+++ b/src/renderer/components/organisms/Notification/StatusReaction.vue
@@ -70,8 +70,8 @@
               >
                 <font-awesome-icon icon="eye" class="hide" />
               </el-button>
-              <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments">
-                <FailoverImg :srzc="media.preview_url" :title="media.description" />
+              <div class="media" v-for="media in mediaAttachments" :key="media.id">
+                <FailoverImg :srzc="media.preview_url" :title="media.description ? media.description : ''" />
                 <el-tag class="media-label" size="small" v-if="media.type == 'gifv'">GIF</el-tag>
                 <el-tag class="media-label" size="small" v-else-if="media.type == 'video'">VIDEO</el-tag>
               </div>
diff --git a/src/renderer/components/organisms/Toot.vue b/src/renderer/components/organisms/Toot.vue
index f5b8ec803a..a249a0a2b3 100644
--- a/src/renderer/components/organisms/Toot.vue
+++ b/src/renderer/components/organisms/Toot.vue
@@ -62,11 +62,11 @@
             <el-button v-if="sensitive && isShowAttachments" class="hide-sensitive" link :title="$t('cards.toot.hide')" @click="toggleCW()">
               <font-awesome-icon icon="eye" class="hide" />
             </el-button>
-            <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments">
+            <div class="media" v-for="media in mediaAttachments" :key="media.id">
               <FailoverImg
                 :src="media.preview_url ? media.preview_url : originalMessage.account.avatar"
                 @click="openImage(media.url, mediaAttachments)"
-                :title="media.description"
+                :title="media.description ? media.description : ''"
               />
               <el-tag class="media-label" size="small" v-if="media.type === 'gifv'">GIF</el-tag>
               <el-tag class="media-label" size="small" v-else-if="media.type === 'video'">VIDEO</el-tag>