10.46.0

* Resolve #3160

* Fix bug

* Fix bug

.circleci/config.yml

@@ -1,11 +1,5 @@
 version: 2.1
 
-general:
-  branches:
-    ignore:
-      - l10n_develop
-      - imgbot
-
 executors:
   default:
     working_directory: /tmp/workspace
@@ -17,12 +11,28 @@ executors:
     working_directory: /tmp/workspace
     docker:
       - image: docker:latest
+  alpine:
+    working_directory: /tmp/workspace
+    docker:
+      - image: alpine:latest
 
 jobs:
+  ok:
+    executor: alpine
+    steps:
+      - run:
+          name: OK
+          command: |
+            echo -e '\033[0;32mOK\033[0;39m'
+
   build:
     executor: default
     steps:
       - checkout
+      - run:
+          name: Ensure package-lock.json
+          command: |
+            [ ! -e package-lock.json ] && echo '{}' > package-lock.json
       - restore_cache:
           name: Restore npm package caches
           keys:
@@ -35,11 +45,12 @@ jobs:
           name: Install Dependencies
           command: |
             npm install
+            npm prune
       - run:
           name: Configure
           command: |
-            cp .ci/default.yml .config
-            cp .ci/test.yml .config
+            cp .circleci/misskey/default.yml .config
+            cp .circleci/misskey/test.yml .config
       - run:
           name: Build
           command: |
@@ -50,8 +61,8 @@ jobs:
           key: npm-v1-arch-{{ arch }}-env-{{ .Environment.variableName }}-package-{{ checksum "package.json" }}-lock-{{ checksum "package-lock.json" }}-ls-{{ checksum "ls" }}
           paths:
             - node_modules
-      - store_artifacts:
-          path: built
+#      - store_artifacts:
+#          path: built
       - persist_to_workspace:
           root: .
           paths:
@@ -97,8 +108,7 @@ jobs:
       - run:
           name: Build
           command: |
-            docker build . | tee docker.log
-            tail -n 1 docker.log | read __Successfully __built tag
+            docker build -t misskey/misskey .
       - when:
           condition: <<parameters.with_deploy>>
           steps:
@@ -107,7 +117,9 @@ jobs:
                 command: |
                   if [ "$DOCKERHUB_USERNAME$DOCKERHUB_PASSWORD" ]
                    then
-                    docker tag $tag misskey/misskey
+                    curl -LSs 'https://github.com/stedolan/jq/releases/download/jq-1.6/jq-linux64' > jq
+                    chmod +x jq
+                    docker tag misskey/misskey misskey/misskey:$(cat package.json | jq -r .version)
                     docker login -u $DOCKERHUB_USERNAME -p $DOCKERHUB_PASSWORD
                     docker push misskey/misskey
                    else
@@ -118,18 +130,38 @@ workflows:
   version: 2
   build-and-test:
     jobs:
-      - build
+      - ok:
+          filters:
+            branches:
+              only:
+                - l10n_develop
+                - imgbot
+      - build:
+          filters:
+            branches:
+              ignore:
+                - l10n_develop
+                - imgbot
       - test:
           requires:
             - build
+          filters:
+            branches:
+              ignore:
+#                - master
+                - l10n_develop
+                - imgbot
       - test:
           without_redis: "true"
           requires:
             - build
-      - docker:
           filters:
             branches:
-              ignore: master
+              only: master
+#      - docker:
+#          filters:
+#            branches:
+#              ignore: master
       - docker:
           with_deploy: "true"
           filters:

.circleci/misskey/default.yml

@@ -1,6 +1,3 @@
-maintainer:
-  name: syuilo
-  url: 'https://syuilo.com'
 url: 'http://misskey.local'
 port: 80
 mongodb:

.circleci/misskey/test.yml

@@ -1,6 +1,3 @@
-maintainer:
-  name: syuilo
-  url: 'https://syuilo.com'
 url: 'http://misskey.local'
 port: 80
 mongodb:

.config/example.yml

@@ -1,13 +1,3 @@
-name: example-instance-name # Name of your instance
-description: example-description # Description of your instance
-
-maintainer:
-  name: example-maitainer-name # Your name
-  url: http://example.com/ # Your contact (http or mailto)
-  repository_url: https://github.com/syuilo/misskey # Repository URL
-  feedback_url: https://github.com/syuilo/misskey/issues # Feedback URL (e.g. github issue)
-
-
 # Final accessible URL seen by a user.
 url: https://example.tld/
 
@@ -25,7 +15,7 @@ url: https://example.tld/
 #   +------+      |+-------------+      +----------------+|
 #                 +---------------------------------------+
 #
-#   You need to setup reverse proxy. (eg. Nginx)
+#   You need to setup reverse proxy. (eg. nginx)
 #   You do not define 'https' section.
 
 # Option 2: Standalone
@@ -60,21 +50,6 @@ mongodb:
   user: example-misskey-user
   pass: example-misskey-pass
 
-# Drive capacity of a local user (MB)
-localDriveCapacityMb: 256
-
-# Drive capacity of a remote user (MB)
-remoteDriveCapacityMb: 8
-
-# If enabled:
-#  Server will not cache remote files (Using direct link instead).
-#  You can save your storage.
-#
-#  NOTE:
-#  * Users cannot see remote images when they turn off "Show media from a remote server" setting.
-#  * Since thumbnails are not provided, traffic increases.
-preventCacheRemoteFiles: false
-
 drive:
   storage: 'db'
 
@@ -113,6 +88,10 @@ drive:
   #   accessKey: XXX
   #   secretKey: YYY
 
+# If enabled:
+#  The first account created is automatically marked as Admin.
+autoAdmin: true
+
 #
 # Below settings are optional
 #
@@ -129,11 +108,6 @@ drive:
 #  port: 9200
 #  pass: null
 
-# reCAPTCHA
-#recaptcha:
-#  site_key: example-site-key
-#  secret_key: example-secret-key
-
 # ServiceWorker
 #sw:
 #  # Public key of VAPID
@@ -142,17 +116,6 @@ drive:
 #  # Private key of VAPID
 #  private_key: example-sw-private-key
 
-# Twitter integration
-# You need to set the oauth callback url as : https://<your-misskey-instance>/api/tw/cb
-#twitter:
-#  consumer_key: example-twitter-consumer-key
-#  consumer_secret: example-twitter-consumer-secret-key
-
-# Ghost
-# Ghost account is an account used for the purpose of delegating
-# followers when putting users in the list.
-#ghost: user-id-of-your-ghost-account
-
 # Clustering
 #clusterLimit: 1
 
@@ -164,6 +127,3 @@ drive:
 #  external: true
 #  engine: http://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-misskey-api.cgi?{{host}}+{{user}}+{{limit}}+{{offset}}
 #  timeout: 300000
-
-# Max allowed note text length in charactors
-maxNoteTextLength: 1000

.npmrc

@@ -1 +1,2 @@
 save-exact = true
+package-lock = false

.travis.yml

@@ -1,41 +0,0 @@
-# travis file
-# https://docs.travis-ci.com/user/customizing-the-build
-
-notifications:
-  email: false
-
-branches:
-  except:
-    - l10n_master
-
-language: node_js
-
-node_js:
-  - 11.0.0
-
-env:
-  - CXX=g++-4.8 NODE_ENV=production
-
-addons:
-  apt:
-    sources:
-      - ubuntu-toolchain-r-test
-    packages:
-      - g++-4.8
-
-cache:
-  directories:
-    - node_modules
-
-services:
-  - mongodb
-  - redis-server
-
-before_script:
-  - npm install
-
-  # 設定ファイルを配置
-  - cp ./.ci/default.yml ./.config
-  - cp ./.ci/test.yml ./.config
-
-  - travis_wait npm run build

CONTRIBUTING.md

@@ -6,9 +6,6 @@ Feature suggestions and bug reports are filed in https://github.com/syuilo/missk
 Before creating a new issue, please search existing issues to avoid duplication.
 If you find the existing issue, please add your reaction or comment to the issue.
 
-## Internationalization (i18n)
-Please see [Translation guide](./docs/translate.en.md).
-
 ## Localization (l10n)
 Please use [Crowdin](https://crowdin.com/project/misskey) for localization.
 
@@ -23,5 +20,5 @@ Please use [Crowdin](https://crowdin.com/project/misskey) for localization.
 * Test codes are located in `/test`.
 
 ## Continuous integration
-Misskey uses Travis for automated test.
-Configuration files are located in `/.travis`.
+Misskey uses CircleCI for automated test.
+Configuration files are located in `/.circleci`.

README.md

@@ -4,16 +4,17 @@
 ================================================================
 
 [![CircleCI](https://circleci.com/gh/syuilo/misskey.svg?style=svg)](https://circleci.com/gh/syuilo/misskey)
-[![][travis-badge]][travis-link]
 [![][dependencies-badge]][dependencies-link]
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
 **Sophisticated microblogging platform, evolving forever.**
 
-[Misskey](https://misskey.xyz) is a decentralized microblogging platform born on Earth.
+<p align="justify">
+<a href="https://misskey.xyz">Misskey</a> is a decentralized microblogging platform born on Earth.
 Since it exists within the Fediverse (a universe where various social media platforms are organized),
 it is mutually linked with other social media platforms.
-Why don't you take a short break from the hustle and bustle of the city, and dive into a new Internet? [Find instance!](https://joinmisskey.github.io/)
+Why don't you take a short break from the hustle and bustle of the city, and dive into a new Internet? <a href="https://joinmisskey.github.io/">Find instance!</a>
+</p>
 
 <a href="https://www.patreon.com/syuilo"><img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" alt="Become a Patron!" width="160" /></a>
 
@@ -25,8 +26,8 @@ Why don't you take a short break from the hustle and bustle of the city, and div
 <img src="/assets/about/post.png" align="left" height="200px"/>
 
 <h3 align="left">Posting</h3>
-<p align="left">
-Just post your idea, hot topics and anything you want to share. You may want to decorate your words, attach your favorite pictures, send files including movies and create a poll - those are the things you can do on Misskey!
+<p align="justify">
+Just post your idea, hot topics and anything you want to share. You may decorate your words, attach your favorite pictures or movies, and create a poll - those are all supported in Misskey!
 </p>
 
 ---
@@ -34,8 +35,8 @@ Just post your idea, hot topics and anything you want to share. You may want to
 <img src="/assets/about/reaction.png" align="right" height="200px"/>
 
 <h3 align="right">Reactions</h3>
-<p align="right">
-Easiest way to tell your emotions. Misskey allows you to add various type of reactions to other’s post. The emotional experience on Misskey will never be on other SNSs which only able to push “likes”.
+<p align="justify">
+The simplest way to tell your emotions to the posts. You can choose the best reaction from various reactions. Reactions on Misskey has much more expressive than other social media which only allows pushing “likes”.
 </p>
 
 ---
@@ -43,8 +44,8 @@ Easiest way to tell your emotions. Misskey allows you to add various type of rea
 <img src="/assets/about/ui.png" align="left" height="200px"/>
 
 <h3 align="left">Interface</h3>
-<p align="left">
-No UI fits for everyone. Therefore, Misskey has a highly customizable UI for your taste. You can edit layouts of your timeline, place selectable widgets you can easily move and create your unique home as this place will be your home.
+<p align="justify">
+Highly customizable UI for your taste. We understand no UI fits for everyone. Make your graceful home by editing, adjusting layouts of timeline, and placing widgets.
 </p>
 
 ---
@@ -52,13 +53,13 @@ No UI fits for everyone. Therefore, Misskey has a highly customizable UI for you
 <img src="/assets/about/drive.png" align="right" width="300px"/>
 
 <h3 align="right">Misskey Drive</h3>
-<p align="right">
-Wanna post a picture you have already uploaded? Wish to organize, name and create a folder for your uploaded files? Misskey Drive is the best solution for you. Very easy to share your files online.
+<p align="justify">
+Organized uploaded files. Wanna post a picture you have already uploaded? Wish to create a folder for your files? Misskey Drive is the best solution for you.
 </p>
 
 ---
 
-and more! You can see it with your own eyes at [misskey.xyz](https://misskey.xyz) or [other instances](https://joinmisskey.github.io/).
+and more! Now it's time to experience the world with your own eyes at [misskey.xyz](https://misskey.xyz) or [other instances](https://joinmisskey.github.io/).
 
 :package: Create your own instance
 ----------------------------------------------------------------
@@ -124,8 +125,6 @@ Misskey is an open-source software licensed under the [GNU AGPLv3](LICENSE).
 
 [agpl-3.0]:           https://www.gnu.org/licenses/agpl-3.0.en.html
 [agpl-3.0-badge]:     https://img.shields.io/badge/license-AGPL--3.0-444444.svg?style=flat-square
-[travis-link]:        https://travis-ci.org/syuilo/misskey
-[travis-badge]:       http://img.shields.io/travis/syuilo/misskey/master.svg?style=flat-square
 [dependencies-link]:  https://david-dm.org/syuilo/misskey
 [dependencies-badge]: https://img.shields.io/david/syuilo/misskey.svg?style=flat-square
 

cli/update-remote-user.js

@@ -1,12 +0,0 @@
-const updatePerson = require('../built/remote/activitypub/models/person').updatePerson;
-
-const args = process.argv.slice(2);
-const user = args[0];
-
-console.log(`Updating ${user}...`);
-
-updatePerson(user).then(() => {
-	console.log(`Updated ${user}`);
-}, e => {
-	console.error(e);
-});

docs/setup.en.md

@@ -22,7 +22,7 @@ adduser --disabled-password --disabled-login misskey
 Please install and setup these softwares:
 
 #### Dependencies :package:
-* **[Node.js](https://nodejs.org/en/)**
+* **[Node.js](https://nodejs.org/en/)** >= 10.0.0
 * **[MongoDB](https://www.mongodb.com/)** >= 3.6
 
 ##### Optional
@@ -47,11 +47,6 @@ In root :
 4. `git checkout $(git tag -l | grep -v 'rc[0-9]*$' | sort -V | tail -n 1)` Checkout to the [latest release](https://github.com/syuilo/misskey/releases/latest)
 5. `npm install` Install misskey dependencies.
 
-*(optional)* reCAPTCHA tokens
-----------------------------------------------------------------
-If you want to enable reCAPTCHA, you need to generate reCAPTCHA tokens:
-Please visit https://www.google.com/recaptcha/intro/ and generate keys.
-
 *(optional)* Generating VAPID keys
 ----------------------------------------------------------------
 If you want to enable ServiceWorker, you need to generate VAPID keys:
@@ -62,13 +57,6 @@ npm install web-push -g
 web-push generate-vapid-keys
 ```
 
-*(optional)* Create a twitter application
-----------------------------------------------------------------
-If you want to enable the twitter integration, you need to create a twitter app at [https://developer.twitter.com/en/apply/user](https://developer.twitter.com/en/apply/user).
-
-In the app you need to set the oauth callback url as : https://misskey-instance/api/tw/cb
-
-
 *5.* Make configuration file
 ----------------------------------------------------------------
 1. `cp .config/example.yml .config/default.yml` Copy the `.config/example.yml` and rename it to `default.yml`.

docs/setup.ja.md

@@ -22,7 +22,7 @@ adduser --disabled-password --disabled-login misskey
 これらのソフトウェアをインストール・設定してください:
 
 #### 依存関係 :package:
-* **[Node.js](https://nodejs.org/en/)**
+* **[Node.js](https://nodejs.org/en/)** (10.0.0以上)
 * **[MongoDB](https://www.mongodb.com/)** (3.6以上)
 
 ##### オプション
@@ -53,11 +53,6 @@ adduser --disabled-password --disabled-login misskey
 4. `git checkout $(git tag -l | grep -v 'rc[0-9]*$' | sort -V | tail -n 1)` [最新のリリース](https://github.com/syuilo/misskey/releases/latest)を確認
 5. `npm install` Misskeyの依存パッケージをインストール
 
-*(オプション)* reCAPTCHAトークン
-----------------------------------------------------------------
-reCAPTCHAを有効にする場合、reCAPTCHAトークンを取得する必要があります。
-https://www.google.com/recaptcha/intro/ にアクセスしてトークンを取得してください。
-
 *(オプション)* VAPIDキーペアの生成
 ----------------------------------------------------------------
 ServiceWorkerを有効にする場合、VAPIDキーペアを生成する必要があります:

docs/translate.en.md

@@ -1,27 +0,0 @@
-Misskey's Translation
-=====================
-
-If you find an untranslated part on Misskey:
---------------------------------------------
-
-1. Look for untranslated parts in the misskey's source code.
-	- For instance, if you find an untranslated part in: `src/client/app/mobile/views/pages/home.vue`.
-
-2. Replace the untranslated portion with a character string of the form `%i18n:@foo%`.
-	- In fact, `foo` should be a word that is appropriate for the situation and is easy to understand in English.
-	- For example, if the untranslated portion is the following "タイムライン" you must write: `%i18n:@timeline%`.
-
-3. Open the `locales/ja-JP.yml`, check whether the <strong>file name (path)</strong> found in step 1 exists, if not, create it.
-	- Do not put the beginning of the path `src/client/app/` in the locale file.
-	- For example, in this case we want to modify untranslated parts of `src/client/app/mobile/views/pages/home.vue`, so the key is `mobile/views/pages/home.vue`.
-
-4. Add the text property using the `foo` keyword below the path that you found or created in step 2. Make sure to type your text in quotation marks. Text should always be inside of quotes.
-	-   For example, in this case we add timeline: `timeline: "タイムライン"` to `locales/ja-JP.yml`.
-
-5. When you add text to the ja-JP file (of syuilo/misskey), it will automatically be applied to all other local language files within 24-48 hours. Translations added in ja-JP file should contain the original Japanese strings (example see step 4). 
-
-6. The new strings will automatically appear in the localized language files in the original Japanese text. After that, please go to [CrowdIn](https://crowdin.com/project/misskey) to do the localized translations in your language.
-
-7. And done！
-
-For more details, please refer to this [commit](https://github.com/syuilo/misskey/commit/10f6d5980fa7692ccb45fbc5f843458b69b7607c).

docs/translate.fr.md

@@ -1,23 +0,0 @@
-Traduction de Misskey
-=====================
-
-Si vous trouvez un segment non-traduit sur Misskey :
-----------------------------------------------------
-
-1. Veuillez chercher des parties non-traduites dans le code source de Misskey.
-	- Par exemple, supposons que vous trouviez un segment non-traduit dans : `src/client/app/mobile/views/pages/home.vue`.
-
-2. Remplacez la portion non-traduite par une chaîne de caractères de type `%i18n:@foo%`.
-	- En fait, `foo` doit être un mot approprié à la situation et facile à comprendre en français.
-	- Par exemple, si le segment non-traduit est「タイムライン」on peut écrire : `%i18n:@timeline%`.
-
-3. Ouvrez chaque fichier linguistique dans /locales, vérifiez si le <strong>nom du fichier (chemin)</strong> trouvé dans l'étape 1 existe, sinon créez-le.
-	- Ne mettez pas le début du chemin `src/client/app/` dans les fichiers /locales.
-	- Par exemple, dans ce cas de figure, nous voulons modifier le segment non-traduit de : `src/client/app/mobile/views/pages/home.vue`donc il faut juste écrire : `mobile/views/pages/home.vue` dans les fichiers linguistiques.
-
-4. Ajoutez la propriété du texte traduit grâce à la clef `foo`, en-dessous du chemin correspondant à votre modification que vous avez trouvé ou créé dans l'étape 2. À côté, veuillez indiquer entre "guillemets" la valeur de votre traduction.
-	- Par exemple, dans ce cas de figure, nous ajoutons la propriété et la traduction `timeline: "Timeline"` à `locales/fr.yml`, mais aussi la propriété et la version originale `timeline: "タイムライン"` à `locales/ja-JP.yml`.
-
-5. Vous avez réussi à traduire une portion de misskey ！
-
-Pour plus de détails, veuillez vous référer à ce  [commit](https://github.com/syuilo/misskey/commit/10f6d5980fa7692ccb45fbc5f843458b69b7607c).

docs/translate.ja.md

@@ -1,23 +0,0 @@
-Misskeyの翻訳
-============
-
-Misskey内の未翻訳箇所を見つけたら
--------------------------------
-
-1. Misskeyのソースコード内から未翻訳箇所を探してください。
-	- 例えば`src/client/app/mobile/views/pages/home.vue`で未翻訳箇所を見つけたとします。
-
-2. 未翻訳箇所を`%i18n:@foo%`のような形式の文字列に置換してください。
-	- `foo`は実際にはその場に適したわかりやすい(英語の)名前にしてください。
-	- 例えば未翻訳箇所が「タイムライン」というテキストだった場合、`%i18n:@timeline%`のようにします。
-
-3. `locales/ja-JP.yml`を開き、1.で見つけた<strong>ファイル名(パス)</strong>のキーが存在するか確認し、無ければ作成してください。
-	- パスの`src/client/app/`は省略してください。
-	- 例えば、今回の例では`src/client/app/mobile/views/pages/home.vue`の未翻訳箇所を修正したいので、キーは`mobile/views/pages/home.vue`になります。
-
-4. そのキーの直下に2.で置換した`foo`の部分をキーとし、テキストを値とするプロパティを追加します。
-	- 例えば、今回の例で言うと`locales/ja-JP.yml`に`timeline: "タイムライン"`を追加します。
-
-5. 完了です！
-
-詳しくは、[このコミット](https://github.com/syuilo/misskey/commit/10f6d5980fa7692ccb45fbc5f843458b69b7607c)などを参考にしてください。

gulpfile.ts

@@ -21,7 +21,6 @@ import * as htmlmin from 'gulp-htmlmin';
 const uglifyes = require('uglify-es');
 
 const locales = require('./locales');
-import { fa } from './src/misc/fa';
 
 const uglify = uglifyComposer(uglifyes, console);
 
@@ -164,8 +163,7 @@ gulp.task('build:client:pug', [
 		gulp.src('./src/client/app/base.pug')
 			.pipe(pug({
 				locals: {
-					themeColor: constants.themeColor,
-					facss: fa.dom.css()
+					themeColor: constants.themeColor
 				}
 			}))
 			.pipe(htmlmin({

locales/ca-ES.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "左に重ねる"
     pop-right: "右に出す"
   dev: "アプリの作成に失敗しました。再度お試しください。"
+  ai-chan-kawaii: "藍ちゃかわいい"
 auth/views/form.vue:
   share-access: "<i>{{ app.name }}</i>があなたのアカウントにアクセスすることを<b>許可</b>しますか？"
   permission-ask: "このアプリは次の権限を要求しています:"
@@ -874,7 +875,7 @@ common/views/components/mute-and-block.vue:
   block: "ブロック"
   no-muted-users: "ミュートしているユーザーはいません"
   no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
+common/views/components/password-settings.vue:
   reset: "パスワードを変更する"
   enter-current-password: "現在のパスワードを入力してください"
   enter-new-password: "新しいパスワードを入力してください"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "閉じる"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
   users: "ユーザー"
   update: "更新"
   announcements: "お知らせ"
   hashtags: "ハッシュタグ"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Misskeyに戻る"
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "このインスタンス"
+  federated: "連合"
   invite: "招待"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
   suspend: "凍結"
   suspended: "凍結しました"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
   unsuspended: "凍結を解除しました"
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
   verified: "公式アカウントにしました"
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
   announcements: "お知らせ"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"
   mark-as-read-all-unread-notes: "すべての投稿を既読にする"
+  password: "パスワード"
 mobile/views/pages/user.vue:
   follows-you: "フォローされています"
   following: "フォロー"

locales/de-DE.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "Nach links schichten"
     pop-right: "Rechts andocken"
   dev: "Fehler beim Erstellen der Applikation. Bitte versuche es erneut."
+  ai-chan-kawaii: "藍ちゃかわいい"
 auth/views/form.vue:
   share-access: "<i>{{ app.name }}</i>があなたのアカウントにアクセスすることを<b>許可</b>しますか？"
   permission-ask: "このアプリは次の権限を要求しています:"
@@ -874,13 +875,13 @@ common/views/components/mute-and-block.vue:
   block: "ブロック"
   no-muted-users: "ミュートしているユーザーはいません"
   no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
-  reset: "Passwort ändern"
-  enter-current-password: "Derzeitiges Passwort eingeben"
-  enter-new-password: "Neues Passwort eingeben"
-  enter-new-password-again: "Neues Passwort erneut eingeben"
-  not-match: "Passwörter stimmen nicht überein."
-  changed: "Passwort geändert"
+common/views/components/password-settings.vue:
+  reset: "パスワードを変更する"
+  enter-current-password: "現在のパスワードを入力してください"
+  enter-new-password: "新しいパスワードを入力してください"
+  enter-new-password-again: "もう一度新しいパスワードを入力してください"
+  not-match: "新しいパスワードが一致しません"
+  changed: "パスワードを変更しました"
 desktop/views/components/sub-note-content.vue:
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "閉じる"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
   users: "ユーザー"
   update: "更新"
   announcements: "お知らせ"
   hashtags: "ハッシュタグ"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Misskeyに戻る"
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "このインスタンス"
+  federated: "連合"
   invite: "招待"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
   suspend: "凍結"
   suspended: "凍結しました"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
   unsuspended: "凍結を解除しました"
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
   verified: "公式アカウントにしました"
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
   announcements: "お知らせ"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"
   mark-as-read-all-unread-notes: "すべての投稿を既読にする"
+  password: "パスワード"
 mobile/views/pages/user.vue:
   follows-you: "フォローされています"
   following: "フォロー"

locales/en-US.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "Stack to the left"
     pop-right: "Dock on the right"
   dev: "Failed to create the application. Please try again."
+  ai-chan-kawaii: "Ai-chan kawaii!"
 auth/views/form.vue:
   share-access: "Would you <b>allow</b> <i>{{ app.name }}</i> to access your account?"
   permission-ask: "This application requires the following permissions:"
@@ -249,7 +250,7 @@ common/views/components/games/reversi/reversi.room.vue:
   this-game-is-started-soon: "The game will begin in seconds"
   waiting-for-other: "Waiting for the opponent"
   waiting-for-me: "Waiting for the your preparation"
-  waiting-for-both: "Prepareing"
+  waiting-for-both: "Preparing"
   cancel: "Cancel"
   ready: "Ready"
   cancel-ready: "Cancel \"Ready\""
@@ -874,13 +875,13 @@ common/views/components/mute-and-block.vue:
   block: "Blocking"
   no-muted-users: "No muted users"
   no-blocked-users: "No blocked users"
-desktop/views/components/settings.password.vue:
+common/views/components/password-settings.vue:
   reset: "Change password"
   enter-current-password: "Enter the current password"
   enter-new-password: "Enter the new password"
-  enter-new-password-again: "Enter new password again"
+  enter-new-password-again: "Enter the new password again"
   not-match: "The new passwords do not match"
-  changed: "Password updated"
+  changed: "Password changed"
 desktop/views/components/sub-note-content.vue:
   private: "This post is private"
   deleted: "This post has been deleted"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "Pop-out"
   close: "Close"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "Dashboard"
+  instance: "Instance"
+  emoji: "Emoji"
   users: "Users"
-  update: "Updates"
+  update: "Update"
   announcements: "Announcements"
   hashtags: "Hashtags"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Back to Misskey"
+admin/views/dashboard.vue:
   dashboard: "Dashboard"
-  all-users: "All Users"
-  original-users: "Users on this instance"
-  all-notes: "All the posts"
-  original-notes: "Posts on this instance"
+  accounts: "Accounts"
+  notes: "Notes"
+  drive: "Drive"
+  instances: "Instances"
+  this-instance: "This instance"
+  federated: "Federated"
   invite: "Invite"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "Chart"
+  per-day: "per Day"
+  per-hour: "per Hour"
+  federation: "Federation"
+  notes: "Posts"
+  users: "Users"
+  drive: "Drive"
+  network: "Network"
+  charts:
+    federation-instances: "The number of instances: increase/decrease"
+    federation-instances-total: "Total number of instances"
+    notes: "The number of posts: increase/decrease (Combined)"
+    local-notes: "The number of posts: increase/decrease (Local)"
+    remote-notes: "The number of posts: increase/decrease (Remote)"
+    notes-total: "Total posts"
+    users: "The number of users: increase/decrease"
+    users-total: "Total users"
+    drive: "Capacity used as the storage: increase/decrease"
+    drive-total: "Total usage of Drive"
+    drive-files: "The number of files on the storage: increase/decrease"
+    drive-files-total: "Total number of files on Drive"
+    network-requests: "Requests"
+    network-time: "Response time"
+    network-usage: "Traffic"
+admin/views/users.vue:
   suspend-user: "Suspend a user"
   suspend: "Suspend"
   suspended: "Successfully suspended."
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "Unsuspend users"
   unsuspend: "Unsuspend"
   unsuspended: "The user has successfully unsuspended."
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "User account verification settings"
   verify: "Verify account"
   verified: "The account is now being verified"
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "User account unverification settings"
   unverify: "Unverify account"
   unverified: "The account is now being unverified"
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "Add emoji"
+    name: "Emoji name"
+    name-desc: "You can use the characters a~z 0~9 _"
+    aliases: "Aliases"
+    aliases-desc: "You can add more than one, separated by spaces."
+    url: "Image URL"
+    add: "Add"
+  emojis:
+    title: "Emojis"
+    update: "Update"
+    remove: "Remove"
+admin/views/announcements.vue:
   announcements: "Announcements"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "Save"
+  remove: "Remove"
+  add: "Add"
+  title: "Title"
+  text: "Content"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "Only media posts"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "Sounds"
   enable-sounds: "Enable sounds"
   mark-as-read-all-unread-notes: "Mark all posts as read"
+  password: "Password"
 mobile/views/pages/user.vue:
   follows-you: "Follows you"
   following: "Following"

locales/es-ES.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "A la izqda."
     pop-right: "A la dcha."
   dev: "アプリの作成に失敗しました。再度お試しください。"
+  ai-chan-kawaii: "藍ちゃかわいい"
 auth/views/form.vue:
   share-access: "¿Deseas <b>permitir</b> a <i>{{ app.name }}</i> acceder a tu cuenta?"
   permission-ask: "La aplicación requiere los siguientes permisos:"
@@ -874,13 +875,13 @@ common/views/components/mute-and-block.vue:
   block: "ブロック"
   no-muted-users: "ミュートしているユーザーはいません"
   no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
-  reset: "Cambiar contraseña"
-  enter-current-password: "Ingresar contraseña actual"
-  enter-new-password: "Ingresar nueva contraseña"
-  enter-new-password-again: "Ingresar nueva contraseña de nuevo"
-  not-match: "Las nuevas contraseñas no se corresponden consigo mismas"
-  changed: "Contraseña actualizada"
+common/views/components/password-settings.vue:
+  reset: "パスワードを変更する"
+  enter-current-password: "現在のパスワードを入力してください"
+  enter-new-password: "新しいパスワードを入力してください"
+  enter-new-password-again: "もう一度新しいパスワードを入力してください"
+  not-match: "新しいパスワードが一致しません"
+  changed: "パスワードを変更しました"
 desktop/views/components/sub-note-content.vue:
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "閉じる"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
   users: "ユーザー"
   update: "更新"
   announcements: "お知らせ"
   hashtags: "ハッシュタグ"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Misskeyに戻る"
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "このインスタンス"
+  federated: "連合"
   invite: "招待"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
   suspend: "凍結"
   suspended: "凍結しました"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
   unsuspended: "凍結を解除しました"
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
   verified: "公式アカウントにしました"
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
   announcements: "お知らせ"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"
   mark-as-read-all-unread-notes: "すべての投稿を既読にする"
+  password: "パスワード"
 mobile/views/pages/user.vue:
   follows-you: "フォローされています"
   following: "フォロー"

locales/fr-FR.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "Vers la gauche"
     pop-right: "Vers la droite"
   dev: "Échec lors de la création de l’application. Veuillez réessayer."
+  ai-chan-kawaii: "藍ちゃかわいい"
 auth/views/form.vue:
   share-access: "Désirez-vous <b>autoriser</b> <i>{{ app.name }}</i> à avoir accès à votre compte ?"
   permission-ask: "Cette application nécessite les autorisations suivantes :"
@@ -444,7 +445,7 @@ common/views/components/profile-editor.vue:
   is-cat: "Ce compte est un Chat"
   is-bot: "Ce compte est un Bot"
   is-locked: "Demandes d’abonnements requièrent l’approbation"
-  careful-bot: "Botからのフォローだけ承認制にする"
+  careful-bot: "Les demandes d’abonnements venant de Bots requièrent l’approbation"
   advanced: "Avancé"
   privacy: "Vie privée"
   save: "Mettre à jour le profil"
@@ -501,7 +502,7 @@ common/views/widgets/tips.vue:
   tips-line14: "ホームのカスタマイズ中、ウィジェットを右クリックしてデザインを変更できます"
   tips-line17: "Vous pouvez mettre un texte en surbrillance en le mettant entre ** **"
   tips-line19: "Plusieurs fenêtres peuvent être détachées en dehors du navigateur."
-  tips-line20: "カレンダーウィジェットのパーセンテージは、経過の割合を示しています"
+  tips-line20: "Pourcentage sur le widget calendrier qui indique le pourcentage de temps passé"
   tips-line21: "Vous pouvez aussi utiliser l'API pour développer des Bots."
   tips-line23: "Mayu est mignone avec ses sourcils."
   tips-line24: "Misskey a vu le jour en 2014"
@@ -548,7 +549,7 @@ desktop/views/components/charts.vue:
   drive: "Drive"
   network: "Réseau"
   charts:
-    federation-instances: "インスタンスの増減"
+    federation-instances: "Nombre d’instances : augmentation/diminution"
     federation-instances-total: "Nombre total d’instances"
     notes: "投稿の増減 (統合)"
     local-notes: "投稿の増減 (ローカル)"
@@ -781,7 +782,7 @@ desktop/views/components/settings.vue:
   timeline: "Chronologie"
   show-my-renotes: "Afficher mes republications dans le fil"
   show-renoted-my-notes: "Afficher mes republications dans les fils"
-  show-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する"
+  show-local-renotes: "Afficher les partages locaux sur les fils"
   show-maps: "Afficher la carte"
   deck-column-align: "デッキのカラムの位置"
   deck-column-align-center: "Centrer"
@@ -865,21 +866,21 @@ common/views/components/api-settings.vue:
 desktop/views/components/settings.apps.vue:
   no-apps: "Aucune application autorisée"
 common/views/components/drive-settings.vue:
-  max: "容量"
+  max: "Maximale"
   in-use: "utilisé"
   stats: "Statistiques"
 common/views/components/mute-and-block.vue:
-  mute-and-block: "ミュートとブロック"
-  mute: "ミュート"
-  block: "ブロック"
-  no-muted-users: "ミュートしているユーザーはいません"
-  no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
-  reset: "Changer votre mot de passe"
+  mute-and-block: "Silencer / Bloquer"
+  mute: "Mettre en sourdine"
+  block: "En cours blocage"
+  no-muted-users: "Aucun utilisateur·rice n’est mis·e en sourdine"
+  no-blocked-users: "Aucun utilisateur·rice n’est bloqué·e"
+common/views/components/password-settings.vue:
+  reset: "Modifier le mot de passe"
   enter-current-password: "Entrez votre mot de passe actuel"
-  enter-new-password: "Entrez votre nouveau mot de passe"
+  enter-new-password: "Saisissez le nouveau mot de passe"
   enter-new-password-again: "Entrez à nouveau le nouveau mot de passe"
-  not-match: "Le nouveau mot de passe ne correspond pas."
+  not-match: "Les nouveaux mots de passe ne sont pas identiques"
   changed: "Mot de passe modifié avec succès"
 desktop/views/components/sub-note-content.vue:
   private: "cette publication est privée"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "Fermer"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "Tableau de bord"
+  instance: "Instance"
+  emoji: "Emoji"
   users: "Utilisateur·rice·s"
-  update: "Mises à jour"
+  update: "Mise à jour"
   announcements: "Annonces"
   hashtags: "Hashtags"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Retour vers Misskey"
+admin/views/dashboard.vue:
   dashboard: "Tableau de bord"
-  all-users: "Toutes les utilisateurrices"
-  original-users: "Utilisateur·rice·s sur cette instance"
-  all-notes: "Toutes les publications"
-  original-notes: "Publications sur cette instance"
-  invite: "Invitation"
+  accounts: "Comptes"
+  notes: "Notes"
+  drive: "Lecteur"
+  instances: "Instances"
+  this-instance: "Cette instance"
+  federated: "Fédérées"
+  invite: "Inviter"
   banner-url: "URL de la bannière"
-  disableRegistration: "Désactiver l’enregistrement de nouveaux utilisateurs·rices"
+  disableRegistration: "Désactiver l’enregistrement de nouveaux utilisateur·rice·s"
   disableLocalTimeline: "Désactiver le fil local"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "Graph"
+  per-day: "par jour"
+  per-hour: "par heure"
+  federation: "Fédération"
+  notes: "Publications"
+  users: "Utilisateur·rice·s"
+  drive: "Lecteur"
+  network: "Réseau"
+  charts:
+    federation-instances: "Nombre d’instances : augmentation/diminution"
+    federation-instances-total: "Nombre total d’instances"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "Total des publications"
+    users: "Nombre d’utilisateur·rice·s : augmentation/diminution"
+    users-total: "Nombre total des utilisateur·rice·s"
+    drive: "ドライブ使用量の増減"
+    drive-total: "Utilisation totale du lecteur"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "Nombre total de fichiers sur le lecteur"
+    network-requests: "Requêtes"
+    network-time: "Temps de réponse"
+    network-usage: "Traffic"
+admin/views/users.vue:
   suspend-user: "Suspendre un·e utilisateur·rice"
   suspend: "Suspendre"
-  suspended: "Suspendu avec succès"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
+  suspended: "Suspendu·e avec succès."
   unsuspend-user: "Lever la suspension d’utilisateur·rice·s"
   unsuspend: "Suspension levée"
   unsuspended: "La suspension de l’utilisateur·rice a été levée avec succès"
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "Paramètres de vérification du compte utilisateur"
-  verify: "Vérification du compte"
-  verified: "Le compte a été vérifié"
-desktop/views/pages/admin/admin.unverify-user.vue:
+  verify: "公式アカウントにする"
+  verified: "公式アカウントにしました"
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "Ôter la vérification du compte"
-  unverified: "Ce compte n'est pas vérifié"
-desktop/views/pages/admin/admin.announcements.vue:
+  unverified: "Ce compte n'est plus vérifié"
+admin/views/emoji.vue:
+  add-emoji:
+    title: "Ajouter un émoji"
+    name: "Nom de l’émoji"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "Aliases"
+    aliases-desc: "Vous pouvez définir plus d’un, séparés par des espaces."
+    url: "URL de l’image"
+    add: "Ajouter"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
   announcements: "Annonces"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "Enregistrer"
+  remove: "Supprimer"
+  add: "Ajouter"
+  title: "Titre"
+  text: "Contenu"
+admin/views/hashtags.vue:
   hided-tags: "Tags cachés"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "Les publications médias uniquement"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "Sons"
   enable-sounds: "Activer les sons"
   mark-as-read-all-unread-notes: "Marquer toutes les publications comme lues"
+  password: "Mot de Passe"
 mobile/views/pages/user.vue:
   follows-you: "Vous suit"
   following: "Abonnements"

locales/it-IT.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "左に重ねる"
     pop-right: "右に出す"
   dev: "アプリの作成に失敗しました。再度お試しください。"
+  ai-chan-kawaii: "藍ちゃかわいい"
 auth/views/form.vue:
   share-access: "<i>{{ app.name }}</i>があなたのアカウントにアクセスすることを<b>許可</b>しますか？"
   permission-ask: "このアプリは次の権限を要求しています:"
@@ -874,7 +875,7 @@ common/views/components/mute-and-block.vue:
   block: "ブロック"
   no-muted-users: "ミュートしているユーザーはいません"
   no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
+common/views/components/password-settings.vue:
   reset: "パスワードを変更する"
   enter-current-password: "現在のパスワードを入力してください"
   enter-new-password: "新しいパスワードを入力してください"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "閉じる"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
   users: "ユーザー"
   update: "更新"
   announcements: "お知らせ"
   hashtags: "ハッシュタグ"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Misskeyに戻る"
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "このインスタンス"
+  federated: "連合"
   invite: "招待"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
   suspend: "凍結"
   suspended: "凍結しました"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
   unsuspended: "凍結を解除しました"
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
   verified: "公式アカウントにしました"
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
   announcements: "お知らせ"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"
   mark-as-read-all-unread-notes: "すべての投稿を既読にする"
+  password: "パスワード"
 mobile/views/pages/user.vue:
   follows-you: "フォローされています"
   following: "フォロー"

locales/ja-JP.yml

@@ -25,22 +25,12 @@ common:
   application-authorization: "アプリの連携"
   close: "閉じる"
   do-not-copy-paste: "ここにコードを入力したり張り付けたりしないでください。アカウントが不正利用される可能性があります。"
-  BSoD:
-    fatal-error: ":( 致命的な問題が発生しました。"
-    update-browser-os: "お使いのブラウザ(またはOS)のバージョンを更新すると解決する可能性があります。"
-    error-code: "エラーコード"
-    browser-version: "ブラウザ バージョン"
-    client-version: "クライアント バージョン"
-    email-support: "問題が解決しない場合は、上記の情報をお書き添えの上 syuilotan@yahoo.co.jp までご連絡ください。"
-    thanks: "Thank you for using Misskey."
+  load-more: "もっと読み込む"
 
   got-it: "わかった"
   customization-tips:
     title: "カスタマイズのヒント"
-    paragraph1: "ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。"
-    paragraph2: "一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。"
-    paragraph3: "ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。"
-    paragraph4: "カスタマイズを終了するには、右上の「完了」をクリックします。"
+    paragraph: "<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p><p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p><p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p><p>カスタマイズを終了するには、右上の「完了」をクリックします。</p>"
     gotit: "Got it!"
   notification:
     file-uploaded: "ファイルがアップロードされました"
@@ -65,6 +55,7 @@ common:
 
   trash: "ゴミ箱"
   drive: "ドライブ"
+  messaging: "トーク"
 
   weekday-short:
     sunday: "日"
@@ -129,8 +120,10 @@ common:
   always-show-nsfw: "常に閲覧注意のメディアを表示する"
   always-mark-nsfw: "常にメディアを閲覧注意として投稿"
   show-full-acct: "ユーザー名のホストを省略しない"
+  show-via: "viaを表示する"
   reduce-motion: "UIの動きを減らす"
   this-setting-is-this-device-only: "このデバイスのみ"
+  use-os-default-emojis: "OS標準の絵文字を使用"
 
   do-not-use-in-production: 'これは開発ビルドです。本番環境で使用しないでください。'
 
@@ -146,13 +139,13 @@ common:
     drawn: "引き分け"
     my-turn: "あなたのターンです"
     opponent-turn: "相手のターンです"
-    turn-of: "{}のターンです"
-    past-turn-of: "{}のターン"
-    won: "{}の勝ち"
+    turn-of: "{name}のターンです"
+    past-turn-of: "{name}のターン"
+    won: "{name}の勝ち"
     black: "黒"
     white: "白"
     total: "合計"
-    this-turn: "{}ターン目"
+    this-turn: "{count}ターン目"
 
   widgets:
     analog-clock: "アナログ時計"
@@ -172,38 +165,17 @@ common:
     users: "おすすめユーザー"
     polls: "アンケート"
     post-form: "投稿フォーム"
-    messaging: "メッセージ"
     server: "サーバー情報"
     donation: "寄付のお願い"
     nav: "ナビゲーション"
     tips: "ヒント"
     hashtags: "ハッシュタグ"
 
-  deck:
-    widgets: "ウィジェット"
-    home: "ホーム"
-    local: "ローカル"
-    hybrid: "ソーシャル"
-    hashtag: "ハッシュタグ"
-    global: "グローバル"
-    mentions: "あなた宛て"
-    direct: "ダイレクト投稿"
-    notifications: "通知"
-    list: "リスト"
-    swap-left: "左に移動"
-    swap-right: "右に移動"
-    swap-up: "上に移動"
-    swap-down: "下に移動"
-    remove: "カラムを削除"
-    add-column: "カラムを追加"
-    rename: "名前を変更"
-    stack-left: "左に重ねる"
-    pop-right: "右に出す"
-
   dev: "アプリの作成に失敗しました。再度お試しください。"
+  ai-chan-kawaii: "藍ちゃかわいい"
 
 auth/views/form.vue:
-  share-access: "<i>{{ app.name }}</i>があなたのアカウントにアクセスすることを<b>許可</b>しますか？"
+  share-access: "<i>{{name}}</i>があなたのアカウントにアクセスすることを許可しますか？"
   permission-ask: "このアプリは次の権限を要求しています:"
   account-read: "アカウントの情報を見る。"
   account-write: "アカウントの情報を操作する。"
@@ -352,7 +324,6 @@ common/views/components/messaging.vue:
 
 common/views/components/messaging-room.vue:
   empty: "このユーザーと話したことはありません"
-  more: "もっと読む"
   no-history: "これより過去の履歴はありません"
   resize-form: "ドラッグしてフォームの広さを調整"
   new-message: "新しいメッセージがあります"
@@ -416,6 +387,7 @@ common/views/components/signin.vue:
   signin: "サインイン"
   or: "または"
   signin-with-twitter: "Twitterでログイン"
+  signin-with-github: "GitHubでログイン"
   login-failed: "ログインできませんでした。ユーザー名とパスワードを確認してください。"
 
 common/views/components/signup.vue:
@@ -459,6 +431,14 @@ common/views/components/twitter-setting.vue:
   connect: "Twitterと接続する"
   disconnect: "切断する"
 
+common/views/components/github-setting.vue:
+  description: "お使いのGitHubアカウントをお使いのMisskeyアカウントに接続しておくと、プロフィールでGitHubアカウント情報が表示されるようになったり、GitHubを用いた便利なサインインを利用できるようになります。"
+  connected-to: "次のGitHubアカウントに接続されています"
+  detail: "詳細..."
+  reconnect: "再接続する"
+  connect: "GitHubと接続する"
+  disconnect: "切断する"
+
 common/views/components/uploader.vue:
   waiting: "待機中"
 
@@ -593,39 +573,13 @@ desktop/views/components/activity.vue:
   toggle: "表示を切り替え"
 
 desktop/views/components/calendar.vue:
-  title: "{1}年 {2}月"
+  title: "{year}年 {month}月"
   prev: "前の月"
   next: "次の月"
   go: "クリックして時間遡行"
 
-desktop/views/components/charts.vue:
-  title: "チャート"
-  per-day: "1日ごと"
-  per-hour: "1時間ごと"
-  federation: "フェデレーション"
-  notes: "投稿"
-  users: "ユーザー"
-  drive: "ドライブ"
-  network: "ネットワーク"
-  charts:
-    federation-instances: "インスタンスの増減"
-    federation-instances-total: "インスタンスの積算"
-    notes: "投稿の増減 (統合)"
-    local-notes: "投稿の増減 (ローカル)"
-    remote-notes: "投稿の増減 (リモート)"
-    notes-total: "投稿の積算"
-    users: "ユーザーの増減"
-    users-total: "ユーザーの積算"
-    drive: "ドライブ使用量の増減"
-    drive-total: "ドライブ使用量の積算"
-    drive-files: "ドライブのファイル数の増減"
-    drive-files-total: "ドライブのファイル数の積算"
-    network-requests: "リクエスト"
-    network-time: "応答時間"
-    network-usage: "通信量"
-
 desktop/views/components/choose-file-from-drive-window.vue:
-  choose-file: "ファイル選択中"
+  chosen-files: "{count}ファイル選択中"
   upload: "PCからドライブにファイルをアップロード"
   cancel: "キャンセル"
   ok: "決定"
@@ -677,7 +631,6 @@ desktop/views/components/drive.folder.vue:
 
 desktop/views/components/drive.vue:
   search: "検索"
-  load-more: "もっと読み込む"
   empty-draghover: "ドロップですか？いいですよ、ボクはカワイイですからね"
   empty-drive: "ドライブには何もありません。"
   empty-drive-description: "右クリックして「ファイルをアップロード」を選んだり、ファイルをドラッグ&ドロップすることでもアップロードできます。"
@@ -749,7 +702,6 @@ desktop/views/components/messaging-window.vue:
   title: "メッセージ"
 
 desktop/views/components/note-detail.vue:
-  more: "会話をもっと読み込む"
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"
   reposted-by: "{}がRenote"
@@ -769,10 +721,8 @@ desktop/views/components/note.vue:
 desktop/views/components/notes.vue:
   error: "読み込みに失敗しました。"
   retry: "リトライ"
-  load-more: "もっと読み込む"
 
 desktop/views/components/notifications.vue:
-  more: "もっと見る"
   empty: "ありません！"
 
 desktop/views/components/post-form.vue:
@@ -825,6 +775,10 @@ desktop/views/components/renote-form.vue:
 desktop/views/components/renote-form-window.vue:
   title: "この投稿をRenoteしますか？"
 
+desktop/views/pages/user-following-or-followers.vue:
+  following: "{user}のフォロー"
+  followers: "{user}のフォロワー"
+
 desktop/views/components/settings-window.vue:
   settings: "設定"
 
@@ -962,6 +916,7 @@ common/views/components/api-settings.vue:
     title: 'APIコンソール'
     endpoint: 'エンドポイント'
     parameter: 'パラメータ'
+    credential-info: "「i」パラメータは自動で付与されます。"
     send: '送信'
     sending: '応答待ち'
     response: '結果'
@@ -981,7 +936,7 @@ common/views/components/mute-and-block.vue:
   no-muted-users: "ミュートしているユーザーはいません"
   no-blocked-users: "ブロックしているユーザーはいません"
 
-desktop/views/components/settings.password.vue:
+common/views/components/password-settings.vue:
   reset: "パスワードを変更する"
   enter-current-password: "現在のパスワードを入力してください"
   enter-new-password: "新しいパスワードを入力してください"
@@ -1029,7 +984,6 @@ desktop/views/components/ui.header.account.vue:
 desktop/views/components/ui.header.nav.vue:
   home: "ホーム"
   deck: "デッキ"
-  messaging: "メッセージ"
   game: "ゲーム"
 
 desktop/views/components/ui.header.notifications.vue:
@@ -1059,7 +1013,6 @@ desktop/views/components/user-preview.vue:
 desktop/views/components/users-list.vue:
   all: "すべて"
   iknow: "知り合い"
-  load-more: "もっと"
   fetching: "読み込んでいます"
 
 desktop/views/components/users-list-item.vue:
@@ -1069,71 +1022,143 @@ desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "閉じる"
 
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
   users: "ユーザー"
   update: "更新"
   announcements: "お知らせ"
   hashtags: "ハッシュタグ"
+  back-to-misskey: "Misskeyに戻る"
 
-desktop/views/pages/admin/admin.dashboard.vue:
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
-  invite: "招待"
-  banner-url: "Banner URL"
-  disableRegistration: "Disable new user registration"
-  disableLocalTimeline: "Disable the local timeline"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "このインスタンス"
+  federated: "連合"
 
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/instance.vue:
+  instance: "インスタンス"
+  instance-name: "インスタンス名"
+  instance-description: "インスタンスの紹介"
+  banner-url: "バナー画像URL"
+  languages: "インスタンスの対象言語"
+  languages-desc: "スペースで区切って複数設定できます。"
+  maintainer-config: "管理者情報"
+  maintainer-name: "管理者名"
+  maintainer-email: "管理者の連絡先"
+  drive-config: "ドライブの設定"
+  cache-remote-files: "リモートのファイルをキャッシュする"
+  cache-remote-files-desc: "この設定を無効にすると、リモートファイルをキャッシュせず直リンクするようになります。そのためサーバーのストレージを節約できますが、プライバシー設定で直リンクを無効にしているユーザーにはファイルが見えなくなったり、サムネイルが生成されないので通信量が増加します。通常はこの設定をオンにしておくことをおすすめします。"
+  local-drive-capacity-mb: "ローカルユーザーひとりあたりのドライブ容量"
+  remote-drive-capacity-mb: "リモートユーザーひとりあたりのドライブ容量"
+  mb: "メガバイト単位"
+  recaptcha-config: "reCAPTCHAの設定"
+  recaptcha-info: "reCAPTCHAを有効にする場合、reCAPTCHAトークンを取得する必要があります。https://www.google.com/recaptcha/intro/ にアクセスしてトークンを取得してください。"
+  enable-recaptcha: "reCAPTCHAを有効にする"
+  recaptcha-site-key: "reCAPTCHA site key"
+  recaptcha-secret-key: "reCAPTCHA secret key"
+  twitter-integration-config: "Twitter連携の設定"
+  twitter-integration-info: "コールバックURLは /api/tw/cb に設定します。"
+  enable-twitter-integration: "Twitter連携を有効にする"
+  twitter-integration-consumer-key: "Consumer key"
+  twitter-integration-consumer-secret: "Consumer secret"
+  github-integration-config: "GitHub連携の設定"
+  github-integration-info: "コールバックURLは /api/gh/cb に設定します。"
+  enable-github-integration: "GitHub連携を有効にする"
+  github-integration-client-id: "Client ID"
+  github-integration-client-secret: "Client secret"
+  proxy-account-config: "プロキシアカウントの設定"
+  proxy-account-info: "プロキシアカウントは、特定の条件下でユーザーのリモートフォローを代行するアカウントです。例えば、ユーザーがリモートユーザーをリストに入れたとき、リストに入れられたユーザーを誰もフォローしていないとアクティビティがサーバーに配達されないため、代わりにプロキシアカウントがフォローするようにします。"
+  proxy-account-username: "プロキシアカウントのユーザー名"
+  proxy-account-username-desc: "プロキシとして使用するアカウントのユーザー名を指定してください。"
+  proxy-account-warn: "アカウントは自動で作られないため、そのユーザー名のアカウントを予め作成しておく必要があります。"
+  max-note-text-length: "投稿の最大文字数"
+  disable-registration: "ユーザー登録の受付を停止する"
+  disable-local-timeline: "ローカルタイムラインを無効にする"
+  invite: "招待"
+  save: "保存"
+  saved: "保存しました"
+
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
   suspend: "凍結"
   suspended: "凍結しました"
-
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
   unsuspended: "凍結を解除しました"
-
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
   verified: "公式アカウントにしました"
-
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
 
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+    info: "50KB以下のPNG画像をおすすめします。"
+    added: "絵文字を登録しました"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+  updated: "更新しました"
+  remove-emoji:
+    are-you-sure: "「$1」を削除しますか？"
+    removed: "削除しました"
+
+admin/views/announcements.vue:
   announcements: "お知らせ"
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+  saved: "保存しました"
+  _remove:
+    are-you-sure: "「$1」を削除しますか？"
+    removed: "削除しました"
 
-desktop/views/pages/admin/admin.hashtags.vue:
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 
-desktop/views/pages/deck/deck.tl-column.vue:
-  is-media-only: "メディア投稿のみ"
-  is-media-view: "メディアビュー"
-  edit: "オプション"
-
-desktop/views/pages/deck/deck.user-column.vue:
-  posts: "投稿"
-  following: "フォロー"
-  followers: "フォロワー"
-  images: "画像"
-  activity: "アクティビティ"
-  timeline: "タイムライン"
-  pinned-notes: "ピン留めされた投稿"
-  push-to-a-list: "リストに追加"
-
-desktop/views/pages/stats/stats.vue:
-  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
-
 desktop/views/pages/welcome.vue:
   about: "詳しく..."
   gotit: "わかった"
@@ -1150,9 +1175,6 @@ desktop/views/pages/welcome.vue:
 desktop/views/pages/drive.vue:
   title: "Misskey Drive"
 
-desktop/views/pages/favorites.vue:
-  more: "さらに読み込む"
-
 desktop/views/pages/home-customize.vue:
   title: "ホームのカスタマイズ"
 
@@ -1168,13 +1190,13 @@ desktop/views/pages/selectdrive.vue:
 
 desktop/views/pages/search.vue:
   not-available: "検索機能はインスタンスの設定で無効になっています。"
-  not-found: "「{}」に関する投稿は見つかりませんでした。"
+  not-found: "「{q}」に関する投稿は見つかりませんでした。"
 
 desktop/views/pages/share.vue:
-  share-with: "{}で共有"
+  share-with: "{name}で共有"
 
 desktop/views/pages/tag.vue:
-  no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
+  no-posts-found: "ハッシュタグ「{q}」が付けられた投稿は見つかりませんでした。"
 
 desktop/views/pages/user-list.users.vue:
   users: "ユーザー"
@@ -1191,10 +1213,6 @@ desktop/views/pages/user/user.friends.vue:
   loading: "読み込み中"
   no-users: "よく話すユーザーはいません"
 
-desktop/views/pages/user/user.vue:
-  is-suspended: "このユーザーは凍結されています。"
-  last-used-at: "最終アクセス"
-
 desktop/views/pages/user/user.photos.vue:
   title: "フォト"
   loading: "読み込み中"
@@ -1265,7 +1283,6 @@ mobile/views/components/drive.vue:
   folder-count: "フォルダ"
   count-separator: "、"
   file-count: "ファイル"
-  load-more: "もっと読み込む"
   nothing-in-drive: "ドライブには何もありません"
   folder-is-empty: "このフォルダは空です"
   prompt: "何をしますか？(数字を入力してください): <1 → ファイルをアップロード | 2 → ファイルをURLでアップロード | 3 → フォルダ作成 | 4 → このフォルダ名を変更 | 5 → このフォルダを移動 | 6 → このフォルダを削除>"
@@ -1276,9 +1293,6 @@ mobile/views/components/drive.vue:
   url-prompt: "アップロードしたいファイルのURL"
   uploading: "アップロードをリクエストしました。アップロードが完了するまで時間がかかる場合があります。"
 
-mobile/views/components/drive-file-detail.vue:
-  rename: "名前を変更"
-
 mobile/views/components/drive-file-chooser.vue:
   select-file: "ファイルを選択"
 
@@ -1344,12 +1358,7 @@ mobile/views/components/note-sub.vue:
   bot: "bot"
   cat: "cat"
 
-mobile/views/components/notes.vue:
-  failed: "読み込みに失敗しました。"
-  retry: "リトライ"
-
 mobile/views/components/notifications.vue:
-  more: "もっと見る"
   empty: "ありません！"
 
 mobile/views/components/post-form.vue:
@@ -1372,7 +1381,6 @@ mobile/views/components/sub-note-content.vue:
 
 mobile/views/components/timeline.vue:
   empty: "投稿がありません"
-  load-more: "もっと"
 
 mobile/views/components/ui.header.vue:
   welcome-back: "おかえりなさい、"
@@ -1381,7 +1389,6 @@ mobile/views/components/ui.header.vue:
 mobile/views/components/ui.nav.vue:
   timeline: "タイムライン"
   notifications: "通知"
-  messaging: "メッセージ"
   follow-requests: "フォロー申請"
   search: "検索"
   favorites: "お気に入り"
@@ -1396,12 +1403,10 @@ mobile/views/components/ui.nav.vue:
 mobile/views/components/user-timeline.vue:
   no-notes: "このユーザーは投稿していないようです。"
   no-notes-with-media: "メディア付き投稿はありません。"
-  load-more: "もっと"
 
 mobile/views/components/users-list.vue:
   all: "すべて"
   known: "知り合い"
-  load-more: "もっと"
 
 mobile/views/pages/favorites.vue:
   title: "お気に入り"
@@ -1410,17 +1415,14 @@ mobile/views/pages/user-lists.vue:
   title: "リスト"
   enter-list-name: "リスト名を入力してください"
 
-mobile/views/pages/drive.vue:
-  more: "もっと見る"
-
 mobile/views/pages/signup.vue:
   lets-start: "📦 始めましょう"
 
 mobile/views/pages/followers.vue:
-  followers-of: "{}のフォロワー"
+  followers-of: "{name}のフォロワー"
 
 mobile/views/pages/following.vue:
-  following-of: "{}のフォロー"
+  following-of: "{name}のフォロー"
 
 mobile/views/pages/home.vue:
   home: "ホーム"
@@ -1431,7 +1433,7 @@ mobile/views/pages/home.vue:
   messages: "メッセージ"
 
 mobile/views/pages/tag.vue:
-  no-posts-found: "ハッシュタグ「{}」が付けられた投稿は見つかりませんでした。"
+  no-posts-found: "ハッシュタグ「{q}」が付けられた投稿は見つかりませんでした。"
 
 mobile/views/pages/welcome.vue:
   signup: "新規登録"
@@ -1446,13 +1448,7 @@ mobile/views/pages/widgets/activity.vue:
   activity: "アクティビティ"
 
 mobile/views/pages/share.vue:
-  share-with: "{}で共有"
-
-mobile/views/pages/messaging.vue:
-  messaging: "メッセージ"
-
-mobile/views/pages/messaging-room.vue:
-  messaging: "メッセージ"
+  share-with: "{name}で共有"
 
 mobile/views/pages/received-follow-requests.vue:
   title: "フォロー申請"
@@ -1473,8 +1469,7 @@ mobile/views/pages/games/reversi.vue:
 
 mobile/views/pages/search.vue:
   search: "検索"
-  empty: "「{}」に関する投稿は見つかりませんでした。"
-  not-found: "「{}」に関する投稿は見つかりませんでした。"
+  not-found: "「{q}」に関する投稿は見つかりませんでした。"
 
 mobile/views/pages/selectdrive.vue:
   select-file: "ファイルを選択"
@@ -1515,6 +1510,10 @@ mobile/views/pages/settings.vue:
   twitter-connect: "Twitterアカウントに接続する"
   twitter-reconnect: "再接続する"
   twitter-disconnect: "切断する"
+  github: "GitHub連携"
+  github-connect: "GitHubアカウントに接続する"
+  github-reconnect: "再接続する"
+  github-disconnect: "切断する"
   update: "Misskey Update"
   version: "バージョン:"
   latest-version: "最新のバージョン:"
@@ -1529,6 +1528,7 @@ mobile/views/pages/settings.vue:
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"
   mark-as-read-all-unread-notes: "すべての投稿を既読にする"
+  password: "パスワード"
 
 mobile/views/pages/user.vue:
   follows-you: "フォローされています"
@@ -1555,21 +1555,53 @@ mobile/views/pages/user/home.vue:
   last-used-at: "最終ログイン"
 
 mobile/views/pages/user/home.followers-you-know.vue:
-  loading: "読み込み中"
   no-users: "知り合いのユーザーはいません"
 
 mobile/views/pages/user/home.friends.vue:
-  loading: "読み込み中"
   no-users: "よく会話するユーザーはいません"
 
 mobile/views/pages/user/home.notes.vue:
-  loading: "読み込み中"
   no-notes: "投稿はありません"
 
 mobile/views/pages/user/home.photos.vue:
-  loading: "読み込み中"
   no-photos: "写真はありません"
 
+deck:
+  widgets: "ウィジェット"
+  home: "ホーム"
+  local: "ローカル"
+  hybrid: "ソーシャル"
+  hashtag: "ハッシュタグ"
+  global: "グローバル"
+  mentions: "あなた宛て"
+  direct: "ダイレクト投稿"
+  notifications: "通知"
+  list: "リスト"
+  swap-left: "左に移動"
+  swap-right: "右に移動"
+  swap-up: "上に移動"
+  swap-down: "下に移動"
+  remove: "カラムを削除"
+  add-column: "カラムを追加"
+  rename: "名前を変更"
+  stack-left: "左に重ねる"
+  pop-right: "右に出す"
+
+deck/deck.tl-column.vue:
+  is-media-only: "メディア投稿のみ"
+  is-media-view: "メディアビュー"
+  edit: "オプション"
+
+deck/deck.user-column.vue:
+  posts: "投稿"
+  following: "フォロー"
+  followers: "フォロワー"
+  images: "画像"
+  activity: "アクティビティ"
+  timeline: "タイムライン"
+  pinned-notes: "ピン留めされた投稿"
+  push-to-a-list: "リストに追加"
+
 docs:
   edit-this-page-on-github: "間違いや改善点を見つけましたか？"
   edit-this-page-on-github-link: "このページをGitHubで編集"

locales/ja-KS.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "左に重ねんで！"
     pop-right: "右に出すで！"
   dev: "アプリの作成あかんかったわ。もっぺんやってみて。"
+  ai-chan-kawaii: "藍ちゃめっさべっぴんさんや"
 auth/views/form.vue:
   share-access: "<i>{{ app.name }}</i>があんさんのアカウントにアクセスすんのを<b>許可</b>してもええか？"
   permission-ask: "このアプリは次の権限を要求してんで:"
@@ -743,7 +744,7 @@ desktop/views/components/settings.vue:
   apps: "アプリ"
   mute-and-block: "ミュート/ブロック"
   blocking: "ブロック"
-  security: "守護神セキュリティ"
+  security: "セキュリティ"
   signin: "こんな感じでサインインしたらしいで"
   password: "パスワード"
   2fa: "二段階認証"
@@ -872,13 +873,13 @@ common/views/components/mute-and-block.vue:
   mute-and-block: "ミュートとブロック"
   mute: "ミュート"
   block: "ブロック"
-  no-muted-users: "ミュートしているユーザーはいません"
-  no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
-  reset: "パスワードを変更する"
+  no-muted-users: "ミュートしとるユーザーはおらんで"
+  no-blocked-users: "ブロックしとるユーザーはおらんで"
+common/views/components/password-settings.vue:
+  reset: "パスワード変える"
   enter-current-password: "今のパスワードを入れてや"
-  enter-new-password: "さらのパスワード入れてや"
-  enter-new-password-again: "もういっぺんさらのパスワードを入れてや"
+  enter-new-password: "こんどのパスワード入れてや"
+  enter-new-password-again: "もっぺん入れてや"
   not-match: "パスワードがおうとらん"
   changed: "パスワード変えたわ"
 desktop/views/components/sub-note-content.vue:
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "さいなら"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
   users: "ユーザー"
   update: "更新"
   announcements: "知っといてや"
   hashtags: "ハッシュタグ"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Misskeyに戻る"
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "知り合い全員や"
-  original-users: "ここの人らだけ"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "ワイのインスタンス"
+  federated: "連合"
   invite: "来てや"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減(統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
   suspend: "凍結"
-  suspended: "凍結したで"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
+  suspended: "凍結しました"
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
-  unsuspended: "凍結を解除したで"
-desktop/views/pages/admin/admin.verify-user.vue:
+  unsuspended: "凍結を解除しました"
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
-  verified: "公式アカウントにしたで"
-desktop/views/pages/admin/admin.unverify-user.vue:
-  unverify-user: "ユーザーの公式アカウントにせーへん"
-  unverify: "公式アカウントにはさせへんで"
-  unverified: "公式アカウントを解除したで"
-desktop/views/pages/admin/admin.announcements.vue:
-  announcements: "知っといてや"
-desktop/views/pages/admin/admin.hashtags.vue:
+  verified: "公式アカウントにしました"
+  unverify-user: "ユーザーの公式アカウント解除"
+  unverify: "公式アカウントを解除する"
+  unverified: "公式アカウントを解除しました"
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
+  announcements: "お知らせ"
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿だけや"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "サウンド"
   enable-sounds: "サウンド鳴らす"
   mark-as-read-all-unread-notes: "全部もう読んだわ"
+  password: "パスワード"
 mobile/views/pages/user.vue:
   follows-you: "フォローされとるで"
   following: "フォロー"
@@ -1340,7 +1387,7 @@ mobile/views/pages/user.vue:
   mute: "ミュート"
   unmute: "ミュート解除"
   block: "ブロック"
-  unblock: "ブロック解除"
+  unblock: "ブロックやめたる"
 mobile/views/pages/user/home.vue:
   recent-notes: "最近儲かりまっか？"
   images: "画像"

locales/ko-KR.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "左に重ねる"
     pop-right: "右に出す"
   dev: "アプリの作成に失敗しました。再度お試しください。"
+  ai-chan-kawaii: "藍ちゃかわいい"
 auth/views/form.vue:
   share-access: "<i>{{ app.name }}</i>があなたのアカウントにアクセスすることを<b>許可</b>しますか？"
   permission-ask: "このアプリは次の権限を要求しています:"
@@ -874,7 +875,7 @@ common/views/components/mute-and-block.vue:
   block: "ブロック"
   no-muted-users: "ミュートしているユーザーはいません"
   no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
+common/views/components/password-settings.vue:
   reset: "パスワードを変更する"
   enter-current-password: "現在のパスワードを入力してください"
   enter-new-password: "新しいパスワードを入力してください"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "閉じる"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
   users: "ユーザー"
   update: "更新"
   announcements: "お知らせ"
   hashtags: "ハッシュタグ"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Misskeyに戻る"
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "このインスタンス"
+  federated: "連合"
   invite: "招待"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
   suspend: "凍結"
   suspended: "凍結しました"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
   unsuspended: "凍結を解除しました"
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
   verified: "公式アカウントにしました"
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
   announcements: "お知らせ"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"
   mark-as-read-all-unread-notes: "すべての投稿を既読にする"
+  password: "パスワード"
 mobile/views/pages/user.vue:
   follows-you: "フォローされています"
   following: "フォロー"

locales/nl-NL.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "左に重ねる"
     pop-right: "右に出す"
   dev: "アプリの作成に失敗しました。再度お試しください。"
+  ai-chan-kawaii: "藍ちゃかわいい"
 auth/views/form.vue:
   share-access: "<i>{{ app.name }}</i>があなたのアカウントにアクセスすることを<b>許可</b>しますか？"
   permission-ask: "このアプリは次の権限を要求しています:"
@@ -874,13 +875,13 @@ common/views/components/mute-and-block.vue:
   block: "ブロック"
   no-muted-users: "ミュートしているユーザーはいません"
   no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
-  reset: "Wachtwoord wijzigen"
-  enter-current-password: "Voer je huidige wachtwoord in"
-  enter-new-password: "Voer je nieuwe wachtwoord in"
-  enter-new-password-again: "Voer je nieuwe wachtwoord nogmaals in"
-  not-match: "Het nieuwe wachtwoord komt niet overeen"
-  changed: "Wachtwoord bijgewerkt"
+common/views/components/password-settings.vue:
+  reset: "パスワードを変更する"
+  enter-current-password: "現在のパスワードを入力してください"
+  enter-new-password: "新しいパスワードを入力してください"
+  enter-new-password-again: "もう一度新しいパスワードを入力してください"
+  not-match: "新しいパスワードが一致しません"
+  changed: "パスワードを変更しました"
 desktop/views/components/sub-note-content.vue:
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "Uitvouwen"
   close: "Sluiten"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
   users: "ユーザー"
   update: "更新"
   announcements: "お知らせ"
   hashtags: "ハッシュタグ"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Misskeyに戻る"
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "このインスタンス"
+  federated: "連合"
   invite: "招待"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
   suspend: "凍結"
   suspended: "凍結しました"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
   unsuspended: "凍結を解除しました"
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
   verified: "公式アカウントにしました"
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
   announcements: "お知らせ"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"
   mark-as-read-all-unread-notes: "すべての投稿を既読にする"
+  password: "パスワード"
 mobile/views/pages/user.vue:
   follows-you: "Volgt jou"
   following: "Volgend"

locales/no-NO.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "左に重ねる"
     pop-right: "Til høyre"
   dev: "アプリの作成に失敗しました。再度お試しください。"
+  ai-chan-kawaii: "藍ちゃかわいい"
 auth/views/form.vue:
   share-access: "<i>{{ app.name }}</i>があなたのアカウントにアクセスすることを<b>許可</b>しますか？"
   permission-ask: "このアプリは次の権限を要求しています:"
@@ -874,7 +875,7 @@ common/views/components/mute-and-block.vue:
   block: "ブロック"
   no-muted-users: "ミュートしているユーザーはいません"
   no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
+common/views/components/password-settings.vue:
   reset: "パスワードを変更する"
   enter-current-password: "現在のパスワードを入力してください"
   enter-new-password: "新しいパスワードを入力してください"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "Lukk"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
-  users: "Brukere"
-  update: "Oppdater"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
+  users: "ユーザー"
+  update: "更新"
   announcements: "お知らせ"
   hashtags: "ハッシュタグ"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Misskeyに戻る"
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
-  invite: "Inviter"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "このインスタンス"
+  federated: "連合"
+  invite: "招待"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
-  suspend: "Suspender"
+  suspend: "凍結"
   suspended: "凍結しました"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
   unsuspended: "凍結を解除しました"
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
   verified: "公式アカウントにしました"
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
   announcements: "お知らせ"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "Lyder"
   enable-sounds: "サウンドを有効にする"
   mark-as-read-all-unread-notes: "すべての投稿を既読にする"
+  password: "パスワード"
 mobile/views/pages/user.vue:
   follows-you: "フォローされています"
   following: "Følger"

locales/pl-PL.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "Przypnij do lewej"
     pop-right: "Odepnij w prawo"
   dev: "アプリの作成に失敗しました。再度お試しください。"
+  ai-chan-kawaii: "藍ちゃかわいい"
 auth/views/form.vue:
   share-access: "Czy chcesz <b>zezwolić</b> <i>{{ app.name }}</i> na dostęp do Twojego konta?"
   permission-ask: "Ta aplikacja wymaga następujących uprawnień:"
@@ -874,13 +875,13 @@ common/views/components/mute-and-block.vue:
   block: "ブロック"
   no-muted-users: "ミュートしているユーザーはいません"
   no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
-  reset: "Zmień hasło"
-  enter-current-password: "Wprowadź obecne hasło"
-  enter-new-password: "Wprowadź nowe hasło"
-  enter-new-password-again: "Wprowadź ponownie nowe hasło"
-  not-match: "Nowe hasła nie pasują do siebie"
-  changed: "Pomyślnie zmieniono hasło"
+common/views/components/password-settings.vue:
+  reset: "パスワードを変更する"
+  enter-current-password: "現在のパスワードを入力してください"
+  enter-new-password: "新しいパスワードを入力してください"
+  enter-new-password-again: "もう一度新しいパスワードを入力してください"
+  not-match: "新しいパスワードが一致しません"
+  changed: "パスワードを変更しました"
 desktop/views/components/sub-note-content.vue:
   private: "ten wpis jest prywatny"
   deleted: "ten wpis został usunięty"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "Pop-out"
   close: "Zamknij"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
   users: "ユーザー"
   update: "更新"
   announcements: "お知らせ"
   hashtags: "ハッシュタグ"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Misskeyに戻る"
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "このインスタンス"
+  federated: "連合"
   invite: "招待"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
   suspend: "凍結"
   suspended: "凍結しました"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
   unsuspended: "凍結を解除しました"
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
   verified: "公式アカウントにしました"
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
   announcements: "お知らせ"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "Tylko wpisy z zawartością multimedialną"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"
   mark-as-read-all-unread-notes: "すべての投稿を既読にする"
+  password: "パスワード"
 mobile/views/pages/user.vue:
   follows-you: "Śledzi Cię"
   following: "Śledzeni"

locales/pt-PT.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "左に重ねる"
     pop-right: "Acoplar à direita"
   dev: "アプリの作成に失敗しました。再度お試しください。"
+  ai-chan-kawaii: "藍ちゃかわいい"
 auth/views/form.vue:
   share-access: "Você <b>permite</b> que <i>{{ app.name }}</i> acesse sua conta?"
   permission-ask: "Este aplicativo precisa das seguintes permissões:"
@@ -874,7 +875,7 @@ common/views/components/mute-and-block.vue:
   block: "ブロック"
   no-muted-users: "ミュートしているユーザーはいません"
   no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
+common/views/components/password-settings.vue:
   reset: "パスワードを変更する"
   enter-current-password: "現在のパスワードを入力してください"
   enter-new-password: "新しいパスワードを入力してください"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "閉じる"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
-  users: "Usuários"
-  update: "Actualizações"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
+  users: "ユーザー"
+  update: "更新"
   announcements: "お知らせ"
   hashtags: "ハッシュタグ"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Misskeyに戻る"
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "Todos os usuários"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "このインスタンス"
+  federated: "連合"
   invite: "招待"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
   suspend: "凍結"
   suspended: "凍結しました"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
   unsuspended: "凍結を解除しました"
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
   verified: "公式アカウントにしました"
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
   announcements: "お知らせ"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "Sons"
   enable-sounds: "Ativar sons"
   mark-as-read-all-unread-notes: "すべての投稿を既読にする"
+  password: "パスワード"
 mobile/views/pages/user.vue:
   follows-you: "Te segue"
   following: "Seguindo"

locales/ru-RU.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "左に重ねる"
     pop-right: "右に出す"
   dev: "アプリの作成に失敗しました。再度お試しください。"
+  ai-chan-kawaii: "藍ちゃかわいい"
 auth/views/form.vue:
   share-access: "<i>{{ app.name }}</i>があなたのアカウントにアクセスすることを<b>許可</b>しますか？"
   permission-ask: "このアプリは次の権限を要求しています:"
@@ -874,7 +875,7 @@ common/views/components/mute-and-block.vue:
   block: "ブロック"
   no-muted-users: "ミュートしているユーザーはいません"
   no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
+common/views/components/password-settings.vue:
   reset: "パスワードを変更する"
   enter-current-password: "現在のパスワードを入力してください"
   enter-new-password: "新しいパスワードを入力してください"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "閉じる"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
   users: "ユーザー"
   update: "更新"
   announcements: "お知らせ"
   hashtags: "ハッシュタグ"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Misskeyに戻る"
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "このインスタンス"
+  federated: "連合"
   invite: "招待"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
   suspend: "凍結"
   suspended: "凍結しました"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
   unsuspended: "凍結を解除しました"
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
   verified: "公式アカウントにしました"
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
   announcements: "お知らせ"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"
   mark-as-read-all-unread-notes: "すべての投稿を既読にする"
+  password: "パスワード"
 mobile/views/pages/user.vue:
   follows-you: "フォローされています"
   following: "フォロー"

locales/zh-CN.yml

@@ -186,6 +186,7 @@ common:
     stack-left: "左に重ねる"
     pop-right: "右に出す"
   dev: "アプリの作成に失敗しました。再度お試しください。"
+  ai-chan-kawaii: "藍ちゃかわいい"
 auth/views/form.vue:
   share-access: "<i>{{ app.name }}</i>があなたのアカウントにアクセスすることを<b>許可</b>しますか？"
   permission-ask: "このアプリは次の権限を要求しています:"
@@ -874,7 +875,7 @@ common/views/components/mute-and-block.vue:
   block: "ブロック"
   no-muted-users: "ミュートしているユーザーはいません"
   no-blocked-users: "ブロックしているユーザーはいません"
-desktop/views/components/settings.password.vue:
+common/views/components/password-settings.vue:
   reset: "パスワードを変更する"
   enter-current-password: "現在のパスワードを入力してください"
   enter-new-password: "新しいパスワードを入力してください"
@@ -946,41 +947,86 @@ desktop/views/components/users-list-item.vue:
 desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "閉じる"
-desktop/views/pages/admin/admin.vue:
+admin/views/index.vue:
   dashboard: "ダッシュボード"
+  instance: "インスタンス"
+  emoji: "カスタム絵文字"
   users: "ユーザー"
   update: "更新"
   announcements: "お知らせ"
   hashtags: "ハッシュタグ"
-desktop/views/pages/admin/admin.dashboard.vue:
+  back-to-misskey: "Misskeyに戻る"
+admin/views/dashboard.vue:
   dashboard: "ダッシュボード"
-  all-users: "全てのユーザー"
-  original-users: "このインスタンスのユーザー"
-  all-notes: "全ての投稿"
-  original-notes: "このインスタンスの投稿"
+  accounts: "アカウント"
+  notes: "投稿"
+  drive: "ドライブ"
+  instances: "インスタンス"
+  this-instance: "このインスタンス"
+  federated: "連合"
   invite: "招待"
   banner-url: "Banner URL"
   disableRegistration: "Disable new user registration"
   disableLocalTimeline: "Disable the local timeline"
-desktop/views/pages/admin/admin.suspend-user.vue:
+admin/views/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  federation: "フェデレーション"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  network: "ネットワーク"
+  charts:
+    federation-instances: "インスタンスの増減"
+    federation-instances-total: "インスタンスの積算"
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の積算"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの積算"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の積算"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の積算"
+    network-requests: "リクエスト"
+    network-time: "応答時間"
+    network-usage: "通信量"
+admin/views/users.vue:
   suspend-user: "ユーザーの凍結"
   suspend: "凍結"
   suspended: "凍結しました"
-desktop/views/pages/admin/admin.unsuspend-user.vue:
   unsuspend-user: "ユーザーの凍結の解除"
   unsuspend: "凍結の解除"
   unsuspended: "凍結を解除しました"
-desktop/views/pages/admin/admin.verify-user.vue:
   verify-user: "ユーザーの公式アカウント設定"
   verify: "公式アカウントにする"
   verified: "公式アカウントにしました"
-desktop/views/pages/admin/admin.unverify-user.vue:
   unverify-user: "ユーザーの公式アカウント解除"
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
-desktop/views/pages/admin/admin.announcements.vue:
+admin/views/emoji.vue:
+  add-emoji:
+    title: "絵文字の登録"
+    name: "絵文字名"
+    name-desc: "a~z 0~9 _ の文字が使えます。"
+    aliases: "エイリアス"
+    aliases-desc: "スペースで区切って複数設定できます。"
+    url: "絵文字画像URL"
+    add: "追加"
+  emojis:
+    title: "絵文字一覧"
+    update: "更新"
+    remove: "削除"
+admin/views/announcements.vue:
   announcements: "お知らせ"
-desktop/views/pages/admin/admin.hashtags.vue:
+  save: "保存"
+  remove: "削除"
+  add: "追加"
+  title: "タイトル"
+  text: "内容"
+admin/views/hashtags.vue:
   hided-tags: "Hidden Tags"
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"
@@ -1328,6 +1374,7 @@ mobile/views/pages/settings.vue:
   sound: "サウンド"
   enable-sounds: "サウンドを有効にする"
   mark-as-read-all-unread-notes: "すべての投稿を既読にする"
+  password: "パスワード"
 mobile/views/pages/user.vue:
   follows-you: "フォローされています"
   following: "フォロー"

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "10.37.0",
-	"clientVersion": "1.0.11314",
+	"version": "10.46.0",
+	"clientVersion": "1.0.11687",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,
@@ -20,10 +20,11 @@
 		"format": "gulp format"
 	},
 	"dependencies": {
-		"@fortawesome/fontawesome-svg-core": "1.2.6",
-		"@fortawesome/free-brands-svg-icons": "5.4.1",
-		"@fortawesome/free-regular-svg-icons": "5.4.1",
-		"@fortawesome/free-solid-svg-icons": "5.4.1",
+		"@fortawesome/fontawesome-svg-core": "1.2.8",
+		"@fortawesome/free-brands-svg-icons": "5.5.0",
+		"@fortawesome/free-regular-svg-icons": "5.5.0",
+		"@fortawesome/free-solid-svg-icons": "5.5.0",
+		"@fortawesome/vue-fontawesome": "0.1.2",
 		"@koa/cors": "2.2.2",
 		"@prezzemolo/rap": "0.1.2",
 		"@prezzemolo/zip": "0.0.3",
@@ -52,22 +53,23 @@
 		"@types/koa-logger": "3.1.1",
 		"@types/koa-mount": "3.0.1",
 		"@types/koa-multer": "1.0.0",
-		"@types/koa-router": "7.0.32",
+		"@types/koa-router": "7.0.33",
 		"@types/koa-send": "4.1.1",
 		"@types/koa-views": "2.0.3",
 		"@types/koa__cors": "2.2.3",
-		"@types/minio": "7.0.0",
+		"@types/minio": "7.0.1",
 		"@types/mkdirp": "0.5.2",
 		"@types/mocha": "5.2.5",
 		"@types/mongodb": "3.1.12",
 		"@types/ms": "0.7.30",
-		"@types/node": "10.12.0",
+		"@types/node": "10.12.2",
+		"@types/oauth": "0.9.1",
 		"@types/portscanner": "2.1.0",
 		"@types/pug": "2.0.4",
 		"@types/qrcode": "1.3.0",
 		"@types/ratelimiter": "2.1.28",
 		"@types/redis": "2.8.7",
-		"@types/request": "2.47.1",
+		"@types/request": "2.48.1",
 		"@types/request-promise-native": "1.0.15",
 		"@types/rimraf": "2.0.2",
 		"@types/seedrandom": "2.4.27",
@@ -84,35 +86,34 @@
 		"@types/websocket": "0.0.40",
 		"@types/ws": "6.0.1",
 		"animejs": "2.2.0",
-		"apexcharts": "2.1.9",
-		"autobind-decorator": "2.1.0",
+		"apexcharts": "2.2.0",
+		"autobind-decorator": "2.2.1",
 		"autosize": "4.0.2",
 		"autwh": "0.1.0",
 		"bcryptjs": "2.4.3",
 		"bee-queue": "1.2.2",
 		"bootstrap-vue": "2.0.0-rc.11",
-		"cafy": "11.3.0",
+		"cafy": "12.0.0",
 		"chai": "4.2.0",
 		"chai-http": "4.2.0",
 		"chalk": "2.4.1",
-		"chart.js": "2.7.3",
 		"commander": "2.19.0",
 		"crc-32": "1.2.0",
-		"css-loader": "1.0.0",
+		"css-loader": "1.0.1",
 		"dateformat": "3.0.3",
 		"debug": "4.1.0",
 		"deep-equal": "1.0.1",
 		"deepcopy": "0.6.3",
 		"diskusage": "0.2.5",
 		"double-ended-queue": "2.1.0-0",
-		"elasticsearch": "15.1.1",
+		"elasticsearch": "15.2.0",
 		"emojilib": "2.3.0",
 		"escape-regexp": "0.0.1",
 		"eslint": "5.8.0",
 		"eslint-plugin-vue": "4.7.1",
 		"eventemitter3": "3.1.0",
 		"file-loader": "2.0.0",
-		"file-type": "10.2.0",
+		"file-type": "10.4.0",
 		"fuckadblock": "3.2.1",
 		"gulp": "3.9.1",
 		"gulp-cssnano": "2.1.3",
@@ -173,7 +174,7 @@
 		"promise-sequential": "1.1.1",
 		"pug": "2.0.3",
 		"punycode": "2.1.1",
-		"qrcode": "1.3.0",
+		"qrcode": "1.3.2",
 		"ratelimiter": "3.2.0",
 		"recaptcha-promise": "0.1.3",
 		"reconnecting-websocket": "4.1.10",
@@ -196,7 +197,7 @@
 		"stylus": "0.54.5",
 		"stylus-loader": "3.0.2",
 		"summaly": "2.2.0",
-		"systeminformation": "3.45.9",
+		"systeminformation": "3.47.0",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
 		"tinycolor2": "1.4.1",
@@ -204,24 +205,23 @@
 		"ts-loader": "5.3.0",
 		"ts-node": "7.0.1",
 		"tslint": "5.10.0",
-		"typescript": "3.1.4",
+		"typescript": "3.1.6",
 		"typescript-eslint-parser": "20.1.1",
 		"uglify-es": "3.3.9",
 		"url-loader": "1.1.2",
 		"uuid": "3.3.2",
 		"v-animate-css": "0.0.2",
 		"vue": "2.5.17",
-		"vue-chartjs": "3.4.0",
 		"vue-color": "2.7.0",
 		"vue-content-loading": "1.5.3",
 		"vue-cropperjs": "2.2.2",
+		"vue-i18n": "8.3.1",
 		"vue-js-modal": "1.3.26",
-		"vue-json-tree-view": "2.1.4",
 		"vue-loader": "15.4.2",
 		"vue-router": "3.0.1",
 		"vue-style-loader": "4.1.2",
 		"vue-svg-inline-loader": "1.2.1",
-		"vue-sweetalert2": "1.5.6",
+		"vue-sweetalert2": "1.5.7",
 		"vue-template-compiler": "2.5.17",
 		"vuedraggable": "2.16.0",
 		"vuewordcloud": "18.7.11",
@@ -229,7 +229,7 @@
 		"vuex-persistedstate": "2.5.4",
 		"web-push": "3.3.3",
 		"webfinger.js": "2.6.6",
-		"webpack": "4.23.1",
+		"webpack": "4.25.1",
 		"webpack-cli": "3.1.2",
 		"websocket": "1.0.28",
 		"ws": "6.1.0",

src/chart/index.ts

@@ -230,7 +230,7 @@ export default abstract class Chart<T> {
 			null;
 
 		// ログ取得
-		const logs = await this.collection.find({
+		let logs = await this.collection.find({
 			group: group,
 			span: span,
 			date: {
@@ -245,6 +245,27 @@ export default abstract class Chart<T> {
 			}
 		});
 
+		// 要求された範囲にログがひとつもなかったら
+		if (logs.length == 0) {
+			// もっとも新しいログを持ってくる
+			// (すくなくともひとつログが無いと隙間埋めできないため)
+			const recentLog = await this.collection.findOne({
+				group: group,
+				span: span
+			}, {
+				sort: {
+					date: -1
+				},
+				fields: {
+					_id: 0
+				}
+			});
+
+			if (recentLog) {
+				logs = [recentLog];
+			}
+		}
+
 		// 整形
 		for (let i = (range - 1); i >= 0; i--) {
 			const current =
@@ -269,14 +290,11 @@ export default abstract class Chart<T> {
 
 		/**
 		 * [{
-		 * 	xxxxx: 1,
-		 * 	yyyyy: 5
+		 * 	xxxxx: 1, yyyyy: 5
 		 * }, {
-		 * 	xxxxx: 2,
-		 * 	yyyyy: 6
+		 * 	xxxxx: 2, yyyyy: 6
 		 * }, {
-		 * 	xxxxx: 3,
-		 * 	yyyyy: 7
+		 * 	xxxxx: 3, yyyyy: 7
 		 * }]
 		 *
 		 * を

src/client/app/admin/assets/header-icon.svg

@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="512"
+   height="512"
+   viewBox="0 0 135.46667 135.46667"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="header-icon.dark.svg"
+   inkscape:export-filename="C:\Users\syuilo\projects\misskey\assets\favicon\32.png"
+   inkscape:export-xdpi="6"
+   inkscape:export-ydpi="6">
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect5115"
+       is_visible="true"
+       steps="1"
+       threshold="0.000408163"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false"
+       simplifyindividualpaths="false"
+       simplifyJustCoalesce="false" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect5111"
+       is_visible="true"
+       steps="1"
+       threshold="0.000408163"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false"
+       simplifyindividualpaths="false"
+       simplifyJustCoalesce="false" />
+    <inkscape:path-effect
+       effect="simplify"
+       id="path-effect5104"
+       is_visible="true"
+       steps="1"
+       threshold="0.000408163"
+       smooth_angles="360"
+       helper_size="0"
+       simplify_individual_paths="false"
+       simplify_just_coalesce="false"
+       simplifyindividualpaths="false"
+       simplifyJustCoalesce="false" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="114.309"
+     inkscape:cy="251.50613"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4502"
+     showgrid="true"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="false"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-center="true"
+     inkscape:snap-page="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1027"
+     inkscape:window-x="-8"
+     inkscape:window-y="1072"
+     inkscape:window-maximized="1"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-midpoints="true"
+     inkscape:object-paths="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     objecttolerance="1"
+     guidetolerance="1"
+     inkscape:snap-nodes="false"
+     inkscape:snap-others="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4504"
+       spacingx="4.2333334"
+       spacingy="4.2333334"
+       empcolor="#ff3fff"
+       empopacity="0.25098039"
+       empspacing="4" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="レイヤー 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-30.809093,-111.78601)">
+    <g
+       id="g4502"
+       transform="matrix(1.096096,0,0,1.096096,-2.960633,-44.023579)">
+      <g
+         style="fill-opacity:1"
+         transform="translate(-1.3333333e-6,-1.3439941e-6)"
+         id="g5125">
+        <g
+           transform="matrix(0.91391326,0,0,0.91391326,7.9719907,17.595761)"
+           id="text4489"
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:141.03404236px;line-height:476.69509888px;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';letter-spacing:0px;word-spacing:0px;fill-opacity:1;stroke:none;stroke-width:0.28950602px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           aria-label="Mi">
+          <path
+             sodipodi:nodetypes="zccssscssccscczzzccsccsscscsccz"
+             inkscape:connector-curvature="0"
+             id="path5210"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.28950602px"
+             d="m 75.196381,231.17126 c -5.855419,0.0202 -10.885068,-3.50766 -13.2572,-7.61584 -1.266603,-1.79454 -3.772419,-2.43291 -3.807919,0 v 11.2332 c 0,4.51309 -1.645397,8.41504 -4.936191,11.70583 -3.196772,3.19677 -7.098714,4.79516 -11.705826,4.79516 -4.513089,0 -8.415031,-1.59839 -11.705825,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -61.7729 c 0,-3.47884 0.987238,-6.6286 2.961715,-9.44928 2.068499,-2.91471 4.701135,-4.9362 7.897906,-6.06447 1.786431,-0.65816 3.666885,-0.98724 5.641362,-0.98724 5.077225,0 9.308247,1.97448 12.693064,5.92343 1.786431,1.97448 2.820681,3.00873 3.102749,3.10275 0,0 13.408119,16.21319 13.78421,16.49526 0.376091,0.28206 1.480789,2.43848 4.127113,2.43848 2.646324,0 3.89218,-2.15642 4.26827,-2.43848 0.376091,-0.28207 13.784088,-16.49526 13.784088,-16.49526 0.09402,0.094 1.081261,-0.94022 2.961715,-3.10275 3.478837,-3.94895 7.756866,-5.92343 12.834096,-5.92343 1.88045,0 3.76091,0.32908 5.64136,0.98724 3.19677,1.12827 5.7824,3.14976 7.75688,6.06447 2.06849,2.82068 3.10274,5.97044 3.10274,9.44928 v 61.7729 c 0,4.51309 -1.6454,8.41504 -4.93619,11.70583 -3.19677,3.19677 -7.09871,4.79516 -11.70582,4.79516 -4.51309,0 -8.41504,-1.59839 -11.705828,-4.79516 -3.196772,-3.29079 -4.795158,-7.19274 -4.795158,-11.70583 v -11.2332 c -0.277898,-3.06563 -2.987588,-1.13379 -3.948953,0 -2.538613,4.70114 -7.401781,7.59567 -13.2572,7.61584 z" />
+          <path
+             inkscape:connector-curvature="0"
+             id="path5212"
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'OTADESIGN Rounded';-inkscape-font-specification:'OTADESIGN Rounded';fill-opacity:1;stroke-width:0.28950602px"
+             d="m 145.83461,185.00361 q -5.92343,0 -10.15445,-4.08999 -4.08999,-4.23102 -4.08999,-10.15445 0,-5.92343 4.08999,-10.01342 4.23102,-4.23102 10.15445,-4.23102 5.92343,0 10.15445,4.23102 4.23102,4.08999 4.23102,10.01342 0,5.92343 -4.23102,10.15445 -4.23102,4.08999 -10.15445,4.08999 z m 0.14103,2.82068 q 5.92343,0 10.01342,4.23102 4.23102,4.23102 4.23102,10.15445 v 34.83541 q 0,5.92343 -4.23102,10.15445 -4.08999,4.08999 -10.01342,4.08999 -5.92343,0 -10.15445,-4.08999 -4.23102,-4.23102 -4.23102,-10.15445 v -34.83541 q 0,-5.92343 4.23102,-10.15445 4.23102,-4.23102 10.15445,-4.23102 z" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

src/client/app/admin/script.ts

@@ -0,0 +1,27 @@
+/**
+ * Admin
+ */
+
+import VueRouter from 'vue-router';
+
+// Style
+import './style.styl';
+
+import init from '../init';
+import Index from './views/index.vue';
+
+init(launch => {
+	document.title = 'Admin';
+
+	// Init router
+	const router = new VueRouter({
+		mode: 'history',
+		base: '/admin/',
+		routes: [
+			{ path: '/', component: Index },
+		]
+	});
+
+	// Launch the app
+	launch(router);
+});

src/client/app/admin/style.styl

@@ -0,0 +1,6 @@
+@import "../app"
+@import "../reset"
+
+html
+	height 100%
+	background var(--bg)

src/client/app/admin/views/announcements.vue

@@ -0,0 +1,92 @@
+<template>
+<div class="cdeuzmsthagexbkpofbmatmugjuvogfb">
+	<ui-card>
+		<div slot="title"><fa icon="broadcast-tower"/> {{ $t('announcements') }}</div>
+		<section v-for="(announcement, i) in announcements" class="fit-top">
+			<ui-input v-model="announcement.title" @change="save">
+				<span>{{ $t('title') }}</span>
+			</ui-input>
+			<ui-textarea v-model="announcement.text">
+				<span>{{ $t('text') }}</span>
+			</ui-textarea>
+			<ui-horizon-group>
+				<ui-button @click="save()"><fa :icon="['far', 'save']"/> {{ $t('save') }}</ui-button>
+				<ui-button @click="remove(i)"><fa :icon="['far', 'trash-alt']"/> {{ $t('remove') }}</ui-button>
+			</ui-horizon-group>
+		</section>
+		<section>
+			<ui-button @click="add"><fa icon="plus"/> {{ $t('add') }}</ui-button>
+		</section>
+	</ui-card>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('admin/views/announcements.vue'),
+	data() {
+		return {
+			announcements: [],
+		};
+	},
+
+	created() {
+		this.$root.getMeta().then(meta => {
+			this.announcements = meta.broadcasts;
+		});
+	},
+
+	methods: {
+		add() {
+			this.announcements.push({
+				title: '',
+				text: ''
+			});
+		},
+
+		remove(i) {
+			this.$swal({
+				type: 'warning',
+				text: this.$t('_remove.are-you-sure').replace('$1', this.announcements.find((_, j) => j == i).title),
+				showCancelButton: true
+			}).then(res => {
+				if (!res.value) return;
+				this.announcements = this.announcements.filter((_, j) => j !== i);
+				this.save(true);
+				this.$swal({
+					type: 'success',
+					text: this.$t('_remove.removed')
+				});
+			});
+		},
+
+		save(silent) {
+			this.$root.api('admin/update-meta', {
+				broadcasts: this.announcements
+			}).then(() => {
+				if (!silent) {
+					this.$swal({
+						type: 'success',
+						text: this.$t('saved')
+					});
+				}
+			}).catch(e => {
+				this.$swal({
+					type: 'error',
+					text: e
+				});
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.cdeuzmsthagexbkpofbmatmugjuvogfb
+	@media (min-width 500px)
+		padding 16px
+
+</style>

src/client/app/admin/views/ap-log.vue

@@ -0,0 +1,105 @@
+<template>
+<div class="hyhctythnmwihguaaapnbrbszsjqxpio">
+	<table>
+		<thead>
+			<tr>
+				<th><fa icon="exchange-alt"/> In/Out</th>
+				<th><fa icon="server"/> Host</th>
+				<th><fa icon="bolt"/> Activity</th>
+				<th><fa icon="user"/> Actor</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="log in logs" :key="log.id">
+				<td :class="log.direction">{{ log.direction == 'in' ? '<' : '>' }} {{ log.direction }}</td>
+				<td>{{ log.host }}</td>
+				<td>{{ log.activity }}</td>
+				<td>@{{ log.actor }}</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			logs: [],
+			connection: null
+		};
+	},
+
+	mounted() {
+		this.connection = this.$root.stream.useSharedConnection('apLog');
+		this.connection.on('log', this.onLog);
+		this.connection.on('logs', this.onLogs);
+		this.connection.send('requestLog', {
+			id: Math.random().toString().substr(2, 8),
+			length: 50
+		});
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		onLog(log) {
+			log.id = Math.random();
+			this.logs.unshift(log);
+			if (this.logs.length > 50) this.logs.pop();
+		},
+
+		onLogs(logs) {
+			logs.reverse().forEach(log => this.onLog(log));
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.hyhctythnmwihguaaapnbrbszsjqxpio
+	display block
+	padding 12px 16px 16px 16px
+	height 250px
+	overflow hidden
+	box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
+	background var(--adminDashboardCardBg)
+	border-radius 8px
+
+	> table
+		width 100%
+		max-width 100%
+		overflow auto
+		border-spacing 0
+		border-collapse collapse
+		color var(--adminDashboardCardFg)
+		font-size 14px
+
+		thead
+			border-bottom solid 1px var(--adminDashboardCardDivider)
+
+			tr
+				th
+					font-weight normal
+					text-align left
+
+		tbody
+			tr
+				&:nth-child(odd)
+					background rgba(0, 0, 0, 0.025)
+
+		th, td
+			padding 8px 16px
+			min-width 128px
+
+		td.in
+			color #d26755
+
+		td.out
+			color #55bb83
+
+</style>

src/client/app/admin/views/charts.vue

@@ -0,0 +1,497 @@
+<template>
+<div class="qvgidhudpqhjttdhxubzuyrhyzgslujw">
+	<header>
+		<b><fa :icon="['far', 'chart-bar']"/> {{ $t('title') }}:</b>
+		<select v-model="src">
+			<optgroup :label="$t('federation')">
+				<option value="federation-instances">{{ $t('charts.federation-instances') }}</option>
+				<option value="federation-instances-total">{{ $t('charts.federation-instances-total') }}</option>
+			</optgroup>
+			<optgroup :label="$t('users')">
+				<option value="users">{{ $t('charts.users') }}</option>
+				<option value="users-total">{{ $t('charts.users-total') }}</option>
+			</optgroup>
+			<optgroup :label="$t('notes')">
+				<option value="notes">{{ $t('charts.notes') }}</option>
+				<option value="local-notes">{{ $t('charts.local-notes') }}</option>
+				<option value="remote-notes">{{ $t('charts.remote-notes') }}</option>
+				<option value="notes-total">{{ $t('charts.notes-total') }}</option>
+			</optgroup>
+			<optgroup :label="$t('drive')">
+				<option value="drive-files">{{ $t('charts.drive-files') }}</option>
+				<option value="drive-files-total">{{ $t('charts.drive-files-total') }}</option>
+				<option value="drive">{{ $t('charts.drive') }}</option>
+				<option value="drive-total">{{ $t('charts.drive-total') }}</option>
+			</optgroup>
+			<optgroup :label="$t('network')">
+				<option value="network-requests">{{ $t('charts.network-requests') }}</option>
+				<option value="network-time">{{ $t('charts.network-time') }}</option>
+				<option value="network-usage">{{ $t('charts.network-usage') }}</option>
+			</optgroup>
+		</select>
+		<div>
+			<span @click="span = 'day'" :class="{ active: span == 'day' }">{{ $t('per-day') }}</span> | <span @click="span = 'hour'" :class="{ active: span == 'hour' }">{{ $t('per-hour') }}</span>
+		</div>
+	</header>
+	<div ref="chart"></div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+import * as tinycolor from 'tinycolor2';
+import * as ApexCharts from 'apexcharts';
+
+const limit = 90;
+
+const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
+const negate = arr => arr.map(x => -x);
+
+export default Vue.extend({
+	i18n: i18n('admin/views/charts.vue'),
+	data() {
+		return {
+			chart: null,
+			src: 'notes',
+			span: 'hour',
+			chartInstance: null
+		};
+	},
+
+	computed: {
+		data(): any {
+			if (this.chart == null) return null;
+			switch (this.src) {
+				case 'federation-instances': return this.federationInstancesChart(false);
+				case 'federation-instances-total': return this.federationInstancesChart(true);
+				case 'users': return this.usersChart(false);
+				case 'users-total': return this.usersChart(true);
+				case 'notes': return this.notesChart('combined');
+				case 'local-notes': return this.notesChart('local');
+				case 'remote-notes': return this.notesChart('remote');
+				case 'notes-total': return this.notesTotalChart();
+				case 'drive': return this.driveChart();
+				case 'drive-total': return this.driveTotalChart();
+				case 'drive-files': return this.driveFilesChart();
+				case 'drive-files-total': return this.driveFilesTotalChart();
+				case 'network-requests': return this.networkRequestsChart();
+				case 'network-time': return this.networkTimeChart();
+				case 'network-usage': return this.networkUsageChart();
+			}
+		},
+
+		stats(): any[] {
+			const stats =
+				this.span == 'day' ? this.chart.perDay :
+				this.span == 'hour' ? this.chart.perHour :
+				null;
+
+			return stats;
+		}
+	},
+
+	watch: {
+		src() {
+			this.render();
+		},
+
+		span() {
+			this.render();
+		}
+	},
+
+	async mounted() {
+		this.now = new Date();
+
+		const [perHour, perDay] = await Promise.all([Promise.all([
+			this.$root.api('charts/federation', { limit: limit, span: 'hour' }),
+			this.$root.api('charts/users', { limit: limit, span: 'hour' }),
+			this.$root.api('charts/notes', { limit: limit, span: 'hour' }),
+			this.$root.api('charts/drive', { limit: limit, span: 'hour' }),
+			this.$root.api('charts/network', { limit: limit, span: 'hour' })
+		]), Promise.all([
+			this.$root.api('charts/federation', { limit: limit, span: 'day' }),
+			this.$root.api('charts/users', { limit: limit, span: 'day' }),
+			this.$root.api('charts/notes', { limit: limit, span: 'day' }),
+			this.$root.api('charts/drive', { limit: limit, span: 'day' }),
+			this.$root.api('charts/network', { limit: limit, span: 'day' })
+		])]);
+
+		const chart = {
+			perHour: {
+				federation: perHour[0],
+				users: perHour[1],
+				notes: perHour[2],
+				drive: perHour[3],
+				network: perHour[4]
+			},
+			perDay: {
+				federation: perDay[0],
+				users: perDay[1],
+				notes: perDay[2],
+				drive: perDay[3],
+				network: perDay[4]
+			}
+		};
+
+		this.chart = chart;
+
+		this.render();
+	},
+
+	beforeDestroy() {
+		this.chartInstance.destroy();
+	},
+
+	methods: {
+		setSrc(src) {
+			this.src = src;
+		},
+
+		render() {
+			if (this.chartInstance) {
+				this.chartInstance.destroy();
+			}
+
+			this.chartInstance = new ApexCharts(this.$refs.chart, {
+				chart: {
+					type: 'area',
+					height: 300,
+					animations: {
+						dynamicAnimation: {
+							enabled: false
+						}
+					},
+					toolbar: {
+						show: false
+					},
+					zoom: {
+						enabled: false
+					}
+				},
+				dataLabels: {
+					enabled: false
+				},
+				grid: {
+					clipMarkers: false,
+					borderColor: 'rgba(0, 0, 0, 0.1)'
+				},
+				stroke: {
+					curve: 'straight',
+					width: 2
+				},
+				legend: {
+					labels: {
+						color: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
+					},
+				},
+				xaxis: {
+					type: 'datetime',
+					labels: {
+						style: {
+							colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
+						}
+					},
+					axisBorder: {
+						color: 'rgba(0, 0, 0, 0.1)'
+					},
+					axisTicks: {
+						color: 'rgba(0, 0, 0, 0.1)'
+					},
+				},
+				yaxis: {
+					labels: {
+						formatter: this.data.bytes ? v => Vue.filter('bytes')(v, 0) : v => Vue.filter('number')(v),
+						style: {
+							color: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
+						}
+					}
+				},
+				series: this.data.series
+			});
+
+			this.chartInstance.render();
+		},
+
+		getDate(i: number) {
+			const y = this.now.getFullYear();
+			const m = this.now.getMonth();
+			const d = this.now.getDate();
+			const h = this.now.getHours();
+
+			return (
+				this.span == 'day' ? new Date(y, m, d - i) :
+				this.span == 'hour' ? new Date(y, m, d, h - i) :
+				null
+			);
+		},
+
+		format(arr) {
+			return arr.map((v, i) => ({ x: this.getDate(i).getTime(), y: v }));
+		},
+
+		federationInstancesChart(total: boolean): any {
+			return {
+				series: [{
+					data: this.format(total
+						? this.stats.federation.instance.total
+						: sum(this.stats.federation.instance.inc, negate(this.stats.federation.instance.dec))
+					)
+				}]
+			};
+		},
+
+		notesChart(type: string): any {
+			return {
+				series: [{
+					name: 'All',
+					type: 'line',
+					data: this.format(type == 'combined'
+						? sum(this.stats.notes.local.inc, negate(this.stats.notes.local.dec), this.stats.notes.remote.inc, negate(this.stats.notes.remote.dec))
+						: sum(this.stats.notes[type].inc, negate(this.stats.notes[type].dec))
+					)
+				}, {
+					name: 'Renotes',
+					type: 'area',
+					data: this.format(type == 'combined'
+						? sum(this.stats.notes.local.diffs.renote, this.stats.notes.remote.diffs.renote)
+						: this.stats.notes[type].diffs.renote
+					)
+				}, {
+					name: 'Replies',
+					type: 'area',
+					data: this.format(type == 'combined'
+						? sum(this.stats.notes.local.diffs.reply, this.stats.notes.remote.diffs.reply)
+						: this.stats.notes[type].diffs.reply
+					)
+				}, {
+					name: 'Normal',
+					type: 'area',
+					data: this.format(type == 'combined'
+						? sum(this.stats.notes.local.diffs.normal, this.stats.notes.remote.diffs.normal)
+						: this.stats.notes[type].diffs.normal
+					)
+				}]
+			};
+		},
+
+		notesTotalChart(): any {
+			return {
+				series: [{
+					name: 'Combined',
+					type: 'line',
+					data: this.format(sum(this.stats.notes.local.total, this.stats.notes.remote.total))
+				}, {
+					name: 'Local',
+					type: 'area',
+					data: this.format(this.stats.notes.local.total)
+				}, {
+					name: 'Remote',
+					type: 'area',
+					data: this.format(this.stats.notes.remote.total)
+				}]
+			};
+		},
+
+		usersChart(total: boolean): any {
+			return {
+				series: [{
+					name: 'Combined',
+					type: 'line',
+					data: this.format(total
+						? sum(this.stats.users.local.total, this.stats.users.remote.total)
+						: sum(this.stats.users.local.inc, negate(this.stats.users.local.dec), this.stats.users.remote.inc, negate(this.stats.users.remote.dec))
+					)
+				}, {
+					name: 'Local',
+					type: 'area',
+					data: this.format(total
+						? this.stats.users.local.total
+						: sum(this.stats.users.local.inc, negate(this.stats.users.local.dec))
+					)
+				}, {
+					name: 'Remote',
+					type: 'area',
+					data: this.format(total
+						? this.stats.users.remote.total
+						: sum(this.stats.users.remote.inc, negate(this.stats.users.remote.dec))
+					)
+				}]
+			};
+		},
+
+		driveChart(): any {
+			return {
+				bytes: true,
+				series: [{
+					name: 'All',
+					type: 'line',
+					data: this.format(
+						sum(
+							this.stats.drive.local.incSize,
+							negate(this.stats.drive.local.decSize),
+							this.stats.drive.remote.incSize,
+							negate(this.stats.drive.remote.decSize)
+						)
+					)
+				}, {
+					name: 'Local +',
+					type: 'area',
+					data: this.format(this.stats.drive.local.incSize)
+				}, {
+					name: 'Local -',
+					type: 'area',
+					data: this.format(negate(this.stats.drive.local.decSize))
+				}, {
+					name: 'Remote +',
+					type: 'area',
+					data: this.format(this.stats.drive.remote.incSize)
+				}, {
+					name: 'Remote -',
+					type: 'area',
+					data: this.format(negate(this.stats.drive.remote.decSize))
+				}]
+			};
+		},
+
+		driveTotalChart(): any {
+			return {
+				bytes: true,
+				series: [{
+					name: 'Combined',
+					type: 'line',
+					data: this.format(sum(this.stats.drive.local.totalSize, this.stats.drive.remote.totalSize))
+				}, {
+					name: 'Local',
+					type: 'area',
+					data: this.format(this.stats.drive.local.totalSize)
+				}, {
+					name: 'Remote',
+					type: 'area',
+					data: this.format(this.stats.drive.remote.totalSize)
+				}]
+			};
+		},
+
+		driveFilesChart(): any {
+			return {
+				series: [{
+					name: 'All',
+					type: 'line',
+					data: this.format(
+						sum(
+							this.stats.drive.local.incCount,
+							negate(this.stats.drive.local.decCount),
+							this.stats.drive.remote.incCount,
+							negate(this.stats.drive.remote.decCount)
+						)
+					)
+				}, {
+					name: 'Local +',
+					type: 'area',
+					data: this.format(this.stats.drive.local.incCount)
+				}, {
+					name: 'Local -',
+					type: 'area',
+					data: this.format(negate(this.stats.drive.local.decCount))
+				}, {
+					name: 'Remote +',
+					type: 'area',
+					data: this.format(this.stats.drive.remote.incCount)
+				}, {
+					name: 'Remote -',
+					type: 'area',
+					data: this.format(negate(this.stats.drive.remote.decCount))
+				}]
+			};
+		},
+
+		driveFilesTotalChart(): any {
+			return {
+				series: [{
+					name: 'Combined',
+					type: 'line',
+					data: this.format(sum(this.stats.drive.local.totalCount, this.stats.drive.remote.totalCount))
+				}, {
+					name: 'Local',
+					type: 'area',
+					data: this.format(this.stats.drive.local.totalCount)
+				}, {
+					name: 'Remote',
+					type: 'area',
+					data: this.format(this.stats.drive.remote.totalCount)
+				}]
+			};
+		},
+
+		networkRequestsChart(): any {
+			return {
+				series: [{
+					name: 'Incoming',
+					data: this.format(this.stats.network.incomingRequests)
+				}]
+			};
+		},
+
+		networkTimeChart(): any {
+			const data = [];
+
+			for (let i = 0; i < limit; i++) {
+				data.push(this.stats.network.incomingRequests[i] != 0 ? (this.stats.network.totalTime[i] / this.stats.network.incomingRequests[i]) : 0);
+			}
+
+			return {
+				series: [{
+					name: 'Avg time',
+					data: this.format(data)
+				}]
+			};
+		},
+
+		networkUsageChart(): any {
+			return {
+				bytes: true,
+				series: [{
+					name: 'Incoming',
+					data: this.format(this.stats.network.incomingBytes)
+				}, {
+					name: 'Outgoing',
+					data: this.format(this.stats.network.outgoingBytes)
+				}]
+			};
+		},
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.qvgidhudpqhjttdhxubzuyrhyzgslujw
+	display block
+	flex 1
+	padding 32px 24px
+	padding-bottom 0
+	box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
+	background var(--face)
+	border-radius 8px
+
+	> header
+		display flex
+		margin 0 8px
+		padding 0 0 8px 0
+		font-size 1em
+		color var(--adminDashboardCardFg)
+		border-bottom solid 1px var(--adminDashboardCardDivider)
+
+		> b
+			margin-right 8px
+
+		> *:last-child
+			margin-left auto
+
+			*
+				&:not(.active)
+					color var(--primary)
+					cursor pointer
+
+</style>

src/client/app/admin/views/cpu-memory.vue

@@ -0,0 +1,183 @@
+<template>
+<div class="zyknedwtlthezamcjlolyusmipqmjgxz">
+	<div>
+		<header>
+			<span><fa icon="microchip"/> CPU <span>{{ cpuP }}%</span></span>
+			<span v-if="meta">{{ meta.cpu.model }}</span>
+		</header>
+		<div ref="cpu"></div>
+	</div>
+	<div>
+		<header>
+			<span><fa icon="memory"/> MEM <span>{{ memP }}%</span></span>
+			<span v-if="meta"></span>
+		</header>
+		<div ref="mem"></div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as ApexCharts from 'apexcharts';
+
+export default Vue.extend({
+	props: ['connection'],
+
+	data() {
+		return {
+			stats: [],
+			cpuChart: null,
+			memChart: null,
+			cpuP: '',
+			memP: '',
+			meta: null
+		};
+	},
+
+	watch: {
+		stats(stats) {
+			this.cpuChart.updateSeries([{
+				data: stats.map((x, i) => ({ x: i, y: x.cpu_usage }))
+			}]);
+			this.memChart.updateSeries([{
+				data: stats.map((x, i) => ({ x: i, y: (x.mem.used / x.mem.total) }))
+			}]);
+		}
+	},
+
+	mounted() {
+		this.$root.getMeta().then(meta => {
+			this.meta = meta;
+		});
+
+		this.connection.on('stats', this.onStats);
+		this.connection.on('statsLog', this.onStatsLog);
+		this.connection.send('requestLog', {
+			id: Math.random().toString().substr(2, 8),
+			length: 200
+		});
+
+		const chartOpts = {
+			chart: {
+				type: 'area',
+				height: 200,
+				animations: {
+					dynamicAnimation: {
+						enabled: false
+					}
+				},
+				toolbar: {
+					show: false
+				},
+				zoom: {
+					enabled: false
+				}
+			},
+			dataLabels: {
+				enabled: false
+			},
+			grid: {
+				clipMarkers: false,
+				borderColor: 'rgba(0, 0, 0, 0.1)'
+			},
+			stroke: {
+				curve: 'straight',
+				width: 2
+			},
+			tooltip: {
+				enabled: false
+			},
+			series: [{
+				data: []
+			}],
+			xaxis: {
+				type: 'numeric',
+				labels: {
+					show: false
+				},
+				tooltip: {
+					enabled: false
+				}
+			},
+			yaxis: {
+				show: false,
+				min: 0,
+				max: 1
+			}
+		};
+
+		this.cpuChart = new ApexCharts(this.$refs.cpu, chartOpts);
+		this.memChart = new ApexCharts(this.$refs.mem, chartOpts);
+
+		this.cpuChart.render();
+		this.memChart.render();
+	},
+
+	beforeDestroy() {
+		this.connection.off('stats', this.onStats);
+		this.connection.off('statsLog', this.onStatsLog);
+
+		this.cpuChart.destroy();
+		this.memChart.destroy();
+	},
+
+	methods: {
+		onStats(stats) {
+			this.stats.push(stats);
+			if (this.stats.length > 200) this.stats.shift();
+
+			this.cpuP = (stats.cpu_usage * 100).toFixed(0);
+			this.memP = (stats.mem.used / stats.mem.total * 100).toFixed(0);
+		},
+
+		onStatsLog(statsLog) {
+			statsLog.reverse().forEach(stats => this.onStats(stats));
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.zyknedwtlthezamcjlolyusmipqmjgxz
+	display flex
+
+	> div
+		display block
+		flex 1
+		padding 20px 12px 0 12px
+		box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
+		background var(--face)
+		border-radius 8px
+
+		&:first-child
+			margin-right 16px
+
+		> header
+			display flex
+			padding 0 8px
+			margin-bottom -16px
+			color var(--adminDashboardCardFg)
+			font-size 14px
+
+			> span
+				&:last-child
+					margin-left auto
+					opacity 0.7
+
+				> span
+					opacity 0.7
+
+		> div
+			margin-bottom -10px
+
+	@media (max-width 1000px)
+		display block
+		margin-bottom 26px
+
+		> div
+			&:first-child
+				margin-right 0
+				margin-bottom 26px
+
+</style>

src/client/app/admin/views/dashboard.vue

@@ -0,0 +1,238 @@
+<template>
+<div class="obdskegsannmntldydackcpzezagxqfy">
+	<header v-if="meta">
+		<p><b>Misskey</b><span>{{ meta.version }}</span></p>
+		<p><b>Machine</b><span>{{ meta.machine }}</span></p>
+		<p><b>OS</b><span>{{ meta.os }}</span></p>
+		<p><b>Node</b><span>{{ meta.node }}</span></p>
+		<p>{{ $t('@.ai-chan-kawaii') }}</p>
+	</header>
+
+	<div v-if="stats" class="stats">
+		<div>
+			<div>
+				<div><fa icon="user"/></div>
+				<div>
+					<span>{{ $t('accounts') }}</span>
+					<b class="primary">{{ stats.originalUsersCount | number }}</b>
+				</div>
+			</div>
+			<div>
+				<span><fa icon="home"/> {{ $t('this-instance') }}</span>
+				<span @click="setChartSrc('users')"><fa :icon="['far', 'chart-bar']"/></span>
+			</div>
+		</div>
+		<div>
+			<div>
+				<div><fa icon="pencil-alt"/></div>
+				<div>
+					<span>{{ $t('notes') }}</span>
+					<b class="primary">{{ stats.originalNotesCount | number }}</b>
+				</div>
+			</div>
+			<div>
+				<span><fa icon="home"/> {{ $t('this-instance') }}</span>
+				<span @click="setChartSrc('notes')"><fa :icon="['far', 'chart-bar']"/></span>
+			</div>
+		</div>
+		<div>
+			<div>
+				<div><fa icon="database"/></div>
+				<div>
+					<span>{{ $t('drive') }}</span>
+					<b>{{ stats.driveUsageLocal | bytes }}</b>
+				</div>
+			</div>
+			<div>
+				<span><fa icon="home"/> {{ $t('this-instance') }}</span>
+				<span @click="setChartSrc('drive')"><fa :icon="['far', 'chart-bar']"/></span>
+			</div>
+		</div>
+		<div>
+			<div>
+				<div><fa :icon="['far', 'hdd']"/></div>
+				<div>
+					<span>{{ $t('instances') }}</span>
+					<b>{{ stats.instances | number }}</b>
+				</div>
+			</div>
+			<div>
+				<span><fa icon="globe"/> {{ $t('federated') }}</span>
+				<span @click="setChartSrc('federation-instances-total')"><fa :icon="['far', 'chart-bar']"/></span>
+			</div>
+		</div>
+	</div>
+
+	<div class="charts">
+		<x-charts ref="charts"/>
+	</div>
+
+	<div class="cpu-memory">
+		<x-cpu-memory :connection="connection"/>
+	</div>
+
+	<div class="ap">
+		<x-ap-log/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+import XCpuMemory from "./cpu-memory.vue";
+import XCharts from "./charts.vue";
+import XApLog from "./ap-log.vue";
+
+export default Vue.extend({
+	i18n: i18n('admin/views/dashboard.vue'),
+	components: {
+		XCpuMemory,
+		XCharts,
+		XApLog
+	},
+
+	data() {
+		return {
+			stats: null,
+			connection: null,
+			meta: null
+		};
+	},
+
+	created() {
+		this.connection = this.$root.stream.useSharedConnection('serverStats');
+
+		this.$root.getMeta().then(meta => {
+			this.meta = meta;
+		});
+
+		this.$root.api('stats').then(stats => {
+			this.stats = stats;
+		});
+	},
+
+	beforeDestroy() {
+		this.connection.dispose();
+	},
+
+	methods: {
+		setChartSrc(src) {
+			this.$refs.charts.setSrc(src);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.obdskegsannmntldydackcpzezagxqfy
+	padding 16px
+
+	@media (min-width 500px)
+		padding 32px
+
+	> header
+		display flex
+		margin-bottom 16px
+		padding-bottom 16px
+		border-bottom solid 1px var(--adminDashboardHeaderBorder)
+		color var(--adminDashboardHeaderFg)
+		font-size 14px
+		white-space nowrap
+
+		@media (max-width 1000px)
+			display none
+
+		> p
+			display block
+			margin 0 32px 0 0
+			overflow hidden
+			text-overflow ellipsis
+
+			> b
+				&:after
+					content ':'
+					margin-right 8px
+
+			&:last-child
+				margin-left auto
+				margin-right 0
+
+	> .stats
+		display flex
+		justify-content space-between
+		margin-bottom 16px
+
+		> div
+			flex 1
+			margin-right 16px
+			color var(--adminDashboardCardFg)
+			box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
+			background var(--adminDashboardCardBg)
+			border-radius 8px
+
+			&:last-child
+				margin-right 0
+
+			> div:first-child
+				display flex
+				align-items center
+				text-align center
+
+				&:last-child
+					margin-right 0
+
+				> div:first-child
+					padding 16px 24px
+					font-size 28px
+
+				> div:last-child
+					flex 1
+					padding 16px 32px 16px 0
+					text-align right
+
+					> span
+						font-size 70%
+						opacity 0.7
+
+					> b
+						display block
+
+						&.primary
+							color var(--primary)
+
+			> div:last-child
+				display flex
+				padding 6px 16px
+				border-top solid 1px var(--adminDashboardCardDivider)
+
+				> span
+					font-size 70%
+					opacity 0.7
+
+					&:last-child
+						margin-left auto
+						cursor pointer
+
+		@media (max-width 900px)
+			display grid
+			grid-template-columns 1fr 1fr
+			grid-template-rows 1fr 1fr
+			gap 16px
+
+			> div
+				margin-right 0
+
+		@media (max-width 500px)
+			display block
+
+			> div:not(:last-child)
+				margin-bottom 16px
+
+	> .charts
+		margin-bottom 16px
+
+	> .cpu-memory
+		margin-bottom 16px
+
+</style>

src/client/app/admin/views/emoji.vue

@@ -0,0 +1,149 @@
+<template>
+<div class="tumhkfkmgtvzljezfvmgkeurkfncshbe">
+	<ui-card>
+		<div slot="title"><fa icon="plus"/> {{ $t('add-emoji.title') }}</div>
+		<section class="fit-top">
+			<ui-horizon-group inputs>
+				<ui-input v-model="name">
+					<span>{{ $t('add-emoji.name') }}</span>
+					<span slot="desc">{{ $t('add-emoji.name-desc') }}</span>
+				</ui-input>
+				<ui-input v-model="aliases">
+					<span>{{ $t('add-emoji.aliases') }}</span>
+					<span slot="desc">{{ $t('add-emoji.aliases-desc') }}</span>
+				</ui-input>
+			</ui-horizon-group>
+			<ui-input v-model="url">
+				<i slot="icon"><fa icon="link"/></i>
+				<span>{{ $t('add-emoji.url') }}</span>
+			</ui-input>
+			<ui-info>{{ $t('add-emoji.info') }}</ui-info>
+			<ui-button @click="add">{{ $t('add-emoji.add') }}</ui-button>
+		</section>
+	</ui-card>
+
+	<ui-card>
+		<div slot="title"><fa :icon="['far', 'grin']"/> {{ $t('emojis.title') }}</div>
+		<section v-for="emoji in emojis">
+			<img :src="emoji.url" :alt="emoji.name" style="width: 64px;"/>
+			<ui-horizon-group inputs>
+				<ui-input v-model="emoji.name">
+					<span>{{ $t('add-emoji.name') }}</span>
+				</ui-input>
+				<ui-input v-model="emoji.aliases">
+					<span>{{ $t('add-emoji.aliases') }}</span>
+				</ui-input>
+			</ui-horizon-group>
+			<ui-input v-model="emoji.url">
+				<i slot="icon"><fa icon="link"/></i>
+				<span>{{ $t('add-emoji.url') }}</span>
+			</ui-input>
+			<ui-horizon-group>
+				<ui-button @click="updateEmoji(emoji)"><fa :icon="['far', 'save']"/> {{ $t('emojis.update') }}</ui-button>
+				<ui-button @click="removeEmoji(emoji)"><fa :icon="['far', 'trash-alt']"/> {{ $t('emojis.remove') }}</ui-button>
+			</ui-horizon-group>
+		</section>
+	</ui-card>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('admin/views/emoji.vue'),
+	data() {
+		return {
+			name: '',
+			url: '',
+			aliases: '',
+			emojis: []
+		};
+	},
+
+	mounted() {
+		this.fetchEmojis();
+	},
+
+	methods: {
+		add() {
+			this.$root.api('admin/emoji/add', {
+				name: this.name,
+				url: this.url,
+				aliases: this.aliases.split(' ').filter(x => x.length > 0)
+			}).then(() => {
+				this.$swal({
+					type: 'success',
+					text: this.$t('add-emoji.added')
+				});
+				this.fetchEmojis();
+			}).catch(e => {
+				this.$swal({
+					type: 'error',
+					text: e
+				});
+			});
+		},
+
+		fetchEmojis() {
+			this.$root.api('admin/emoji/list').then(emojis => {
+				emojis.reverse();
+				emojis.forEach(e => e.aliases = (e.aliases || []).join(' '));
+				this.emojis = emojis;
+			});
+		},
+
+		updateEmoji(emoji) {
+			this.$root.api('admin/emoji/update', {
+				id: emoji.id,
+				name: emoji.name,
+				url: emoji.url,
+				aliases: emoji.aliases.split(' ').filter(x => x.length > 0)
+			}).then(() => {
+				this.$swal({
+					type: 'success',
+					text: this.$t('updated')
+				});
+			}).catch(e => {
+				this.$swal({
+					type: 'error',
+					text: e
+				});
+			});
+		},
+
+		removeEmoji(emoji) {
+			this.$swal({
+				type: 'warning',
+				text: this.$t('remove-emoji.are-you-sure').replace('$1', emoji.name),
+				showCancelButton: true
+			}).then(res => {
+				if (!res.value) return;
+
+				this.$root.api('admin/emoji/remove', {
+					id: emoji.id
+				}).then(() => {
+					this.$swal({
+						type: 'success',
+						text: this.$t('remove-emoji.removed')
+					});
+					this.fetchEmojis();
+				}).catch(e => {
+					this.$swal({
+						type: 'error',
+						text: e
+					});
+				});
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.tumhkfkmgtvzljezfvmgkeurkfncshbe
+	@media (min-width 500px)
+		padding 16px
+
+</style>

src/client/app/admin/views/hashtags.vue

@@ -0,0 +1,48 @@
+<template>
+<div>
+	<ui-card>
+		<div slot="title">{{ $t('hided-tags') }}</div>
+		<section>
+			<textarea class="jdnqwkzlnxcfftthoybjxrebyolvoucw" v-model="hidedTags"></textarea>
+			<ui-button @click="save">{{ $t('save') }}</ui-button>
+		</section>
+	</ui-card>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('admin/views/hashtags.vue'),
+	data() {
+		return {
+			hidedTags: '',
+		};
+	},
+	created() {
+		this.$root.getMeta().then(meta => {
+			this.hidedTags = meta.hidedTags.join('\n');
+		});
+	},
+	methods: {
+		save() {
+			this.$root.api('admin/update-meta', {
+				hidedTags: this.hidedTags.split('\n')
+			}).then(() => {
+				//this.$root.os.apis.dialog({ text: `Saved` });
+			}).catch(e => {
+				//this.$root.os.apis.dialog({ text: `Failed ${e}` });
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.jdnqwkzlnxcfftthoybjxrebyolvoucw
+	width 100%
+	min-height 300px
+
+</style>

src/client/app/admin/views/index.vue

@@ -0,0 +1,262 @@
+<template>
+<div class="mk-admin" :class="{ isMobile }">
+	<header v-show="isMobile">
+		<button class="nav" @click="navOpend = true"><fa icon="bars"/></button>
+		<span>MisskeyMyAdmin</span>
+	</header>
+	<div class="nav-backdrop"
+		v-if="navOpend && isMobile"
+		@click="navOpend = false"
+		@touchstart="navOpend = false"
+	></div>
+	<nav v-show="navOpend">
+		<div class="mi">
+			<img svg-inline src="../assets/header-icon.svg"/>
+		</div>
+		<div class="me">
+			<img class="avatar" :src="$store.state.i.avatarUrl" alt="avatar"/>
+			<p class="name">{{ $store.state.i | userName }}</p>
+		</div>
+		<ul>
+			<li @click="nav('dashboard')" :class="{ active: page == 'dashboard' }"><fa icon="home" fixed-width/>{{ $t('dashboard') }}</li>
+			<li @click="nav('instance')" :class="{ active: page == 'instance' }"><fa icon="cog" fixed-width/>{{ $t('instance') }}</li>
+			<li @click="nav('users')" :class="{ active: page == 'users' }"><fa icon="users" fixed-width/>{{ $t('users') }}</li>
+			<li @click="nav('emoji')" :class="{ active: page == 'emoji' }"><fa :icon="['far', 'grin']" fixed-width/>{{ $t('emoji') }}</li>
+			<li @click="nav('announcements')" :class="{ active: page == 'announcements' }"><fa icon="broadcast-tower" fixed-width/>{{ $t('announcements') }}</li>
+			<li @click="nav('hashtags')" :class="{ active: page == 'hashtags' }"><fa icon="hashtag" fixed-width/>{{ $t('hashtags') }}</li>
+
+			<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }"><fa icon="cloud" fixed-width/>{{ $t('@.drive') }}</li> -->
+			<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">{{ $t('update') }}</li> -->
+		</ul>
+		<div class="back-to-misskey">
+			<a href="/"><fa icon="arrow-left"/> {{ $t('back-to-misskey') }}</a>
+		</div>
+		<div class="version">
+			<small>Misskey {{ version }}</small>
+		</div>
+	</nav>
+	<main>
+		<div v-if="page == 'dashboard'"><x-dashboard/></div>
+		<div v-if="page == 'instance'"><x-instance/></div>
+		<div v-if="page == 'users'"><x-users/></div>
+		<div v-if="page == 'emoji'"><x-emoji/></div>
+		<div v-if="page == 'announcements'"><x-announcements/></div>
+		<div v-if="page == 'hashtags'"><x-hashtags/></div>
+		<div v-if="page == 'drive'"></div>
+		<div v-if="page == 'update'"></div>
+	</main>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+import { version } from '../../config';
+import XDashboard from "./dashboard.vue";
+import XInstance from "./instance.vue";
+import XEmoji from "./emoji.vue";
+import XAnnouncements from "./announcements.vue";
+import XHashtags from "./hashtags.vue";
+import XUsers from "./users.vue";
+
+// Detect the user agent
+const ua = navigator.userAgent.toLowerCase();
+const isMobile = /mobile|iphone|ipad|android/.test(ua);
+
+export default Vue.extend({
+	i18n: i18n('admin/views/index.vue'),
+	components: {
+		XDashboard,
+		XInstance,
+		XEmoji,
+		XAnnouncements,
+		XHashtags,
+		XUsers
+	},
+	provide: {
+		isMobile
+	},
+	data() {
+		return {
+			page: 'dashboard',
+			version,
+			isMobile,
+			navOpend: !isMobile
+		};
+	},
+	methods: {
+		nav(page: string) {
+			this.page = page;
+		}
+	}
+});
+</script>
+
+<style lang="stylus">
+.mk-admin
+	$headerHeight = 48px
+
+	display flex
+	height 100%
+
+	> header
+		position fixed
+		top 0
+		z-index 10000
+		width 100%
+		color var(--mobileHeaderFg)
+		background-color var(--mobileHeaderBg)
+		box-shadow 0 1px 0 rgba(#000, 0.075)
+
+		&, *
+			user-select none
+
+		> span
+			display block
+			line-height $headerHeight
+			text-align center
+
+		> .nav
+			display block
+			position absolute
+			top 0
+			left 0
+			z-index 10001
+			padding 0
+			width $headerHeight
+			font-size 1.4em
+			line-height $headerHeight
+			border-right solid 1px rgba(#000, 0.1)
+
+			> [data-icon]
+				transition all 0.2s ease
+
+	> nav
+		position fixed
+		z-index 20001
+		top 0
+		left 0
+		width 250px
+		height 100vh
+		overflow auto
+		background #333
+		color #fff
+
+		> .mi
+			text-align center
+
+			> svg
+				width 24px
+				height 82px
+				vertical-align top
+				fill #fff
+				opacity 0.7
+
+		> .me
+			display flex
+			margin 0 16px 16px 16px
+			padding 16px 0
+			align-items center
+			border-top solid 1px #555
+			border-bottom solid 1px #555
+
+			> .avatar
+				height 48px
+				border-radius 100%
+				vertical-align middle
+
+			> .name
+				margin 0 16px
+				padding 0
+				color #fff
+				overflow hidden
+				text-overflow ellipsis
+				white-space nowrap
+				font-size 15px
+
+		> .back-to-misskey
+			margin 16px 16px 0 16px
+			padding 0
+			border-top solid 1px #555
+
+			> a
+				display block
+				padding 16px 4px
+				color inherit
+				text-decoration none
+				color #eee
+				font-size 15px
+
+				&:hover
+					color #fff
+
+				> [data-icon]
+					margin-right 6px
+
+		> .version
+			margin 0 16px 16px 16px
+			padding-top 16px
+			border-top solid 1px #555
+			text-align center
+
+			> small
+				opacity 0.7
+
+		> ul
+			margin 0
+			padding 0
+			list-style none
+			font-size 15px
+
+			> li
+				display block
+				padding 10px 16px
+				margin 0
+				cursor pointer
+				user-select none
+				color #eee
+				transition margin-left 0.2s ease
+
+				&:hover
+					color #fff
+
+				> [data-icon]
+					margin-right 6px
+
+				&.active
+					margin-left 8px
+					color var(--primary) !important
+
+					&:after
+						content ""
+						display block
+						position absolute
+						top 0
+						right 0
+						bottom 0
+						margin auto 0
+						height 0
+						border-top solid 16px transparent
+						border-right solid 16px var(--bg)
+						border-bottom solid 16px transparent
+						border-left solid 16px transparent
+
+	> .nav-backdrop
+		position fixed
+		top 0
+		left 0
+		z-index 20000
+		width 100%
+		height 100%
+		background var(--mobileNavBackdrop)
+
+	> main
+		width 100%
+		padding 0 0 0 250px
+		max-width 1300px
+
+	&.isMobile
+		> main
+			padding $headerHeight 0 0 0
+
+</style>

src/client/app/admin/views/instance.vue

@@ -0,0 +1,197 @@
+<template>
+<div class="axbwjelsbymowqjyywpirzhdlszoncqs">
+	<ui-card>
+		<div slot="title"><fa icon="cog"/> {{ $t('instance') }}</div>
+		<section class="fit-top fit-bottom">
+			<ui-input v-model="name">{{ $t('instance-name') }}</ui-input>
+			<ui-textarea v-model="description">{{ $t('instance-description') }}</ui-textarea>
+			<ui-input v-model="bannerUrl"><i slot="icon"><fa icon="link"/></i>{{ $t('banner-url') }}</ui-input>
+			<ui-input v-model="languages"><i slot="icon"><fa icon="language"/></i>{{ $t('languages') }}<span slot="desc">{{ $t('languages-desc') }}</span></ui-input>
+		</section>
+		<section class="fit-bottom">
+			<header><fa icon="headset"/> {{ $t('maintainer-config') }}</header>
+			<ui-input v-model="maintainerName">{{ $t('maintainer-name') }}</ui-input>
+			<ui-input v-model="maintainerEmail" type="email"><i slot="icon"><fa :icon="['far', 'envelope']"/></i>{{ $t('maintainer-email') }}</ui-input>
+		</section>
+		<section class="fit-top fit-bottom">
+			<ui-input v-model="maxNoteTextLength">{{ $t('max-note-text-length') }}</ui-input>
+		</section>
+		<section class="fit-bottom">
+			<header><fa icon="cloud"/> {{ $t('drive-config') }}</header>
+			<ui-switch v-model="cacheRemoteFiles">{{ $t('cache-remote-files') }}<span slot="desc">{{ $t('cache-remote-files-desc') }}</span></ui-switch>
+			<ui-input v-model="localDriveCapacityMb" type="number">{{ $t('local-drive-capacity-mb') }}<span slot="suffix">MB</span><span slot="desc">{{ $t('mb') }}</span></ui-input>
+			<ui-input v-model="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles">{{ $t('remote-drive-capacity-mb') }}<span slot="suffix">MB</span><span slot="desc">{{ $t('mb') }}</span></ui-input>
+		</section>
+		<section class="fit-bottom">
+			<header><fa icon="shield-alt"/> {{ $t('recaptcha-config') }}</header>
+			<ui-switch v-model="enableRecaptcha">{{ $t('enable-recaptcha') }}</ui-switch>
+			<ui-info>{{ $t('recaptcha-info') }}</ui-info>
+			<ui-input v-model="recaptchaSiteKey" :disabled="!enableRecaptcha"><i slot="icon"><fa icon="key"/></i>{{ $t('recaptcha-site-key') }}</ui-input>
+			<ui-input v-model="recaptchaSecretKey" :disabled="!enableRecaptcha"><i slot="icon"><fa icon="key"/></i>{{ $t('recaptcha-secret-key') }}</ui-input>
+		</section>
+		<section>
+			<header><fa icon="ghost"/> {{ $t('proxy-account-config') }}</header>
+			<ui-info>{{ $t('proxy-account-info') }}</ui-info>
+			<ui-input v-model="proxyAccount"><span slot="prefix">@</span>{{ $t('proxy-account-username') }}<span slot="desc">{{ $t('proxy-account-username-desc') }}</span></ui-input>
+			<ui-info warn>{{ $t('proxy-account-warn') }}</ui-info>
+		</section>
+		<section>
+			<ui-switch v-model="disableRegistration">{{ $t('disable-registration') }}</ui-switch>
+		</section>
+		<section>
+			<ui-switch v-model="disableLocalTimeline">{{ $t('disable-local-timeline') }}</ui-switch>
+		</section>
+		<section>
+			<ui-button @click="updateMeta">{{ $t('save') }}</ui-button>
+		</section>
+	</ui-card>
+
+	<ui-card>
+		<div slot="title">{{ $t('invite') }}</div>
+		<section>
+			<ui-button @click="invite">{{ $t('invite') }}</ui-button>
+			<p v-if="inviteCode">Code: <code>{{ inviteCode }}</code></p>
+		</section>
+	</ui-card>
+
+	<ui-card>
+		<div slot="title"><fa :icon="['fab', 'twitter']"/> {{ $t('twitter-integration-config') }}</div>
+		<section>
+			<ui-switch v-model="enableTwitterIntegration">{{ $t('enable-twitter-integration') }}</ui-switch>
+			<ui-info>{{ $t('twitter-integration-info') }}</ui-info>
+			<ui-input v-model="twitterConsumerKey" :disabled="!enableTwitterIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('twitter-integration-consumer-key') }}</ui-input>
+			<ui-input v-model="twitterConsumerSecret" :disabled="!enableTwitterIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('twitter-integration-consumer-secret') }}</ui-input>
+			<ui-button @click="updateMeta">{{ $t('save') }}</ui-button>
+		</section>
+	</ui-card>
+
+	<ui-card>
+		<div slot="title"><fa :icon="['fab', 'github']"/> {{ $t('github-integration-config') }}</div>
+		<section>
+			<ui-switch v-model="enableGithubIntegration">{{ $t('enable-github-integration') }}</ui-switch>
+			<ui-info>{{ $t('github-integration-info') }}</ui-info>
+			<ui-input v-model="githubClientId" :disabled="!enableGithubIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('github-integration-client-id') }}</ui-input>
+			<ui-input v-model="githubClientSecret" :disabled="!enableGithubIntegration"><i slot="icon"><fa icon="key"/></i>{{ $t('github-integration-client-secret') }}</ui-input>
+			<ui-button @click="updateMeta">{{ $t('save') }}</ui-button>
+		</section>
+	</ui-card>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+
+export default Vue.extend({
+	i18n: i18n('admin/views/instance.vue'),
+	data() {
+		return {
+			maintainerName: null,
+			maintainerEmail: null,
+			disableRegistration: false,
+			disableLocalTimeline: false,
+			bannerUrl: null,
+			name: null,
+			description: null,
+			languages: null,
+			cacheRemoteFiles: false,
+			localDriveCapacityMb: null,
+			remoteDriveCapacityMb: null,
+			maxNoteTextLength: null,
+			enableRecaptcha: false,
+			recaptchaSiteKey: null,
+			recaptchaSecretKey: null,
+			enableTwitterIntegration: false,
+			twitterConsumerKey: null,
+			twitterConsumerSecret: null,
+			enableGithubIntegration: false,
+			githubClientId: null,
+			githubClientSecret: null,
+			proxyAccount: null,
+			inviteCode: null,
+		};
+	},
+
+	created() {
+		this.$root.getMeta().then(meta => {
+			this.maintainerName = meta.maintainer.name;
+			this.maintainerEmail = meta.maintainer.email;
+			this.bannerUrl = meta.bannerUrl;
+			this.name = meta.name;
+			this.description = meta.description;
+			this.languages = meta.langs.join(' ');
+			this.cacheRemoteFiles = meta.cacheRemoteFiles;
+			this.localDriveCapacityMb = meta.driveCapacityPerLocalUserMb;
+			this.remoteDriveCapacityMb = meta.driveCapacityPerRemoteUserMb;
+			this.maxNoteTextLength = meta.maxNoteTextLength;
+			this.enableRecaptcha = meta.enableRecaptcha;
+			this.recaptchaSiteKey = meta.recaptchaSiteKey;
+			this.recaptchaSecretKey = meta.recaptchaSecretKey;
+			this.proxyAccount = meta.proxyAccount;
+			this.enableTwitterIntegration = meta.enableTwitterIntegration;
+			this.twitterConsumerKey = meta.twitterConsumerKey;
+			this.twitterConsumerSecret = meta.twitterConsumerSecret;
+			this.enableGithubIntegration = meta.enableGithubIntegration;
+			this.githubClientId = meta.githubClientId;
+			this.githubClientSecret = meta.githubClientSecret;
+		});
+	},
+
+	methods: {
+		invite() {
+			this.$root.api('admin/invite').then(x => {
+				this.inviteCode = x.code;
+			}).catch(e => {
+				this.$swal({
+					type: 'error',
+					text: e
+				});
+			});
+		},
+
+		updateMeta() {
+			this.$root.api('admin/update-meta', {
+				maintainerName: this.maintainerName,
+				maintainerEmail: this.maintainerEmail,
+				disableRegistration: this.disableRegistration,
+				disableLocalTimeline: this.disableLocalTimeline,
+				bannerUrl: this.bannerUrl,
+				name: this.name,
+				description: this.description,
+				langs: this.languages.split(' '),
+				cacheRemoteFiles: this.cacheRemoteFiles,
+				localDriveCapacityMb: parseInt(this.localDriveCapacityMb, 10),
+				remoteDriveCapacityMb: parseInt(this.remoteDriveCapacityMb, 10),
+				maxNoteTextLength: parseInt(this.maxNoteTextLength, 10),
+				enableRecaptcha: this.enableRecaptcha,
+				recaptchaSiteKey: this.recaptchaSiteKey,
+				recaptchaSecretKey: this.recaptchaSecretKey,
+				proxyAccount: this.proxyAccount,
+				enableTwitterIntegration: this.enableTwitterIntegration,
+				twitterConsumerKey: this.twitterConsumerKey,
+				twitterConsumerSecret: this.twitterConsumerSecret,
+				enableGithubIntegration: this.enableGithubIntegration,
+				githubClientId: this.githubClientId,
+				githubClientSecret: this.githubClientSecret,
+			}).then(() => {
+				this.$swal({
+					type: 'success',
+					text: this.$t('saved')
+				});
+			}).catch(e => {
+				this.$swal({
+					type: 'error',
+					text: e
+				});
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.axbwjelsbymowqjyywpirzhdlszoncqs
+	@media (min-width 500px)
+		padding 16px
+
+</style>

src/client/app/admin/views/users.vue

@@ -0,0 +1,138 @@
+<template>
+<div class="ucnffhbtogqgscfmqcymwmmupoknpfsw">
+	<ui-card>
+		<div slot="title">{{ $t('verify-user') }}</div>
+		<section class="fit-top">
+			<ui-input v-model="verifyUsername" type="text">
+				<span slot="prefix">@</span>
+			</ui-input>
+			<ui-button @click="verifyUser" :disabled="verifying">{{ $t('verify') }}</ui-button>
+		</section>
+	</ui-card>
+
+	<ui-card>
+		<div slot="title">{{ $t('unverify-user') }}</div>
+		<section class="fit-top">
+			<ui-input v-model="unverifyUsername" type="text">
+				<span slot="prefix">@</span>
+			</ui-input>
+			<ui-button @click="unverifyUser" :disabled="unverifying">{{ $t('unverify') }}</ui-button>
+		</section>
+	</ui-card>
+
+	<ui-card>
+		<div slot="title">{{ $t('suspend-user') }}</div>
+		<section class="fit-top">
+			<ui-input v-model="suspendUsername" type="text">
+				<span slot="prefix">@</span>
+			</ui-input>
+			<ui-button @click="suspendUser" :disabled="suspending">{{ $t('suspend') }}</ui-button>
+		</section>
+	</ui-card>
+
+	<ui-card>
+		<div slot="title">{{ $t('unsuspend-user') }}</div>
+		<section class="fit-top">
+			<ui-input v-model="unsuspendUsername" type="text">
+				<span slot="prefix">@</span>
+			</ui-input>
+			<ui-button @click="unsuspendUser" :disabled="unsuspending">{{ $t('unsuspend') }}</ui-button>
+		</section>
+	</ui-card>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../i18n';
+import parseAcct from "../../../../misc/acct/parse";
+
+export default Vue.extend({
+	i18n: i18n('admin/views/users.vue'),
+	data() {
+		return {
+			verifyUsername: null,
+			verifying: false,
+			unverifyUsername: null,
+			unverifying: false,
+			suspendUsername: null,
+			suspending: false,
+			unsuspendUsername: null,
+			unsuspending: false
+		};
+	},
+
+	methods: {
+		async verifyUser() {
+			this.verifying = true;
+
+			const process = async () => {
+				const user = await this.$root.os.api('users/show', parseAcct(this.verifyUsername));
+				await this.$root.os.api('admin/verify-user', { userId: user.id });
+				//this.$root.os.apis.dialog({ text: this.$t('verified') });
+			};
+
+			await process().catch(e => {
+				//this.$root.os.apis.dialog({ text: `Failed: ${e}` });
+			});
+
+			this.verifying = false;
+		},
+
+		async unverifyUser() {
+			this.unverifying = true;
+
+			const process = async () => {
+				const user = await this.$root.os.api('users/show', parseAcct(this.unverifyUsername));
+				await this.$root.os.api('admin/unverify-user', { userId: user.id });
+				//this.$root.os.apis.dialog({ text: this.$t('unverified') });
+			};
+
+			await process().catch(e => {
+				//this.$root.os.apis.dialog({ text: `Failed: ${e}` });
+			});
+
+			this.unverifying = false;
+		},
+
+		async suspendUser() {
+			this.suspending = true;
+
+			const process = async () => {
+				const user = await this.$root.os.api('users/show', parseAcct(this.suspendUsername));
+				await this.$root.os.api('admin/suspend-user', { userId: user.id });
+				//this.$root.os.apis.dialog({ text: this.$t('suspended') });
+			};
+
+			await process().catch(e => {
+				//this.$root.os.apis.dialog({ text: `Failed: ${e}` });
+			});
+
+			this.suspending = false;
+		},
+
+		async unsuspendUser() {
+			this.unsuspending = true;
+
+			const process = async () => {
+				const user = await this.$root.os.api('users/show', parseAcct(this.unsuspendUsername));
+				await this.$root.os.api('admin/unsuspend-user', { userId: user.id });
+				//this.$root.os.apis.dialog({ text: this.$t('unsuspended') });
+			};
+
+			await process().catch(e => {
+				//this.$root.os.apis.dialog({ text: `Failed: ${e}` });
+			});
+
+			this.unsuspending = false;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.ucnffhbtogqgscfmqcymwmmupoknpfsw
+	@media (min-width 500px)
+		padding 16px
+
+</style>

src/client/app/app.styl

@@ -13,13 +13,6 @@ html
 body
 	overflow-wrap break-word
 
-#error
-	padding 32px
-	color #fff
-
-	hr
-		border solid 1px #fff
-
 #nprogress
 	pointer-events none
 
@@ -128,7 +121,7 @@ pre
 		overflow auto
 		tab-size 2
 
-[data-fa]
+[data-icon]
 	display inline-block
 
 .swal2-container

src/client/app/auth/views/form.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="form">
 	<header>
-		<h1>%i18n:@share-access%</h1>
+		<h1 v-html="$t('share-access', { name: app.name })"></h1>
 		<img :src="app.iconUrl"/>
 	</header>
 	<div class="app">
@@ -11,32 +11,35 @@
 			<p class="description">{{ app.description }}</p>
 		</section>
 		<section>
-			<h2>%i18n:@permission-ask%</h2>
+			<h2>{{ $t('permission-ask') }}</h2>
 			<ul>
 				<template v-for="p in app.permission">
-					<li v-if="p == 'account-read'">%i18n:@account-read%</li>
-					<li v-if="p == 'account-write'">%i18n:@account-write%</li>
-					<li v-if="p == 'note-write'">%i18n:@note-write%</li>
-					<li v-if="p == 'like-write'">%i18n:@like-write%</li>
-					<li v-if="p == 'following-write'">%i18n:@following-write%</li>
-					<li v-if="p == 'drive-read'">%i18n:@drive-read%</li>
-					<li v-if="p == 'drive-write'">%i18n:@drive-write%</li>
-					<li v-if="p == 'notification-read'">%i18n:@notification-read%</li>
-					<li v-if="p == 'notification-write'">%i18n:@notification-write%</li>
+					<li v-if="p == 'account-read'">{{ $t('account-read') }}</li>
+					<li v-if="p == 'account-write'">{{ $t('account-write') }}</li>
+					<li v-if="p == 'note-write'">{{ $t('note-write') }}</li>
+					<li v-if="p == 'like-write'">{{ $t('like-write') }}</li>
+					<li v-if="p == 'following-write'">{{ $t('following-write') }}</li>
+					<li v-if="p == 'drive-read'">{{ $t('drive-read') }}</li>
+					<li v-if="p == 'drive-write'">{{ $t('drive-write') }}</li>
+					<li v-if="p == 'notification-read'">{{ $t('notification-read') }}</li>
+					<li v-if="p == 'notification-write'">{{ $t('notification-write') }}</li>
 				</template>
 			</ul>
 		</section>
 	</div>
 	<div class="action">
-		<button @click="cancel">%i18n:@cancel%</button>
-		<button @click="accept">%i18n:@accept%</button>
+		<button @click="cancel">{{ $t('cancel') }}</button>
+		<button @click="accept">{{ $t('accept') }}</button>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../i18n';
+
 export default Vue.extend({
+	i18n: i18n('auth/views/form.vue'),
 	props: ['session'],
 	computed: {
 		app(): any {
@@ -45,7 +48,7 @@ export default Vue.extend({
 	},
 	methods: {
 		cancel() {
-			(this as any).api('auth/deny', {
+			this.$root.api('auth/deny', {
 				token: this.session.token
 			}).then(() => {
 				this.$emit('denied');
@@ -53,7 +56,7 @@ export default Vue.extend({
 		},
 
 		accept() {
-			(this as any).api('auth/accept', {
+			this.$root.api('auth/accept', {
 				token: this.session.token
 			}).then(() => {
 				this.$emit('accepted');

src/client/app/auth/views/index.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="index">
 	<main v-if="$store.getters.isSignedIn">
-		<p class="fetching" v-if="fetching">%i18n:@loading%<mk-ellipsis/></p>
+		<p class="fetching" v-if="fetching">{{ $t('loading') }}<mk-ellipsis/></p>
 		<x-form
 			class="form"
 			ref="form"
@@ -11,20 +11,20 @@
 			@accepted="accepted"
 		/>
 		<div class="denied" v-if="state == 'denied'">
-			<h1>%i18n:@denied%</h1>
-			<p>%i18n:@denied-paragraph%</p>
+			<h1>{{ $t('denied') }}</h1>
+			<p>{{ $t('denied-paragraph') }}</p>
 		</div>
 		<div class="accepted" v-if="state == 'accepted'">
-			<h1>{{ session.app.isAuthorized ? '%i18n:@already-authorized%' : '%i18n:@allowed%' }}</h1>
-			<p v-if="session.app.callbackUrl">%i18n:@callback-url%<mk-ellipsis/></p>
-			<p v-if="!session.app.callbackUrl">%i18n:@please-go-back%</p>
+			<h1>{{ session.app.isAuthorized ? this.$t('already-authorized') : this.$t('allowed') }}</h1>
+			<p v-if="session.app.callbackUrl">{{ $t('callback-url') }}<mk-ellipsis/></p>
+			<p v-if="!session.app.callbackUrl">{{ $t('please-go-back') }}</p>
 		</div>
 		<div class="error" v-if="state == 'fetch-session-error'">
-			<p>%i18n:@error%</p>
+			<p>{{ $t('error') }}</p>
 		</div>
 	</main>
 	<main class="signin" v-if="!$store.getters.isSignedIn">
-		<h1>%i18n:@sign-in%</h1>
+		<h1>{{ $t('sign-in') }}</h1>
 		<mk-signin/>
 	</main>
 	<footer><img src="/assets/auth/icon.svg" alt="Misskey"/></footer>
@@ -33,9 +33,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../i18n';
 import XForm from './form.vue';
 
 export default Vue.extend({
+	i18n: i18n('auth/views/index.vue'),
 	components: {
 		XForm
 	},
@@ -55,7 +57,7 @@ export default Vue.extend({
 		if (!this.$store.getters.isSignedIn) return;
 
 		// Fetch session
-		(this as any).api('auth/session/show', {
+		this.$root.api('auth/session/show', {
 			token: this.token
 		}).then(session => {
 			this.session = session;
@@ -63,7 +65,7 @@ export default Vue.extend({
 
 			// 既に連携していた場合
 			if (this.session.app.isAuthorized) {
-				(this as any).api('auth/accept', {
+				this.$root.api('auth/accept', {
 					token: this.session.token
 				}).then(() => {
 					this.accepted();

src/client/app/boot.js

@@ -46,6 +46,7 @@
 	if (`${url.pathname}/`.startsWith('/docs/')) app = 'docs';
 	if (`${url.pathname}/`.startsWith('/dev/')) app = 'dev';
 	if (`${url.pathname}/`.startsWith('/auth/')) app = 'auth';
+	if (`${url.pathname}/`.startsWith('/admin/')) app = 'admin';
 	//#endregion
 
 	//#region Detect the user language

src/client/app/common/scripts/check-for-update.ts

@@ -1,8 +1,7 @@
-import MiOS from '../../mios';
-import { version as current } from '../../config';
+import { clientVersion as current } from '../../config';
 
-export default async function(mios: MiOS, force = false, silent = false) {
-	const meta = await mios.getMeta(force);
+export default async function($root: any, force = false, silent = false) {
+	const meta = await $root.getMeta(force);
 	const newer = meta.clientVersion;
 
 	if (newer != current) {
@@ -23,7 +22,7 @@ export default async function(mios: MiOS, force = false, silent = false) {
 		}
 
 		if (!silent) {
-			mios.apis.dialog({
+			$root.$dialog({
 				title: '%i18n:common.update-available-title%',
 				text: '%i18n:common.update-available%'.replace('{newer}', newer).replace('{current}', current)
 			});

src/client/app/common/scripts/fuck-ad-block.ts

@@ -1,10 +1,10 @@
 declare const fuckAdBlock: any;
 
-export default (os) => {
+export default ($root: any) => {
 	require('fuckadblock');
 
 	function adBlockDetected() {
-		os.apis.dialog({
+		$root.$dialog({
 			title: '%fa:exclamation-triangle%%i18n:common.adblock.detected%',
 			text: '%i18n:common.adblock.warning%',
 			actins: [{

src/client/app/common/scripts/note-mixin.ts

@@ -88,7 +88,7 @@ export default (opts: Opts = {}) => ({
 
 	methods: {
 		reply(viaKeyboard = false) {
-			(this as any).apis.post({
+			this.$root.$post({
 				reply: this.appearNote,
 				animation: !viaKeyboard,
 				cb: () => {
@@ -98,7 +98,7 @@ export default (opts: Opts = {}) => ({
 		},
 
 		renote(viaKeyboard = false) {
-			(this as any).apis.post({
+			this.$root.$post({
 				renote: this.appearNote,
 				animation: !viaKeyboard,
 				cb: () => {
@@ -115,7 +115,7 @@ export default (opts: Opts = {}) => ({
 
 		react(viaKeyboard = false) {
 			this.blur();
-			(this as any).os.new(MkReactionPicker, {
+			this.$root.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
 				note: this.appearNote,
 				showFocus: viaKeyboard,
@@ -126,28 +126,28 @@ export default (opts: Opts = {}) => ({
 		},
 
 		reactDirectly(reaction) {
-			(this as any).api('notes/reactions/create', {
+			(this.$root.api('notes/reactions/create', {
 				noteId: this.appearNote.id,
 				reaction: reaction
 			});
 		},
 
 		favorite() {
-			(this as any).api('notes/favorites/create', {
+			this.$root.api('notes/favorites/create', {
 				noteId: this.appearNote.id
 			}).then(() => {
-				(this as any).os.new(Ok);
+				this.$root.new(Ok);
 			});
 		},
 
 		del() {
-			(this as any).api('notes/delete', {
+			this.$root.api('notes/delete', {
 				noteId: this.appearNote.id
 			});
 		},
 
 		menu(viaKeyboard = false) {
-			(this as any).os.new(MkNoteMenu, {
+			this.$root.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
 				note: this.appearNote,
 				animation: !viaKeyboard,

src/client/app/common/scripts/note-subscriber.ts

@@ -26,7 +26,7 @@ export default prop => ({
 
 	created() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream;
+			this.connection = this.$root.stream;
 		}
 	},
 

src/client/app/common/views/components/api-settings.vue

@@ -1,31 +1,32 @@
 <template>
 <ui-card>
-	<div slot="title">%fa:key% API</div>
+	<div slot="title"><fa icon="key"/> API</div>
 
 	<section class="fit-top">
 		<ui-input :value="$store.state.i.token" readonly>
-			<span>%i18n:@token%</span>
+			<span>{{ $t('token') }}</span>
 		</ui-input>
-		<p>%i18n:@intro%</p>
-		<ui-info warn>%i18n:@caution%</ui-info>
-		<p>%i18n:@regeneration-of-token%</p>
-		<ui-button @click="regenerateToken">%fa:sync-alt% %i18n:@regenerate-token%</ui-button>
+		<p>{{ $t('intro') }}</p>
+		<ui-info warn>{{ $t('caution') }}</ui-info>
+		<p>{{ $t('regeneration-of-token') }}</p>
+		<ui-button @click="regenerateToken"><fa icon="sync-alt"/> {{ $t('regenerate-token') }}</ui-button>
 	</section>
 
 	<section>
-		<header>%fa:terminal% %i18n:@console.title%</header>
+		<header><fa icon="terminal"/> {{ $t('console.title') }}</header>
 		<ui-input v-model="endpoint">
-			<span>%i18n:@console.endpoint%</span>
+			<span>{{ $t('console.endpoint') }}</span>
 		</ui-input>
 		<ui-textarea v-model="body">
-			<span>%i18n:@console.parameter% (JSON or JSON5)</span>
+			<span>{{ $t('console.parameter') }} (JSON or JSON5)</span>
+			<span slot="desc">{{ $t('console.credential-info') }}</span>
 		</ui-textarea>
 		<ui-button @click="send" :disabled="sending">
-			<template v-if="sending">%i18n:@console.sending%</template>
-			<template v-else>%fa:paper-plane% %i18n:@console.send%</template>
+			<template v-if="sending">{{ $t('console.sending') }}</template>
+			<template v-else><fa icon="paper-plane"/> {{ $t('console.send') }}</template>
 		</ui-button>
 		<ui-textarea v-if="res" v-model="res" readonly tall>
-			<span>%i18n:@console.response%</span>
+			<span>{{ $t('console.response') }}</span>
 		</ui-textarea>
 	</section>
 </ui-card>
@@ -33,9 +34,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as JSON5 from 'json5';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/api-settings.vue'),
 	data() {
 		return {
 			endpoint: '',
@@ -47,11 +50,11 @@ export default Vue.extend({
 
 	methods: {
 		regenerateToken() {
-			(this as any).apis.input({
-				title: '%i18n:@enter-password%',
+			this.$input({
+				title: this.$t('enter-password'),
 				type: 'password'
 			}).then(password => {
-				(this as any).api('i/regenerate_token', {
+				this.$root.api('i/regenerate_token', {
 					password: password
 				});
 			});
@@ -59,7 +62,7 @@ export default Vue.extend({
 
 		send() {
 			this.sending = true;
-			(this as any).api(this.endpoint, JSON5.parse(this.body)).then(res => {
+			this.$root.api(this.endpoint, JSON5.parse(this.body)).then(res => {
 				this.sending = false;
 				this.res = JSON5.stringify(res, null, 2);
 			}, err => {

src/client/app/common/views/components/autocomplete.vue

@@ -14,10 +14,11 @@
 	</ol>
 	<ol class="emojis" ref="suggests" v-if="emojis.length > 0">
 		<li v-for="emoji in emojis" @click="complete(type, emoji.emoji)" @keydown="onKeydown" tabindex="-1">
-			<span class="emoji" v-if="emoji.url"><img :src="emoji.url" :alt="emoji.emoji"/></span>
+			<span class="emoji" v-if="emoji.isCustomEmoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
+			<span class="emoji" v-else-if="!useOsDefaultEmojis"><img :src="emoji.url" :alt="emoji.emoji"/></span>
 			<span class="emoji" v-else>{{ emoji.emoji }}</span>
 			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
-			<span class="alias" v-if="emoji.alias">({{ emoji.alias }})</span>
+			<span class="alias" v-if="emoji.aliasOf">({{ emoji.aliasOf }})</span>
 		</li>
 	</ol>
 </div>
@@ -28,14 +29,29 @@ import Vue from 'vue';
 import * as emojilib from 'emojilib';
 import contains from '../../../common/scripts/contains';
 
+type EmojiDef = {
+	emoji: string;
+	name: string;
+	aliasOf?: string;
+	url?: string;
+	isCustomEmoji?: boolean;
+};
+
 const lib = Object.entries(emojilib.lib).filter((x: any) => {
 	return x[1].category != 'flags';
 });
 
-const emjdb = lib.map((x: any) => ({
+const char2file = (char: string) => {
+	let codes = [...char].map(x => x.codePointAt(0).toString(16));
+	if (!codes.includes('200d')) codes = codes.filter(x => x != 'fe0f');
+	return codes.join('-');
+};
+
+const emjdb: EmojiDef[] = lib.map((x: any) => ({
 	emoji: x[1].char,
 	name: x[0],
-	alias: null
+	aliasOf: null,
+	url: `https://twemoji.maxcdn.com/2/svg/${char2file(x[1].char)}.svg`
 }));
 
 lib.forEach((x: any) => {
@@ -44,7 +60,8 @@ lib.forEach((x: any) => {
 			emjdb.push({
 				emoji: x[1].char,
 				name: k,
-				alias: x[0]
+				aliasOf: x[0],
+				url: `https://twemoji.maxcdn.com/2/svg/${char2file(x[1].char)}.svg`
 			});
 		});
 	}
@@ -62,13 +79,18 @@ export default Vue.extend({
 			hashtags: [],
 			emojis: [],
 			select: -1,
-			emojilib
+			emojilib,
+			emojiDb: [] as EmojiDef[]
 		}
 	},
 
 	computed: {
 		items(): HTMLCollection {
 			return (this.$refs.suggests as Element).children;
+		},
+
+		useOsDefaultEmojis(): boolean {
+			return this.$store.state.device.useOsDefaultEmojis;
 		}
 	},
 
@@ -91,6 +113,36 @@ export default Vue.extend({
 	},
 
 	mounted() {
+		//#region Construct Emoji DB
+		const customEmojis = (this.$root.getMetaSync() || { emojis: [] }).emojis || [];
+		const emojiDefinitions: EmojiDef[] = [];
+
+		customEmojis.forEach(x => {
+			emojiDefinitions.push({
+				name: x.name,
+				emoji: `:${x.name}:`,
+				url: x.url,
+				isCustomEmoji: true
+			});
+
+			if (x.aliases) {
+				x.aliases.forEach(alias => {
+					emojiDefinitions.push({
+						name: alias,
+						aliasOf: x.name,
+						emoji: `:${x.name}:`,
+						url: x.url,
+						isCustomEmoji: true
+					});
+				});
+			}
+		});
+
+		emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
+
+		this.emojiDb = emojiDefinitions.concat(emjdb);
+		//#endregion
+
 		this.textarea.addEventListener('keydown', this.onKeydown);
 
 		Array.from(document.querySelectorAll('body *')).forEach(el => {
@@ -133,7 +185,7 @@ export default Vue.extend({
 					this.users = users;
 					this.fetching = false;
 				} else {
-					(this as any).api('users/search', {
+					this.$root.api('users/search', {
 						query: this.q,
 						limit: 30
 					}).then(users => {
@@ -156,7 +208,7 @@ export default Vue.extend({
 						this.hashtags = hashtags;
 						this.fetching = false;
 					} else {
-						(this as any).api('hashtags/search', {
+						this.$root.api('hashtags/search', {
 							query: this.q,
 							limit: 30
 						}).then(hashtags => {
@@ -169,42 +221,31 @@ export default Vue.extend({
 					}
 				}
 			} else if (this.type == 'emoji') {
+				if (this.q == null || this.q == '') {
+					this.emojis = this.emojiDb.filter(x => x.isCustomEmoji && !x.aliasOf).sort((a, b) => {
+						var textA = a.name.toUpperCase();
+						var textB = b.name.toUpperCase();
+						return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
+					});
+					return;
+				}
+
 				const matched = [];
 				const max = 30;
 
-				const customEmojis = (this.os.getMetaSync() || { emojis: [] }).emojis;
-				customEmojis.some(x => {
-					if (x.name.startsWith(this.q)) matched.push({
-						name: x.name,
-						emoji: `:${x.name}:`,
-						url: x.url
-					});
-					return matched.length == max;
-				});
-				customEmojis.some(x => {
-					const alias = (x.aliases || []).find(a => a.startsWith(this.q));
-					if (alias) matched.push({
-						alias: x.name,
-						name: alias,
-						emoji: `:${x.name}:`,
-						url: x.url
-					});
-					return matched.length == max;
-				});
-
-				emjdb.some(x => {
-					if (x.name.indexOf(this.q) == 0 && !x.alias && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
+				this.emojiDb.some(x => {
+					if (x.name.startsWith(this.q) && !x.aliasOf && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
 					return matched.length == max;
 				});
 				if (matched.length < max) {
-					emjdb.some(x => {
-						if (x.name.indexOf(this.q) == 0 && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
+					this.emojiDb.some(x => {
+						if (x.name.startsWith(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
 						return matched.length == max;
 					});
 				}
 				if (matched.length < max) {
-					emjdb.some(x => {
-						if (x.name.indexOf(this.q) > -1 && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
+					this.emojiDb.some(x => {
+						if (x.name.includes(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
 						return matched.length == max;
 					});
 				}

src/client/app/common/views/components/avatar.vue

@@ -15,6 +15,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+
 export default Vue.extend({
 	props: {
 		user: {

src/client/app/common/views/components/connect-failed.troubleshooter.vue

@@ -1,47 +1,49 @@
 <template>
 <div class="troubleshooter">
 	<div class="body">
-		<h1>%fa:wrench%%i18n:@title%</h1>
+		<h1><fa icon="wrench"/>{{ $t('title') }}</h1>
 		<div>
 			<p :data-wip="network == null">
 				<template v-if="network != null">
-					<template v-if="network">%fa:check%</template>
-					<template v-if="!network">%fa:times%</template>
+					<template v-if="network"><fa icon="check"/></template>
+					<template v-if="!network"><fa icon="times"/></template>
 				</template>
-				{{ network == null ? '%i18n:@checking-network%' : '%i18n:@network%' }}<mk-ellipsis v-if="network == null"/>
+				{{ network == null ? this.$t('checking-network') : this.$t('network') }}<mk-ellipsis v-if="network == null"/>
 			</p>
 			<p v-if="network == true" :data-wip="internet == null">
 				<template v-if="internet != null">
-					<template v-if="internet">%fa:check%</template>
-					<template v-if="!internet">%fa:times%</template>
+					<template v-if="internet"><fa icon="check"/></template>
+					<template v-if="!internet"><fa icon="times"/></template>
 				</template>
-				{{ internet == null ? '%i18n:@checking-internet%' : '%i18n:@internet%' }}<mk-ellipsis v-if="internet == null"/>
+				{{ internet == null ? this.$t('checking-internet') : this.$t('internet') }}<mk-ellipsis v-if="internet == null"/>
 			</p>
 			<p v-if="internet == true" :data-wip="server == null">
 				<template v-if="server != null">
-					<template v-if="server">%fa:check%</template>
-					<template v-if="!server">%fa:times%</template>
+					<template v-if="server"><fa icon="check"/></template>
+					<template v-if="!server"><fa icon="times"/></template>
 				</template>
-				{{ server == null ? '%i18n:@checking-server%' : '%i18n:@server%' }}<mk-ellipsis v-if="server == null"/>
+				{{ server == null ? this.$t('checking-server') : this.$t('server') }}<mk-ellipsis v-if="server == null"/>
 			</p>
 		</div>
-		<p v-if="!end">%i18n:@finding%<mk-ellipsis/></p>
-		<p v-if="network === false"><b>%fa:exclamation-triangle%%i18n:@no-network%</b><br>%i18n:@no-network-desc%</p>
-		<p v-if="internet === false"><b>%fa:exclamation-triangle%%i18n:@no-internet%</b><br>%i18n:@no-internet-desc%</p>
-		<p v-if="server === false"><b>%fa:exclamation-triangle%%i18n:@no-server%</b><br>%i18n:@no-server-desc%</p>
-		<p v-if="server === true" class="success"><b>%fa:info-circle%%i18n:@success%</b><br>%i18n:@success-desc%</p>
+		<p v-if="!end">{{ $t('finding') }}<mk-ellipsis/></p>
+		<p v-if="network === false"><b><fa icon="exclamation-triangle"/>{{ $t('no-network') }}</b><br>{{ $t('no-network-desc') }}</p>
+		<p v-if="internet === false"><b><fa icon="exclamation-triangle"/>{{ $t('no-internet') }}</b><br>{{ $t('no-internet-desc') }}</p>
+		<p v-if="server === false"><b><fa icon="exclamation-triangle"/>{{ $t('no-server') }}</b><br>{{ $t('no-server-desc') }}</p>
+		<p v-if="server === true" class="success"><b><fa icon="info-circle"/>{{ $t('success') }}</b><br>{{ $t('success-desc') }}</p>
 	</div>
 	<footer>
-		<a href="/assets/flush.html">%i18n:@flush%</a> | <a href="/assets/version.html">%i18n:@set-version%</a>
+		<a href="/assets/flush.html">{{ $t('flush') }}</a> | <a href="/assets/version.html">{{ $t('set-version') }}</a>
 	</footer>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { apiUrl } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/connect-failed.troubleshooter.vue'),
 	data() {
 		return {
 			network: navigator.onLine,
@@ -100,7 +102,7 @@ export default Vue.extend({
 			color #444
 			border-bottom solid 1px #eee
 
-			> [data-fa]
+			> [data-icon]
 				margin-right 0.25em
 
 		> div
@@ -115,7 +117,7 @@ export default Vue.extend({
 				&[data-wip]
 					color #888
 
-				> [data-fa]
+				> [data-icon]
 					margin-right 0.25em
 
 					&.times
@@ -132,7 +134,7 @@ export default Vue.extend({
 			border-top solid 1px #eee
 
 			> b
-				> [data-fa]
+				> [data-icon]
 					margin-right 0.25em
 
 			&.success

src/client/app/common/views/components/connect-failed.vue

@@ -1,23 +1,25 @@
 <template>
 <div class="mk-connect-failed">
-	<img src="data:image/jpeg;base64,%base64:/assets/error.jpg%" alt=""/>
-	<h1>%i18n:@title%</h1>
+	<img src="https://raw.githubusercontent.com/syuilo/misskey/develop/src/client/assets/error.jpg" alt=""/>
+	<h1>{{ $t('title') }}</h1>
 	<p class="text">
-		<span>{{ '%i18n:@description%'.substr(0, '%i18n:@description%'.indexOf('{')) }}</span>
-		<a @click="reload">{{ '%i18n:@description%'.match(/\{(.+?)\}/)[1] }}</a>
-		<span>{{ '%i18n:@description%'.substr('%i18n:@description%'.indexOf('}') + 1) }}</span>
+		<span>{{ this.$t('description').substr(0, this.$t('description').indexOf('{')) }}</span>
+		<a @click="reload">{{ this.$t('description').match(/\{(.+?)\}/)[1] }}</a>
+		<span>{{ this.$t('description').substr(this.$t('description').indexOf('}') + 1) }}</span>
 	</p>
-	<button v-if="!troubleshooting" @click="troubleshooting = true">%i18n:@troubleshoot%</button>
+	<button v-if="!troubleshooting" @click="troubleshooting = true">{{ $t('troubleshoot') }}</button>
 	<x-troubleshooter v-if="troubleshooting"/>
-	<p class="thanks">%i18n:@thanks%</p>
+	<p class="thanks">{{ $t('thanks') }}</p>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import XTroubleshooter from './connect-failed.troubleshooter.vue';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/connect-failed.vue'),
 	components: {
 		XTroubleshooter
 	},

src/client/app/common/views/components/cw-button.vue

@@ -1,11 +1,13 @@
 <template>
-<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">{{ value ? '%i18n:@hide%' : '%i18n:@show%' }}</button>
+<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">{{ value ? this.$t('hide') : this.$t('show') }}</button>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/cw-button.vue'),
 	props: {
 		value: {
 			type: Boolean,

src/client/app/common/views/components/drive-settings.vue

@@ -1,25 +1,27 @@
 <template>
 <ui-card>
-	<div slot="title">%fa:cloud% %i18n:common.drive%</div>
+	<div slot="title"><fa icon="cloud"/> {{ $t('@.drive') }}</div>
 
 	<section v-if="!fetching" class="juakhbxthdewydyreaphkepoxgxvfogn">
 		<div class="meter"><div :style="meterStyle"></div></div>
-		<p>%i18n:@max%: <b>{{ capacity | bytes }}</b> %i18n:@in-use%: <b>{{ usage | bytes }}</b></p>
+		<p>{{ $t('max') }}: <b>{{ capacity | bytes }}</b> {{ $t('in-use') }}: <b>{{ usage | bytes }}</b></p>
 	</section>
 
 	<section>
-		<header>%i18n:@stats%</header>
-		<div ref="chart" style="margin-bottom: -16px; color: #000;"></div>
+		<header>{{ $t('stats') }}</header>
+		<div ref="chart" style="margin-bottom: -16px; margin-left: -8px; color: #000;"></div>
 	</section>
 </ui-card>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as tinycolor from 'tinycolor2';
 import * as ApexCharts from 'apexcharts';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/drive-settings.vue'),
 	data() {
 		return {
 			fetching: true,
@@ -42,7 +44,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		(this as any).api('drive').then(info => {
+		this.$root.api('drive').then(info => {
 			this.capacity = info.capacity;
 			this.usage = info.usage;
 			this.fetching = false;
@@ -55,7 +57,7 @@ export default Vue.extend({
 
 	methods: {
 		renderChart() {
-			(this as any).api('charts/user/drive', {
+			this.$root.api('charts/user/drive', {
 				userId: this.$store.state.i.id,
 				span: 'day',
 				limit: 21

src/client/app/common/views/components/emoji.vue

@@ -0,0 +1,85 @@
+<template>
+<img v-if="customEmoji" class="fvgwvorwhxigeolkkrcderjzcawqrscl custom" :src="url" :alt="alt" :title="alt"/>
+<img v-else-if="char && !useOsDefaultEmojis" class="fvgwvorwhxigeolkkrcderjzcawqrscl" :src="url" :alt="alt" :title="alt"/>
+<span v-else-if="char && useOsDefaultEmojis">{{ char }}</span>
+<span v-else>:{{ name }}:</span>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { lib } from 'emojilib';
+
+export default Vue.extend({
+	props: {
+		name: {
+			type: String,
+			required: false
+		},
+		emoji: {
+			type: String,
+			required: false
+		},
+		customEmojis: {
+			required: false,
+			default: []
+		}
+	},
+
+	data() {
+		return {
+			url: null,
+			char: null,
+			customEmoji: null
+		}
+	},
+
+	computed: {
+		alt(): string {
+			return this.customEmoji ? `:${this.customEmoji.name}:` : this.char;
+		},
+
+		useOsDefaultEmojis(): boolean {
+			return this.$store.state.device.useOsDefaultEmojis;
+		}
+	},
+
+	created() {
+		if (this.name) {
+			const customEmoji = this.customEmojis.find(x => x.name == this.name);
+			if (customEmoji) {
+				this.customEmoji = customEmoji;
+				this.url = customEmoji.url;
+			} else {
+				const emoji = lib[this.name];
+				if (emoji) {
+					this.char = emoji.char;
+				}
+			}
+		} else {
+			this.char = this.emoji;
+		}
+
+		if (this.char) {
+			let codes = [...this.char].map(x => x.codePointAt(0).toString(16));
+			if (!codes.includes('200d')) codes = codes.filter(x => x != 'fe0f');
+
+			this.url = `https://twemoji.maxcdn.com/2/svg/${codes.join('-')}.svg`;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.fvgwvorwhxigeolkkrcderjzcawqrscl
+	height 1.25em
+	vertical-align -0.25em
+
+	&.custom
+		height 2.5em
+		vertical-align middle
+		transition transform 0.2s ease
+
+		&:hover
+			transform scale(1.2)
+
+</style>

src/client/app/common/views/components/error.vue

@@ -1,10 +1,19 @@
 <template>
 <div class="wjqjnyhzogztorhrdgcpqlkxhkmuetgj">
-	<p>%fa:exclamation-triangle% %i18n:common.error.title%</p>
-	<ui-button @click="() => $emit('retry')">%i18n:common.error.retry%</ui-button>
+	<p><fa icon="exclamation-triangle"/> {{ $t('@.error.title') }}</p>
+	<ui-button @click="() => $emit('retry')">{{ $t('@.error.retry') }}</ui-button>
 </div>
 </template>
 
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+
+export default Vue.extend({
+	i18n: i18n()
+});
+</script>
+
 <style lang="stylus" scoped>
 .wjqjnyhzogztorhrdgcpqlkxhkmuetgj
 	max-width 350px

src/client/app/common/views/components/file-type-icon.vue

@@ -1,6 +1,6 @@
 <template>
 <span class="mk-file-type-icon">
-	<template v-if="kind == 'image'">%fa:file-image%</template>
+	<template v-if="kind == 'image'"><fa icon="file-image"/></template>
 </span>
 </template>
 

src/client/app/common/views/components/forkit.vue

@@ -1,5 +1,5 @@
 <template>
-<a class="a" href="https://github.com/syuilo/misskey" target="_blank" title="View source on Github">
+<a class="a" href="https://github.com/syuilo/misskey" target="_blank" title="View source on GitHub">
 	<svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="aria-hidden">
 		<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 		<path class="octo-arm" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor"></path>

src/client/app/common/views/components/games/reversi/reversi.game.vue

@@ -1,19 +1,19 @@
 <template>
 <div class="xqnhankfuuilcwvhgsopeqncafzsquya">
-	<button class="go-index" v-if="selfNav" @click="goIndex">%fa:arrow-left%</button>
-	<header><b><router-link :to="blackUser | userPage">{{ blackUser | userName }}</router-link></b>(%i18n:common.reversi.black%) vs <b><router-link :to="whiteUser | userPage">{{ whiteUser | userName }}</router-link></b>(%i18n:common.reversi.white%)</header>
+	<button class="go-index" v-if="selfNav" @click="goIndex"><fa icon="arrow-left"/></button>
+	<header><b><router-link :to="blackUser | userPage">{{ blackUser | userName }}</router-link></b>({{ $t('@.reversi.black') }}) vs <b><router-link :to="whiteUser | userPage">{{ whiteUser | userName }}</router-link></b>({{ $t('@.reversi.white') }})</header>
 
 	<div style="overflow: hidden; line-height: 28px;">
-		<p class="turn" v-if="!iAmPlayer && !game.isEnded">{{ '%i18n:common.reversi.turn-of%'.replace('{}', $options.filters.userName(turnUser)) }}<mk-ellipsis/></p>
-		<p class="turn" v-if="logPos != logs.length">{{ '%i18n:common.reversi.past-turn-of%'.replace('{}', $options.filters.userName(turnUser)) }}</p>
-		<p class="turn1" v-if="iAmPlayer && !game.isEnded && !isMyTurn">%i18n:common.reversi.opponent-turn%<mk-ellipsis/></p>
-		<p class="turn2" v-if="iAmPlayer && !game.isEnded && isMyTurn" v-animate-css="{ classes: 'tada', iteration: 'infinite' }">%i18n:common.reversi.my-turn%</p>
+		<p class="turn" v-if="!iAmPlayer && !game.isEnded">{{ $t('@.reversi.turn-of', { name: $options.filters.userName(turnUser) }) }}<mk-ellipsis/></p>
+		<p class="turn" v-if="logPos != logs.length">{{ $t('@.reversi.past-turn-of', { name: $options.filters.userName(turnUser) }) }}</p>
+		<p class="turn1" v-if="iAmPlayer && !game.isEnded && !isMyTurn">{{ $t('@.reversi.opponent-turn') }}<mk-ellipsis/></p>
+		<p class="turn2" v-if="iAmPlayer && !game.isEnded && isMyTurn" v-animate-css="{ classes: 'tada', iteration: 'infinite' }">{{ $t('@.reversi.my-turn') }}</p>
 		<p class="result" v-if="game.isEnded && logPos == logs.length">
 			<template v-if="game.winner">
-				<span>{{ '%i18n:common.reversi.won%'.replace('{}', $options.filters.userName(game.winner)) }}</span>
-				<span v-if="game.surrendered != null"> (%i18n:@surrendered%)</span>
+				<span>{{ $t('@.reversi.won', { name: $options.filters.userName(game.winner) }) }}</span>
+				<span v-if="game.surrendered != null"> ({{ $t('surrendered') }})</span>
 			</template>
-			<template v-else>%i18n:common.reversi.drawn%</template>
+			<template v-else>{{ $t('@.reversi.drawn') }}</template>
 		</p>
 	</div>
 
@@ -43,39 +43,41 @@
 		</div>
 	</div>
 
-	<p class="status"><b>{{ '%i18n:common.reversi.this-turn%'.split('{}')[0] }}{{ logPos }}{{ '%i18n:common.reversi.this-turn%'.split('{}')[1] }}</b> %i18n:common.reversi.black%:{{ o.blackCount }} %i18n:common.reversi.white%:{{ o.whiteCount }} %i18n:common.reversi.total%:{{ o.blackCount + o.whiteCount }}</p>
+	<p class="status"><b>{{ $t('@.reversi.this-turn', { count: logPos }) }}</b> {{ $t('@.reversi.black') }}:{{ o.blackCount }} {{ $t('@.reversi.white') }}:{{ o.whiteCount }} {{ $t('@.reversi.total') }}:{{ o.blackCount + o.whiteCount }}</p>
 
 	<div class="actions" v-if="!game.isEnded && iAmPlayer">
-		<form-button @click="surrender">%i18n:@surrender%</form-button>
+		<form-button @click="surrender">{{ $t('surrender') }}</form-button>
 	</div>
 
 	<div class="player" v-if="game.isEnded">
 		<div>
-			<button @click="logPos = 0" :disabled="logPos == 0">%fa:angle-double-left%</button>
-			<button @click="logPos--" :disabled="logPos == 0">%fa:angle-left%</button>
+			<button @click="logPos = 0" :disabled="logPos == 0"><fa icon="angle-double-left"/></button>
+			<button @click="logPos--" :disabled="logPos == 0"><fa icon="angle-left"/></button>
 		</div>
 		<span>{{ logPos }} / {{ logs.length }}</span>
 		<div>
-			<button @click="logPos++" :disabled="logPos == logs.length">%fa:angle-right%</button>
-			<button @click="logPos = logs.length" :disabled="logPos == logs.length">%fa:angle-double-right%</button>
+			<button @click="logPos++" :disabled="logPos == logs.length"><fa icon="angle-right"/></button>
+			<button @click="logPos = logs.length" :disabled="logPos == logs.length"><fa icon="angle-double-right"/></button>
 		</div>
 	</div>
 
 	<div class="info">
-		<p v-if="game.settings.isLlotheo">%i18n:@is-llotheo%</p>
-		<p v-if="game.settings.loopedBoard">%i18n:@looped-map%</p>
-		<p v-if="game.settings.canPutEverywhere">%i18n:@can-put-everywhere%</p>
+		<p v-if="game.settings.isLlotheo">{{ $t('is-llotheo') }}</p>
+		<p v-if="game.settings.loopedBoard">{{ $t('looped-map') }}</p>
+		<p v-if="game.settings.canPutEverywhere">{{ $t('can-put-everywhere') }}</p>
 	</div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../../i18n';
 import * as CRC32 from 'crc-32';
 import Reversi, { Color } from '../../../../../../../games/reversi/core';
 import { url } from '../../../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/games/reversi/reversi.game.vue'),
 	props: {
 		initGame: {
 			type: Object,
@@ -289,7 +291,7 @@ export default Vue.extend({
 		},
 
 		surrender() {
-			(this as any).api('games/reversi/games/surrender', {
+			this.$root.api('games/reversi/games/surrender', {
 				gameId: this.game.id
 			});
 		},

src/client/app/common/views/components/games/reversi/reversi.gameroom.vue

@@ -7,10 +7,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../../i18n';
 import XGame from './reversi.game.vue';
 import XRoom from './reversi.room.vue';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/games/reversi/reversi.gameroom.vue'),
 	components: {
 		XGame,
 		XRoom
@@ -33,7 +35,7 @@ export default Vue.extend({
 	},
 	created() {
 		this.g = this.game;
-		this.connection = (this as any).os.stream.connectToChannel('gamesReversiGame', {
+		this.connection = this.$root.stream.connectToChannel('gamesReversiGame', {
 			gameId: this.game.id
 		});
 		this.connection.on('started', this.onStarted);

src/client/app/common/views/components/games/reversi/reversi.index.vue

@@ -1,22 +1,22 @@
 <template>
 <div class="phgnkghfpyvkrvwiajkiuoxyrdaqpzcx">
-	<h1>%i18n:@title%</h1>
-	<p>%i18n:@sub-title%</p>
+	<h1>{{ $t('title') }}</h1>
+	<p>{{ $t('sub-title') }}</p>
 	<div class="play">
-		<form-button primary round @click="match">%i18n:@invite%</form-button>
+		<form-button primary round @click="match">{{ $t('invite') }}</form-button>
 		<details>
-			<summary>%i18n:@rule%</summary>
+			<summary>{{ $t('rule') }}</summary>
 			<div>
-				<p>%i18n:@rule-desc%</p>
+				<p>{{ $t('rule-desc') }}</p>
 				<dl>
-					<dt><b>%i18n:@mode-invite%</b></dt>
-					<dd>%i18n:@mode-invite-desc%</dd>
+					<dt><b>{{ $t('mode-invite') }}</b></dt>
+					<dd>{{ $t('mode-invite-desc') }}</dd>
 				</dl>
 			</div>
 		</details>
 	</div>
 	<section v-if="invitations.length > 0">
-		<h2>%i18n:@invitations%</h2>
+		<h2>{{ $t('invitations') }}</h2>
 		<div class="invitation" v-for="i in invitations" tabindex="-1" @click="accept(i)">
 			<mk-avatar class="avatar" :user="i.parent"/>
 			<span class="name"><b>{{ i.parent | userName }}</b></span>
@@ -25,22 +25,22 @@
 		</div>
 	</section>
 	<section v-if="myGames.length > 0">
-		<h2>%i18n:@my-games%</h2>
+		<h2>{{ $t('my-games') }}</h2>
 		<a class="game" v-for="g in myGames" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
 			<mk-avatar class="avatar" :user="g.user1"/>
 			<mk-avatar class="avatar" :user="g.user2"/>
 			<span><b>{{ g.user1 | userName }}</b> vs <b>{{ g.user2 | userName }}</b></span>
-			<span class="state">{{ g.isEnded ? '%i18n:@game-state.ended%' : '%i18n:@game-state.playing%' }}</span>
+			<span class="state">{{ g.isEnded ? $t('game-state.ended') : $t('game-state.playing') }}</span>
 			<mk-time :time="g.createdAt" />
 		</a>
 	</section>
 	<section v-if="games.length > 0">
-		<h2>%i18n:@all-games%</h2>
+		<h2>{{ $t('all-games') }}</h2>
 		<a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
 			<mk-avatar class="avatar" :user="g.user1"/>
 			<mk-avatar class="avatar" :user="g.user2"/>
 			<span><b>{{ g.user1 | userName }}</b> vs <b>{{ g.user2 | userName }}</b></span>
-			<span class="state">{{ g.isEnded ? '%i18n:@game-state.ended%' : '%i18n:@game-state.playing%' }}</span>
+			<span class="state">{{ g.isEnded ? $t('game-state.ended') : $t('game-state.playing') }}</span>
 			<mk-time :time="g.createdAt" />
 		</a>
 	</section>
@@ -49,8 +49,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/games/reversi/reversi.index.vue'),
 	data() {
 		return {
 			games: [],
@@ -65,22 +67,22 @@ export default Vue.extend({
 
 	mounted() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream.useSharedConnection('gamesReversi');
+			this.connection = this.$root.stream.useSharedConnection('gamesReversi');
 
 			this.connection.on('invited', this.onInvited);
 
-			(this as any).api('games/reversi/games', {
+			this.$root.api('games/reversi/games', {
 				my: true
 			}).then(games => {
 				this.myGames = games;
 			});
 
-			(this as any).api('games/reversi/invitations').then(invitations => {
+			this.$root.api('games/reversi/invitations').then(invitations => {
 				this.invitations = this.invitations.concat(invitations);
 			});
 		}
 
-		(this as any).api('games/reversi/games').then(games => {
+		this.$root.api('games/reversi/games').then(games => {
 			this.games = games;
 			this.gamesFetching = false;
 		});
@@ -98,13 +100,13 @@ export default Vue.extend({
 		},
 
 		match() {
-			(this as any).apis.input({
-				title: '%i18n:@enter-username%'
+			this.$input({
+				title: this.$t('enter-username')
 			}).then(username => {
-				(this as any).api('users/show', {
+				this.$root.api('users/show', {
 					username
 				}).then(user => {
-					(this as any).api('games/reversi/match', {
+					this.$root.api('games/reversi/match', {
 						userId: user.id
 					}).then(res => {
 						if (res == null) {
@@ -118,7 +120,7 @@ export default Vue.extend({
 		},
 
 		accept(invitation) {
-			(this as any).api('games/reversi/match', {
+			this.$root.api('games/reversi/match', {
 				userId: invitation.parent.id
 			}).then(game => {
 				if (game) {

src/client/app/common/views/components/games/reversi/reversi.room.vue

@@ -3,13 +3,13 @@
 	<header><b>{{ game.user1 | userName }}</b> vs <b>{{ game.user2 | userName }}</b></header>
 
 	<div>
-		<p>%i18n:@settings-of-the-game%</p>
+		<p>{{ $t('settings-of-the-game') }}</p>
 
 		<div class="card map">
 			<header>
-				<select v-model="mapName" placeholder="%i18n:@choose-map%" @change="onMapChange">
+				<select v-model="mapName" :placeholder="$t('choose-map')" @change="onMapChange">
 					<option label="-Custom-" :value="mapName" v-if="mapName == '-Custom-'"/>
-					<option label="%i18n:@random%" :value="null"/>
+					<option :label="$t('random')" :value="null"/>
 					<optgroup v-for="c in mapCategories" :key="c" :label="c">
 						<option v-for="m in maps" v-if="m.category == c" :key="m.name" :label="m.name" :value="m.name">{{ m.name }}</option>
 					</optgroup>
@@ -17,13 +17,13 @@
 			</header>
 
 			<div>
-				<div class="random" v-if="game.settings.map == null">%fa:dice%</div>
+				<div class="random" v-if="game.settings.map == null"><fa icon="dice"/></div>
 				<div class="board" v-else :style="{ 'grid-template-rows': `repeat(${ game.settings.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.settings.map[0].length }, 1fr)` }">
 					<div v-for="(x, i) in game.settings.map.join('')"
 							:data-none="x == ' '"
 							@click="onPixelClick(i, x)">
-						<template v-if="x == 'b'"><template v-if="$store.state.device.darkmode">%fa:circle R%</template><template v-else>%fa:circle%</template></template>
-						<template v-if="x == 'w'"><template v-if="$store.state.device.darkmode">%fa:circle%</template><template v-else>%fa:circle R%</template></template>
+						<template v-if="x == 'b'"><template v-if="$store.state.device.darkmode"><fa :icon="['far', 'circle']"/></template><template v-else><fa icon="circle"/></template></template>
+						<template v-if="x == 'w'"><template v-if="$store.state.device.darkmode"><fa :icon="['far', 'circle']"/></template><template v-else><fa icon="circle"/></template></template>
 					</div>
 				</div>
 			</div>
@@ -31,31 +31,31 @@
 
 		<div class="card">
 			<header>
-				<span>%i18n:@black-or-white%</span>
+				<span>{{ $t('black-or-white') }}</span>
 			</header>
 
 			<div>
-				<form-radio v-model="game.settings.bw" value="random" @change="updateSettings">%i18n:@random%</form-radio>
-				<form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}<b>{{ game.user1 | userName }}</b>{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
-				<form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}<b>{{ game.user2 | userName }}</b>{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
+				<form-radio v-model="game.settings.bw" value="random" @change="updateSettings">{{ $t('random') }}</form-radio>
+				<form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ this.$t('black-is').split('{}')[0] }}<b>{{ game.user1 | userName }}</b>{{ this.$t('black-is').split('{}')[1] }}</form-radio>
+				<form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ this.$t('black-is').split('{}')[0] }}<b>{{ game.user2 | userName }}</b>{{ this.$t('black-is').split('{}')[1] }}</form-radio>
 			</div>
 		</div>
 
 		<div class="card">
 			<header>
-				<span>%i18n:@rules%</span>
+				<span>{{ $t('rules') }}</span>
 			</header>
 
 			<div>
-				<ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">%i18n:@is-llotheo%</ui-switch>
-				<ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">%i18n:@looped-map%</ui-switch>
-				<ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">%i18n:@can-put-everywhere%</ui-switch>
+				<ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">{{ $t('is-llotheo') }}</ui-switch>
+				<ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">{{ $t('looped-map') }}</ui-switch>
+				<ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">{{ $t('can-put-everywhere') }}</ui-switch>
 			</div>
 		</div>
 
 		<div class="card form" v-if="form">
 			<header>
-				<span>%i18n:@settings-of-the-bot%</span>
+				<span>{{ $t('settings-of-the-bot') }}</span>
 			</header>
 
 			<div>
@@ -98,16 +98,16 @@
 
 	<footer>
 		<p class="status">
-			<template v-if="isAccepted && isOpAccepted">%i18n:@this-game-is-started-soon%<mk-ellipsis/></template>
-			<template v-if="isAccepted && !isOpAccepted">%i18n:@waiting-for-other%<mk-ellipsis/></template>
-			<template v-if="!isAccepted && isOpAccepted">%i18n:@waiting-for-me%</template>
-			<template v-if="!isAccepted && !isOpAccepted">%i18n:@waiting-for-both%<mk-ellipsis/></template>
+			<template v-if="isAccepted && isOpAccepted">{{ $t('this-game-is-started-soon') }}<mk-ellipsis/></template>
+			<template v-if="isAccepted && !isOpAccepted">{{ $t('waiting-for-other') }}<mk-ellipsis/></template>
+			<template v-if="!isAccepted && isOpAccepted">{{ $t('waiting-for-me') }}</template>
+			<template v-if="!isAccepted && !isOpAccepted">{{ $t('waiting-for-both') }}<mk-ellipsis/></template>
 		</p>
 
 		<div class="actions">
-			<form-button @click="exit">%i18n:@cancel%</form-button>
-			<form-button primary @click="accept" v-if="!isAccepted">%i18n:@ready%</form-button>
-			<form-button primary @click="cancel" v-if="isAccepted">%i18n:@cancel-ready%</form-button>
+			<form-button @click="exit">{{ $t('cancel') }}</form-button>
+			<form-button primary @click="accept" v-if="!isAccepted">{{ $t('ready') }}</form-button>
+			<form-button primary @click="cancel" v-if="isAccepted">{{ $t('cancel-ready') }}</form-button>
 		</div>
 	</footer>
 </div>
@@ -115,9 +115,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../../i18n';
 import * as maps from '../../../../../../../games/reversi/maps';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/games/reversi/reversi.room.vue'),
 	props: ['game', 'connection'],
 
 	data() {

src/client/app/common/views/components/games/reversi/reversi.vue

@@ -4,9 +4,9 @@
 		<x-gameroom :game="game" :self-nav="selfNav" @go-index="goIndex"/>
 	</div>
 	<div class="matching" v-else-if="matching">
-		<h1>{{ '%i18n:@matching.waiting-for%'.split('{}')[0] }}<b>{{ matching | userName }}</b>{{ '%i18n:@matching.waiting-for%'.split('{}')[1] }}<mk-ellipsis/></h1>
+		<h1>{{ this.$t('matching.waiting-for').split('{}')[0] }}<b>{{ matching | userName }}</b>{{ this.$t('matching.waiting-for').split('{}')[1] }}<mk-ellipsis/></h1>
 		<div class="cancel">
-			<form-button round @click="cancel">%i18n:@matching.cancel%</form-button>
+			<form-button round @click="cancel">{{ $t('matching.cancel') }}</form-button>
 		</div>
 	</div>
 	<div v-else-if="gameId">
@@ -20,11 +20,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../../../i18n';
 import XGameroom from './reversi.gameroom.vue';
 import XIndex from './reversi.index.vue';
 import Progress from '../../../../scripts/loading';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/games/reversi/reversi.vue'),
 	components: {
 		XGameroom,
 		XIndex
@@ -65,7 +67,7 @@ export default Vue.extend({
 		this.fetch();
 
 		if (this.$store.getters.isSignedIn) {
-			this.connection = (this as any).os.stream.useSharedConnection('gamesReversi');
+			this.connection = this.$root.stream.useSharedConnection('gamesReversi');
 
 			this.connection.on('matched', this.onMatched);
 
@@ -92,7 +94,7 @@ export default Vue.extend({
 				this.game = null;
 			} else {
 				Progress.start();
-				(this as any).api('games/reversi/games/show', {
+				this.$root.api('games/reversi/games/show', {
 					gameId: this.gameId
 				}).then(game => {
 					this.game = game;
@@ -105,7 +107,7 @@ export default Vue.extend({
 			if (this.selfNav) {
 				// 受け取ったゲーム情報が省略されたものなら完全な情報を取得する
 				if (game != null && (game.settings == null || game.settings.map == null)) {
-					game = await (this as any).api('games/reversi/games/show', {
+					game = await this.$root.api('games/reversi/games/show', {
 						gameId: game.id
 					});
 				}
@@ -122,11 +124,11 @@ export default Vue.extend({
 
 		cancel() {
 			this.matching = null;
-			(this as any).api('games/reversi/match/cancel');
+			this.$root.api('games/reversi/match/cancel');
 		},
 
 		accept(invitation) {
-			(this as any).api('games/reversi/match', {
+			this.$root.api('games/reversi/match', {
 				userId: invitation.parent.id
 			}).then(game => {
 				if (game) {

src/client/app/common/views/components/github-setting.vue

@@ -0,0 +1,65 @@
+<template>
+<div class="mk-github-setting">
+	<p>{{ $t('description') }}<a :href="`${docsUrl}/link-to-github`" target="_blank">{{ $t('detail') }}</a></p>
+	<p class="account" v-if="$store.state.i.github" :title="`GitHub ID: ${$store.state.i.github.id}`">{{ $t('connected-to') }}: <a :href="`https://github.com/${$store.state.i.github.login}`" target="_blank">@{{ $store.state.i.github.login }}</a></p>
+	<p>
+		<a :href="`${apiUrl}/connect/github`" target="_blank" @click.prevent="connect">{{ $store.state.i.github ? this.$t('reconnect') : this.$t('connect') }}</a>
+		<span v-if="$store.state.i.github"> or </span>
+		<a :href="`${apiUrl}/disconnect/github`" target="_blank" v-if="$store.state.i.github" @click.prevent="disconnect">{{ $t('disconnect') }}</a>
+	</p>
+	<p class="id" v-if="$store.state.i.github">GitHub ID: {{ $store.state.i.github.id }}</p>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../i18n';
+import { apiUrl, docsUrl } from '../../../config';
+
+export default Vue.extend({
+	i18n: i18n('common/views/components/github-setting.vue'),
+	data() {
+		return {
+			form: null,
+			apiUrl,
+			docsUrl
+		};
+	},
+	mounted() {
+		this.$watch('$store.state.i', () => {
+			if (this.$store.state.i.github && this.form)
+				this.form.close();
+		}, {
+			deep: true
+		});
+	},
+	methods: {
+		connect() {
+			this.form = window.open(apiUrl + '/connect/github',
+				'github_connect_window',
+				'height=570, width=520');
+		},
+
+		disconnect() {
+			window.open(apiUrl + '/disconnect/github',
+				'github_disconnect_window',
+				'height=570, width=520');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-github-setting
+	.account
+		border solid 1px #e1e8ed
+		border-radius 4px
+		padding 16px
+
+		a
+			font-weight bold
+			color inherit
+
+	.id
+		color #8899a6
+</style>

src/client/app/common/views/components/google.vue

@@ -1,13 +1,16 @@
 <template>
 <div class="mk-google">
 	<input type="search" v-model="query" :placeholder="q">
-	<button @click="search">%fa:search% %i18n:common.search%</button>
+	<button @click="search"><fa icon="search"/> {{ $t('@.search') }}</button>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
+
 export default Vue.extend({
+	i18n: i18n(),
 	props: ['q'],
 	data() {
 		return {

src/client/app/common/views/components/image-viewer.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="mk-media-image-dialog">
+<div class="dkjvrdxtkvqrwmhfickhndpmnncsgacq">
 	<div class="bg" @click="close"></div>
 	<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
 </div>
@@ -34,7 +34,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-media-image-dialog
+.dkjvrdxtkvqrwmhfickhndpmnncsgacq
 	display block
 	position fixed
 	z-index 2048

src/client/app/common/views/components/index.ts

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import muteAndBlock from './mute-and-block.vue';
 import error from './error.vue';
 import apiSettings from './api-settings.vue';
+import passwordSettings from './password-settings.vue';
 import driveSettings from './drive-settings.vue';
 import profileEditor from './profile-editor.vue';
 import noteSkeleton from './note-skeleton.vue';
@@ -29,18 +30,19 @@ import time from './time.vue';
 import timer from './timer.vue';
 import mediaList from './media-list.vue';
 import uploader from './uploader.vue';
-import specialMessage from './special-message.vue';
 import streamIndicator from './stream-indicator.vue';
 import ellipsis from './ellipsis.vue';
 import messaging from './messaging.vue';
 import messagingRoom from './messaging-room.vue';
 import urlPreview from './url-preview.vue';
 import twitterSetting from './twitter-setting.vue';
+import githubSetting from './github-setting.vue';
 import fileTypeIcon from './file-type-icon.vue';
-import Reversi from './games/reversi/reversi.vue';
+import emoji from './emoji.vue';
 import welcomeTimeline from './welcome-timeline.vue';
 import uiInput from './ui/input.vue';
 import uiButton from './ui/button.vue';
+import uiHorizonGroup from './ui/horizon-group.vue';
 import uiCard from './ui/card.vue';
 import uiForm from './ui/form.vue';
 import uiTextarea from './ui/textarea.vue';
@@ -54,6 +56,7 @@ import formRadio from './ui/form/radio.vue';
 Vue.component('mk-mute-and-block', muteAndBlock);
 Vue.component('mk-error', error);
 Vue.component('mk-api-settings', apiSettings);
+Vue.component('mk-password-settings', passwordSettings);
 Vue.component('mk-drive-settings', driveSettings);
 Vue.component('mk-profile-editor', profileEditor);
 Vue.component('mk-note-skeleton', noteSkeleton);
@@ -80,18 +83,19 @@ Vue.component('mk-time', time);
 Vue.component('mk-timer', timer);
 Vue.component('mk-media-list', mediaList);
 Vue.component('mk-uploader', uploader);
-Vue.component('mk-special-message', specialMessage);
 Vue.component('mk-stream-indicator', streamIndicator);
 Vue.component('mk-ellipsis', ellipsis);
 Vue.component('mk-messaging', messaging);
 Vue.component('mk-messaging-room', messagingRoom);
 Vue.component('mk-url-preview', urlPreview);
 Vue.component('mk-twitter-setting', twitterSetting);
+Vue.component('mk-github-setting', githubSetting);
 Vue.component('mk-file-type-icon', fileTypeIcon);
-Vue.component('mk-reversi', Reversi);
+Vue.component('mk-emoji', emoji);
 Vue.component('mk-welcome-timeline', welcomeTimeline);
 Vue.component('ui-input', uiInput);
 Vue.component('ui-button', uiButton);
+Vue.component('ui-horizon-group', uiHorizonGroup);
 Vue.component('ui-card', uiCard);
 Vue.component('ui-form', uiForm);
 Vue.component('ui-textarea', uiTextarea);

src/client/app/common/views/components/instance.vue

@@ -3,22 +3,24 @@
 	<div class="banner" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"></div>
 
 	<h1>{{ meta.name }}</h1>
-	<p v-html="meta.description || '%i18n:common.about%'"></p>
-	<router-link to="/">%i18n:@start%</router-link>
+	<p v-html="meta.description || this.$t('@.about')"></p>
+	<router-link to="/">{{ $t('start') }}</router-link>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/instance.vue'),
 	data() {
 		return {
 			meta: null
 		}
 	},
 	created() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			this.meta = meta;
 		});
 	}

src/client/app/common/views/components/media-banner.vue

@@ -1,9 +1,9 @@
 <template>
 <div class="mk-media-banner">
 	<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
-		<span class="icon">%fa:exclamation-triangle%</span>
-		<b>%i18n:@sensitive%</b>
-		<span>%i18n:@click-to-show%</span>
+		<span class="icon"><fa icon="exclamation-triangle"/></span>
+		<b>{{ $t('sensitive') }}</b>
+		<span>{{ $t('click-to-show') }}</span>
 	</div>
 	<div class="audio" v-else-if="media.type.startsWith('audio')">
 		<audio class="audio"
@@ -18,7 +18,7 @@
 		:title="media.name"
 		:download="media.name"
 	>
-		<span class="icon">%fa:download%</span>
+		<span class="icon"><fa icon="download"/></span>
 		<b>{{ media.name }}</b>
 	</a>
 </div>
@@ -26,8 +26,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/media-banner.vue'),
 	props: {
 		media: {
 			type: Object,

src/client/app/common/views/components/menu.vue

@@ -4,7 +4,9 @@
 	<div class="popover" :class="{ hukidasi }" ref="popover">
 		<template v-for="item, i in items">
 			<div v-if="item === null"></div>
-			<button v-if="item" @click="clicked(item.action)" v-html="item.icon ? item.icon + ' ' + item.text : item.text" :tabindex="i"></button>
+			<button v-if="item" @click="clicked(item.action)" :tabindex="i">
+				<fa v-if="item.icon" :icon="item.icon"/>{{ item.text }}
+			</button>
 		</template>
 	</div>
 </div>
@@ -188,6 +190,9 @@ export default Vue.extend({
 				color var(--primaryForeground)
 				background var(--primaryDarken10)
 
+			> [data-icon]
+				margin-right 4px
+
 		> div
 			margin 8px 0
 			height 1px

src/client/app/common/views/components/messaging-room.form.vue

@@ -8,19 +8,19 @@
 		ref="textarea"
 		@keypress="onKeypress"
 		@paste="onPaste"
-		placeholder="%i18n:@input-message-here%"
+		:placeholder="$t('input-message-here')"
 		v-autocomplete="'text'"
 	></textarea>
 	<div class="file" @click="file = null" v-if="file">{{ file.name }}</div>
 	<mk-uploader ref="uploader" @uploaded="onUploaded"/>
-	<button class="send" @click="send" :disabled="!canSend || sending" title="%i18n:@send%">
-		<template v-if="!sending">%fa:paper-plane%</template><template v-if="sending">%fa:spinner .spin%</template>
+	<button class="send" @click="send" :disabled="!canSend || sending" :title="$t('send')">
+		<template v-if="!sending"><fa icon="paper-plane"/></template><template v-if="sending"><fa icon="spinner .spin"/></template>
 	</button>
-	<button class="attach-from-local" @click="chooseFile" title="%i18n:@attach-from-local%">
-		%fa:upload%
+	<button class="attach-from-local" @click="chooseFile" :title="$t('attach-from-local')">
+		<fa icon="upload"/>
 	</button>
-	<button class="attach-from-drive" @click="chooseFileFromDrive" title="%i18n:@attach-from-drive%">
-		%fa:R folder-open%
+	<button class="attach-from-drive" @click="chooseFileFromDrive" :title="$t('attach-from-drive')">
+		<fa :icon="['far', 'folder-open']"/>
 	</button>
 	<input ref="file" type="file" @change="onChangeFile"/>
 </div>
@@ -28,9 +28,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as autosize from 'autosize';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/messaging-room.form.vue'),
 	props: ['user'],
 	data() {
 		return {
@@ -129,7 +131,7 @@ export default Vue.extend({
 		},
 
 		chooseFileFromDrive() {
-			(this as any).apis.chooseDriveFile({
+			this.$chooseDriveFile({
 				multiple: false
 			}).then(file => {
 				this.file = file;
@@ -150,7 +152,7 @@ export default Vue.extend({
 
 		send() {
 			this.sending = true;
-			(this as any).api('messaging/messages/create', {
+			this.$root.api('messaging/messages/create', {
 				userId: this.user.id,
 				text: this.text ? this.text : undefined,
 				fileId: this.file ? this.file.id : undefined

src/client/app/common/views/components/messaging-room.message.vue

@@ -3,7 +3,7 @@
 	<mk-avatar class="avatar" :user="message.user" target="_blank"/>
 	<div class="content">
 		<div class="balloon" :data-no-text="message.text == null">
-			<!-- <button class="delete-button" v-if="isMe" title="%i18n:common.delete%">
+			<!-- <button class="delete-button" v-if="isMe" :title="$t('@.delete')">
 				<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
 			</button> -->
 			<div class="content" v-if="!message.isDeleted">
@@ -16,15 +16,15 @@
 				</div>
 			</div>
 			<div class="content" v-if="message.isDeleted">
-				<p class="is-deleted">%i18n:@deleted%</p>
+				<p class="is-deleted">{{ $t('deleted') }}</p>
 			</div>
 		</div>
 		<div></div>
 		<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
 		<footer>
-			<span class="read" v-if="isMe && message.isRead">%i18n:@is-read%</span>
+			<span class="read" v-if="isMe && message.isRead">{{ $t('is-read') }}</span>
 			<mk-time :time="message.createdAt"/>
-			<template v-if="message.is_edited">%fa:pencil-alt%</template>
+			<template v-if="message.is_edited"><fa icon="pencil-alt"/></template>
 		</footer>
 	</div>
 </div>
@@ -32,9 +32,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import parse from '../../../../../mfm/parse';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/messaging-room.message.vue'),
 	props: {
 		message: {
 			required: true
@@ -179,7 +181,10 @@ export default Vue.extend({
 			font-size 10px
 			color var(--messagingRoomMessageInfo)
 
-			> [data-fa]
+			> .read
+				margin 0 8px
+
+			> [data-icon]
 				margin-left 4px
 
 	&:not([data-is-me])

src/client/app/common/views/components/messaging-room.vue

@@ -4,11 +4,11 @@
 	@drop.prevent.stop="onDrop"
 >
 	<div class="body">
-		<p class="init" v-if="init">%fa:spinner .spin%%i18n:common.loading%</p>
-		<p class="empty" v-if="!init && messages.length == 0">%fa:info-circle%%i18n:@empty%</p>
-		<p class="no-history" v-if="!init && messages.length > 0 && !existMoreMessages">%fa:flag%%i18n:@no-history%</p>
+		<p class="init" v-if="init"><fa icon="spinner .spin"/>{{ $t('@.loading') }}</p>
+		<p class="empty" v-if="!init && messages.length == 0"><fa icon="info-circle"/>{{ $t('empty') }}</p>
+		<p class="no-history" v-if="!init && messages.length > 0 && !existMoreMessages"><fa icon="flag"/>{{ $t('no-history') }}</p>
 		<button class="more" :class="{ fetching: fetchingMoreMessages }" v-if="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
-			<template v-if="fetchingMoreMessages">%fa:spinner .pulse .fw%</template>{{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:@more%' }}
+			<template v-if="fetchingMoreMessages"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreMessages ? $t('@.loading') : $t('@.load-more') }}
 		</button>
 		<template v-for="(message, i) in _messages">
 			<x-message :message="message" :key="message.id"/>
@@ -20,7 +20,7 @@
 	<footer>
 		<transition name="fade">
 			<div class="new-message" v-show="showIndicator">
-				<button @click="onIndicatorClick">%fa:arrow-circle-down%%i18n:@new-message%</button>
+				<button @click="onIndicatorClick"><i><fa icon="arrow-circle-down"/></i>{{ $t('new-message') }}</button>
 			</div>
 		</transition>
 		<x-form :user="user" ref="form"/>
@@ -30,11 +30,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
 import { url } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/messaging-room.vue'),
 	components: {
 		XMessage,
 		XForm
@@ -60,7 +62,7 @@ export default Vue.extend({
 				const date = new Date(message.createdAt).getDate();
 				const month = new Date(message.createdAt).getMonth() + 1;
 				message._date = date;
-				message._datetext = '%i18n:common.month-and-day%'.replace('{month}', month.toString()).replace('{day}', date.toString());
+				message._datetext = this.$t('@.month-and-day').replace('{month}', month.toString()).replace('{day}', date.toString());
 				return message;
 			});
 		},
@@ -71,7 +73,7 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.connection = (this as any).os.stream.connectToChannel('messaging', { otherparty: this.user.id });
+		this.connection = this.$root.stream.connectToChannel('messaging', { otherparty: this.user.id });
 
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
@@ -120,7 +122,7 @@ export default Vue.extend({
 				this.form.upload(e.dataTransfer.files[0]);
 				return;
 			} else if (e.dataTransfer.files.length > 1) {
-				alert('%i18n:@only-one-file-attached%');
+				alert(this.$t('only-one-file-attached'));
 				return;
 			}
 
@@ -137,7 +139,7 @@ export default Vue.extend({
 			return new Promise((resolve, reject) => {
 				const max = this.existMoreMessages ? 20 : 10;
 
-				(this as any).api('messaging/messages', {
+				this.$root.api('messaging/messages', {
 					userId: this.user.id,
 					limit: max + 1,
 					untilId: this.existMoreMessages ? this.messages[0].id : undefined
@@ -280,7 +282,7 @@ export default Vue.extend({
 			color var(--messagingRoomInfo)
 			opacity 0.5
 
-			[data-fa]
+			[data-icon]
 				margin-right 4px
 
 		> .no-history
@@ -292,7 +294,7 @@ export default Vue.extend({
 			color var(--messagingRoomInfo)
 			opacity 0.5
 
-			[data-fa]
+			[data-icon]
 				margin-right 4px
 
 		> .more
@@ -313,7 +315,7 @@ export default Vue.extend({
 			&.fetching
 				cursor wait
 
-			> [data-fa]
+			> [data-icon]
 				margin-right 4px
 
 		> .message
@@ -381,7 +383,7 @@ export default Vue.extend({
 				&:active
 					background var(--primaryDarken10)
 
-				> [data-fa]
+				> i
 					position absolute
 					top 0
 					left 10px

src/client/app/common/views/components/messaging.vue

@@ -2,8 +2,8 @@
 <div class="mk-messaging" :data-compact="compact">
 	<div class="search" v-if="!compact" :style="{ top: headerTop + 'px' }">
 		<div class="form">
-			<label for="search-input">%fa:search%</label>
-			<input v-model="q" type="search" @input="search" @keydown="onSearchKeydown" placeholder="%i18n:@search-user%"/>
+			<label for="search-input"><i><fa icon="search"/></i></label>
+			<input v-model="q" type="search" @input="search" @keydown="onSearchKeydown" :placeholder="$t('search-user')"/>
 		</div>
 		<div class="result">
 			<ol class="users" v-if="result.length > 0" ref="searchResult">
@@ -38,22 +38,24 @@
 						<mk-time :time="message.createdAt"/>
 					</header>
 					<div class="body">
-						<p class="text"><span class="me" v-if="isMe(message)">%i18n:@you%:</span>{{ message.text }}</p>
+						<p class="text"><span class="me" v-if="isMe(message)">{{ $t('you') }}:</span>{{ message.text }}</p>
 					</div>
 				</div>
 			</a>
 		</template>
 	</div>
-	<p class="no-history" v-if="!fetching && messages.length == 0">%i18n:@no-history%</p>
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="no-history" v-if="!fetching && messages.length == 0">{{ $t('no-history') }}</p>
+	<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import getAcct from '../../../../../misc/acct/render';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/messaging.vue'),
 	props: {
 		compact: {
 			type: Boolean,
@@ -75,12 +77,12 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		this.connection = (this as any).os.stream.useSharedConnection('messagingIndex');
+		this.connection = this.$root.stream.useSharedConnection('messagingIndex');
 
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
 
-		(this as any).api('messaging/history').then(messages => {
+		this.$root.api('messaging/history').then(messages => {
 			this.messages = messages;
 			this.fetching = false;
 		});
@@ -111,7 +113,7 @@ export default Vue.extend({
 				this.result = [];
 				return;
 			}
-			(this as any).api('users/search', {
+			this.$root.api('users/search', {
 				query: this.q,
 				max: 5
 			}).then(users => {
@@ -213,7 +215,7 @@ export default Vue.extend({
 				width 38px
 				pointer-events none
 
-				> [data-fa]
+				> i
 					display block
 					position absolute
 					top 0
@@ -418,7 +420,7 @@ export default Vue.extend({
 		text-align center
 		color #aaa
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 4px
 
 	// TODO: element base media query

src/client/app/common/views/components/misskey-flavored-markdown.ts

@@ -1,5 +1,4 @@
 import Vue, { VNode } from 'vue';
-import * as emojilib from 'emojilib';
 import { length } from 'stringz';
 import parse from '../../../../../mfm/parse';
 import getAcct from '../../../../../misc/acct/render';
@@ -24,6 +23,9 @@ export default Vue.component('misskey-flavored-markdown', {
 		i: {
 			type: Object,
 			default: null
+		},
+		customEmojis: {
+			required: false,
 		}
 	},
 
@@ -185,23 +187,16 @@ export default Vue.component('misskey-flavored-markdown', {
 				}
 
 				case 'emoji': {
-					//#region カスタム絵文字
-					const customEmojis = (this.os.getMetaSync() || { emojis: [] }).emojis;
-					const customEmoji = customEmojis.find(e => e.name == token.emoji || (e.aliases || []).includes(token.emoji));
-					if (customEmoji) {
-						return [createElement('img', {
-							attrs: {
-								src: customEmoji.url,
-								alt: token.emoji,
-								title: token.emoji,
-								style: 'height: 2.5em; vertical-align: middle;'
-							}
-						})];
-					}
-					//#endregion
-
-					const emoji = emojilib.lib[token.emoji];
-					return [createElement('span', emoji ? emoji.char : token.content)];
+					const customEmojis = (this.$root.getMetaSync() || { emojis: [] }).emojis || [];
+					return [createElement('mk-emoji', {
+						attrs: {
+							emoji: token.emoji,
+							name: token.name
+						},
+						props: {
+							customEmojis: this.customEmojis || customEmojis
+						}
+					})];
 				}
 
 				case 'search': {

src/client/app/common/views/components/mute-and-block.vue

@@ -1,10 +1,10 @@
 <template>
 <ui-card>
-	<div slot="title">%fa:ban% %i18n:@mute-and-block%</div>
+	<div slot="title"><fa icon="ban"/> {{ $t('mute-and-block') }}</div>
 
 	<section>
-		<header>%i18n:@mute%</header>
-		<ui-info v-if="!muteFetching && mute.length == 0">%i18n:@no-muted-users%</ui-info>
+		<header>{{ $t('mute') }}</header>
+		<ui-info v-if="!muteFetching && mute.length == 0">{{ $t('no-muted-users') }}</ui-info>
 		<div class="users" v-if="mute.length != 0">
 			<div v-for="user in mute" :key="user.id">
 				<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
@@ -13,8 +13,8 @@
 	</section>
 
 	<section>
-		<header>%i18n:@block%</header>
-		<ui-info v-if="!blockFetching && block.length == 0">%i18n:@no-blocked-users%</ui-info>
+		<header>{{ $t('block') }}</header>
+		<ui-info v-if="!blockFetching && block.length == 0">{{ $t('no-blocked-users') }}</ui-info>
 		<div class="users" v-if="block.length != 0">
 			<div v-for="user in block" :key="user.id">
 				<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
@@ -26,8 +26,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/mute-and-block.vue'),
 	data() {
 		return {
 			muteFetching: true,
@@ -38,12 +40,12 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		(this as any).api('mute/list').then(mute => {
+		this.$root.api('mute/list').then(mute => {
 			this.mute = mute.map(x => x.mutee);
 			this.muteFetching = false;
 		});
 
-		(this as any).api('blocking/list').then(blocking => {
+		this.$root.api('blocking/list').then(blocking => {
 			this.block = blocking.map(x => x.blockee);
 			this.blockFetching = false;
 		});

src/client/app/common/views/components/nav.vue

@@ -1,24 +1,22 @@
 <template>
 <span class="mk-nav">
-	<a :href="aboutUrl">%i18n:@about%</a>
+	<a :href="aboutUrl">{{ $t('about') }}</a>
 	<i>・</i>
-	<a href="/stats">%i18n:@stats%</a>
+	<a :href="repositoryUrl">{{ $t('repository') }}</a>
 	<i>・</i>
-	<a :href="repositoryUrl">%i18n:@repository%</a>
+	<a :href="feedbackUrl" target="_blank">{{ $t('feedback') }}</a>
 	<i>・</i>
-	<a :href="feedbackUrl" target="_blank">%i18n:@feedback%</a>
-	<i>・</i>
-	<a href="/dev">%i18n:@develop%</a>
-	<i>・</i>
-	<a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on %fa:B twitter%</a>
+	<a href="/dev">{{ $t('develop') }}</a>
 </span>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { lang } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/nav.vue'),
 	data() {
 		return {
 			aboutUrl: `/docs/${lang}/about`,
@@ -27,7 +25,7 @@ export default Vue.extend({
 		}
 	},
 	created() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			if (meta.maintainer.repository_url) this.repositoryUrl = meta.maintainer.repository_url;
 			if (meta.maintainer.feedback_url) this.feedbackUrl = meta.maintainer.feedback_url;
 		});

src/client/app/common/views/components/note-header.vue

@@ -6,18 +6,18 @@
 	<span class="is-bot" v-if="note.user.isBot">bot</span>
 	<span class="is-cat" v-if="note.user.isCat">cat</span>
 	<span class="username"><mk-acct :user="note.user"/></span>
-	<span class="is-verified" v-if="note.user.isVerified" title="%i18n:common.verified-user%">%fa:star%</span>
+	<span class="is-verified" v-if="note.user.isVerified" :title="$t('@.verified-user')"><fa icon="star"/></span>
 	<div class="info">
-		<span class="app" v-if="note.app && !mini">via <b>{{ note.app.name }}</b></span>
-		<span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span>
+		<span class="app" v-if="note.app && !mini && $store.state.settings.showVia">via <b>{{ note.app.name }}</b></span>
+		<span class="mobile" v-if="note.viaMobile"><fa icon="mobile-alt"/></span>
 		<router-link class="created-at" :to="note | notePage">
 			<mk-time :time="note.createdAt"/>
 		</router-link>
 		<span class="visibility" v-if="note.visibility != 'public'">
-			<template v-if="note.visibility == 'home'">%fa:home%</template>
-			<template v-if="note.visibility == 'followers'">%fa:unlock%</template>
-			<template v-if="note.visibility == 'specified'">%fa:envelope%</template>
-			<template v-if="note.visibility == 'private'">%fa:lock%</template>
+			<template v-if="note.visibility == 'home'"><fa icon="home"/></template>
+			<template v-if="note.visibility == 'followers'"><fa icon="unlock"/></template>
+			<template v-if="note.visibility == 'specified'"><fa icon="envelope"/></template>
+			<template v-if="note.visibility == 'private'"><fa icon="lock"/></template>
 		</span>
 	</div>
 </header>
@@ -25,8 +25,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n(),
 	props: {
 		note: {
 			type: Object,

src/client/app/common/views/components/note-menu.vue

@@ -6,28 +6,30 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { url } from '../../../config';
 import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
 import Ok from './ok.vue';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/note-menu.vue'),
 	props: ['note', 'source', 'compact'],
 	computed: {
 		items() {
 			const items = [{
-				icon: '%fa:info-circle%',
-				text: '%i18n:@detail%',
+				icon: 'info-circle',
+				text: this.$t('detail'),
 				action: this.detail
 			}, {
-				icon: '%fa:link%',
-				text: '%i18n:@copy-link%',
+				icon: 'link',
+				text: this.$t('copy-link'),
 				action: this.copyLink
 			}];
 
 			if (this.note.uri) {
 				items.push({
-					icon: '%fa:external-link-square-alt%',
-					text: '%i18n:@remote%',
+					icon: 'external-link-square-alt',
+					text: this.$t('remote'),
 					action: () => {
 						window.open(this.note.uri, '_blank');
 					}
@@ -38,14 +40,14 @@ export default Vue.extend({
 
 			if (this.note.isFavorited) {
 				items.push({
-					icon: '%fa:star%',
-					text: '%i18n:@unfavorite%',
+					icon: 'star',
+					text: this.$t('unfavorite'),
 					action: this.unfavorite
 				});
 			} else {
 				items.push({
-					icon: '%fa:star%',
-					text: '%i18n:@favorite%',
+					icon: 'star',
+					text: this.$t('favorite'),
 					action: this.favorite
 				});
 			}
@@ -53,14 +55,14 @@ export default Vue.extend({
 			if (this.note.userId == this.$store.state.i.id) {
 				if ((this.$store.state.i.pinnedNoteIds || []).includes(this.note.id)) {
 					items.push({
-						icon: '%fa:thumbtack%',
-						text: '%i18n:@unpin%',
+						icon: 'thumbtack',
+						text: this.$t('unpin'),
 						action: this.unpin
 					});
 				} else {
 					items.push({
-						icon: '%fa:thumbtack%',
-						text: '%i18n:@pin%',
+						icon: 'thumbtack',
+						text: this.$t('pin'),
 						action: this.pin
 					});
 				}
@@ -69,8 +71,8 @@ export default Vue.extend({
 			if (this.note.userId == this.$store.state.i.id || this.$store.state.i.isAdmin) {
 				items.push(null);
 				items.push({
-					icon: '%fa:trash-alt R%',
-					text: '%i18n:@delete%',
+					icon: ['far', 'trash-alt'],
+					text: this.$t('delete'),
 					action: this.del
 				});
 			}
@@ -89,16 +91,16 @@ export default Vue.extend({
 		},
 
 		pin() {
-			(this as any).api('i/pin', {
+			this.$root.api('i/pin', {
 				noteId: this.note.id
 			}).then(() => {
-				(this as any).os.new(Ok);
+				this.$root.new(Ok);
 				this.destroyDom();
 			});
 		},
 
 		unpin() {
-			(this as any).api('i/unpin', {
+			this.$root.api('i/unpin', {
 				noteId: this.note.id
 			}).then(() => {
 				this.destroyDom();
@@ -106,8 +108,8 @@ export default Vue.extend({
 		},
 
 		del() {
-			if (!window.confirm('%i18n:@delete-confirm%')) return;
-			(this as any).api('notes/delete', {
+			if (!window.confirm(this.$t('delete-confirm'))) return;
+			this.$root.api('notes/delete', {
 				noteId: this.note.id
 			}).then(() => {
 				this.destroyDom();
@@ -115,19 +117,19 @@ export default Vue.extend({
 		},
 
 		favorite() {
-			(this as any).api('notes/favorites/create', {
+			this.$root.api('notes/favorites/create', {
 				noteId: this.note.id
 			}).then(() => {
-				(this as any).os.new(Ok);
+				this.$root.new(Ok);
 				this.destroyDom();
 			});
 		},
 
 		unfavorite() {
-			(this as any).api('notes/favorites/delete', {
+			this.$root.api('notes/favorites/delete', {
 				noteId: this.note.id
 			}).then(() => {
-				(this as any).os.new(Ok);
+				this.$root.new(Ok);
 				this.destroyDom();
 			});
 		},

src/client/app/common/views/components/password-settings.vue

@@ -1,42 +1,44 @@
 <template>
 <div>
-	<ui-button @click="reset">%i18n:@reset%</ui-button>
+	<ui-button @click="reset">{{ $t('reset') }}</ui-button>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/password-settings.vue'),
 	methods: {
 		reset() {
-			(this as any).apis.input({
-				title: '%i18n:@enter-current-password%',
+			this.$input({
+				title: this.$t('enter-current-password'),
 				type: 'password'
 			}).then(currentPassword => {
-				(this as any).apis.input({
-					title: '%i18n:@enter-new-password%',
+				this.$input({
+					title: this.$t('enter-new-password'),
 					type: 'password'
 				}).then(newPassword => {
-					(this as any).apis.input({
-						title: '%i18n:@enter-new-password-again%',
+					this.$input({
+						title: this.$t('enter-new-password-again'),
 						type: 'password'
 					}).then(newPassword2 => {
 						if (newPassword !== newPassword2) {
-							(this as any).apis.dialog({
+							this.$dialog({
 								title: null,
-								text: '%i18n:@not-match%',
+								text: this.$t('not-match'),
 								actions: [{
 									text: 'OK'
 								}]
 							});
 							return;
 						}
-						(this as any).api('i/change_password', {
+						this.$root.api('i/change_password', {
 							currentPasword: currentPassword,
 							newPassword: newPassword
 						}).then(() => {
-							(this as any).apis.notify('%i18n:@changed%');
+							this.$notify(this.$t('changed'));
 						});
 					});
 				});

src/client/app/common/views/components/poll-editor.vue

@@ -1,27 +1,29 @@
 <template>
 <div class="mk-poll-editor">
 	<p class="caution" v-if="choices.length < 2">
-		%fa:exclamation-triangle%%i18n:@no-only-one-choice%
+		<fa icon="exclamation-triangle"/>{{ $t('no-only-one-choice') }}
 	</p>
 	<ul ref="choices">
 		<li v-for="(choice, i) in choices">
-			<input :value="choice" @input="onInput(i, $event)" :placeholder="'%i18n:@choice-n%'.replace('{}', i + 1)">
-			<button @click="remove(i)" title="%i18n:@remove%">
-				%fa:times%
+			<input :value="choice" @input="onInput(i, $event)" :placeholder="this.$t('choice-n').replace('{}', i + 1)">
+			<button @click="remove(i)" :title="$t('remove')">
+				<fa icon="times"/>
 			</button>
 		</li>
 	</ul>
-	<button class="add" v-if="choices.length < 10" @click="add">%i18n:@add%</button>
-	<button class="destroy" @click="destroy" title="%i18n:@destroy%">
-		%fa:times%
+	<button class="add" v-if="choices.length < 10" @click="add">{{ $t('add') }}</button>
+	<button class="destroy" @click="destroy" :title="$t('destroy')">
+		<fa icon="times"/>
 	</button>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { erase } from '../../../../../prelude/array';
 export default Vue.extend({
+	i18n: i18n('common/views/components/poll-editor.vue'),
 	data() {
 		return {
 			choices: ['', '']
@@ -76,7 +78,7 @@ export default Vue.extend({
 		font-size 0.8em
 		color #f00
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 4px
 
 	> ul

src/client/app/common/views/components/poll.vue

@@ -1,28 +1,30 @@
 <template>
 <div class="mk-poll" :data-is-voted="isVoted">
 	<ul>
-		<li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? '%i18n:@vote-to%'.replace('{}', choice.text) : ''">
+		<li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? $t('vote-to').replace('{}', choice.text) : ''">
 			<div class="backdrop" :style="{ 'width': (showResult ? (choice.votes / total * 100) : 0) + '%' }"></div>
 			<span>
-				<template v-if="choice.isVoted">%fa:check%</template>
+				<template v-if="choice.isVoted"><fa icon="check"/></template>
 				<span>{{ choice.text }}</span>
-				<span class="votes" v-if="showResult">({{ '%i18n:@vote-count%'.replace('{}', choice.votes) }})</span>
+				<span class="votes" v-if="showResult">({{ $t('vote-count').replace('{}', choice.votes) }})</span>
 			</span>
 		</li>
 	</ul>
 	<p v-if="total > 0">
-		<span>{{ '%i18n:@total-users%'.replace('{}', total) }}</span>
+		<span>{{ $t('total-users').replace('{}', total) }}</span>
 		<span>・</span>
-		<a v-if="!isVoted" @click="toggleShowResult">{{ showResult ? '%i18n:@vote%' : '%i18n:@show-result%' }}</a>
-		<span v-if="isVoted">%i18n:@voted%</span>
+		<a v-if="!isVoted" @click="toggleShowResult">{{ showResult ? $t('vote') : $t('show-result') }}</a>
+		<span v-if="isVoted">{{ $t('voted') }}</span>
 	</p>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { sum } from '../../../../../prelude/array';
 export default Vue.extend({
+	i18n: i18n('common/views/components/poll.vue'),
 	props: ['note'],
 	data() {
 		return {
@@ -49,7 +51,7 @@ export default Vue.extend({
 		},
 		vote(id) {
 			if (this.poll.choices.some(c => c.isVoted)) return;
-			(this as any).api('notes/polls/vote', {
+			this.$root.api('notes/polls/vote', {
 				noteId: this.note.id,
 				choice: id
 			}).then(() => {
@@ -100,7 +102,7 @@ export default Vue.extend({
 				transition width 1s ease
 
 			> span
-				> [data-fa]
+				> [data-icon]
 					margin-right 4px
 
 				> .votes

src/client/app/common/views/components/profile-editor.vue

@@ -1,65 +1,69 @@
 <template>
 <ui-card>
-	<div slot="title">%fa:user% %i18n:@title%</div>
+	<div slot="title"><fa icon="user"/> {{ $t('title') }}</div>
+
+	<section class="esokaraujimuwfttfzgocmutcihewscl">
+		<div class="header" :style="bannerStyle">
+			<mk-avatar class="avatar" :user="$store.state.i" :disable-preview="true" :disable-link="true"/>
+		</div>
 
-	<section class="fit-top">
 		<ui-form :disabled="saving">
 			<ui-input v-model="name" :max="30">
-				<span>%i18n:@name%</span>
+				<span>{{ $t('name') }}</span>
 			</ui-input>
 
 			<ui-input v-model="username" readonly>
-				<span>%i18n:@account%</span>
+				<span>{{ $t('account') }}</span>
 				<span slot="prefix">@</span>
 				<span slot="suffix">@{{ host }}</span>
 			</ui-input>
 
 			<ui-input v-model="location">
-				<span>%i18n:@location%</span>
-				<span slot="prefix">%fa:map-marker-alt%</span>
+				<span>{{ $t('location') }}</span>
+				<span slot="prefix"><fa icon="map-marker-alt"/></span>
 			</ui-input>
 
 			<ui-input v-model="birthday" type="date">
-				<span>%i18n:@birthday%</span>
-				<span slot="prefix">%fa:birthday-cake%</span>
+				<span>{{ $t('birthday') }}</span>
+				<span slot="prefix"><fa icon="birthday-cake"/></span>
 			</ui-input>
 
 			<ui-textarea v-model="description" :max="500">
-				<span>%i18n:@description%</span>
+				<span>{{ $t('description') }}</span>
 			</ui-textarea>
 
 			<ui-input type="file" @change="onAvatarChange">
-				<span>%i18n:@avatar%</span>
-				<span slot="icon">%fa:image%</span>
-				<span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span>
+				<span>{{ $t('avatar') }}</span>
+				<span slot="icon"><fa icon="image"/></span>
+				<span slot="desc" v-if="avatarUploading">{{ $t('uploading') }}<mk-ellipsis/></span>
 			</ui-input>
 
 			<ui-input type="file" @change="onBannerChange">
-				<span>%i18n:@banner%</span>
-				<span slot="icon">%fa:image%</span>
-				<span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
+				<span>{{ $t('banner') }}</span>
+				<span slot="icon"><fa icon="image"/></span>
+				<span slot="desc" v-if="bannerUploading">{{ $t('uploading') }}<mk-ellipsis/></span>
 			</ui-input>
 
-			<ui-button @click="save(true)">%i18n:@save%</ui-button>
+			<ui-button @click="save(true)">{{ $t('save') }}</ui-button>
 		</ui-form>
 	</section>
 
 	<section>
-		<header>%i18n:@advanced%</header>
+		<header>{{ $t('advanced') }}</header>
 
 		<div>
-			<ui-switch v-model="isCat" @change="save(false)">%i18n:@is-cat%</ui-switch>
-			<ui-switch v-model="isBot" @change="save(false)">%i18n:@is-bot%</ui-switch>
-			<ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
+			<ui-switch v-model="isCat" @change="save(false)">{{ $t('is-cat') }}</ui-switch>
+			<ui-switch v-model="isBot" @change="save(false)">{{ $t('is-bot') }}</ui-switch>
+			<ui-switch v-model="alwaysMarkNsfw">{{ $t('@.always-mark-nsfw') }}</ui-switch>
 		</div>
 	</section>
 
 	<section>
-		<header>%i18n:@privacy%</header>
+		<header>{{ $t('privacy') }}</header>
 
 		<div>
-			<ui-switch v-model="isLocked" @change="save(false)">%i18n:@is-locked%</ui-switch>
-			<ui-switch v-model="carefulBot" @change="save(false)">%i18n:@careful-bot%</ui-switch>
+			<ui-switch v-model="isLocked" @change="save(false)">{{ $t('is-locked') }}</ui-switch>
+			<ui-switch v-model="carefulBot" @change="save(false)">{{ $t('careful-bot') }}</ui-switch>
 		</div>
 	</section>
 </ui-card>
@@ -67,9 +71,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { apiUrl, host } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/profile-editor.vue'),
 	data() {
 		return {
 			host,
@@ -93,7 +99,15 @@ export default Vue.extend({
 	computed: {
 		alwaysMarkNsfw: {
 			get() { return this.$store.state.i.settings.alwaysMarkNsfw; },
-			set(value) { (this as any).api('i/update', { alwaysMarkNsfw: value }); }
+			set(value) { this.$root.api('i/update', { alwaysMarkNsfw: value }); }
+		},
+
+		bannerStyle(): any {
+			if (this.$store.state.i.bannerUrl == null) return {};
+			return {
+				backgroundColor: this.$store.state.i.bannerColor && this.$store.state.i.bannerColor.length == 3 ? `rgb(${ this.$store.state.i.bannerColor.join(',') })` : null,
+				backgroundImage: `url(${ this.$store.state.i.bannerUrl })`
+			};
 		},
 	},
 
@@ -159,17 +173,17 @@ export default Vue.extend({
 		save(notify) {
 			this.saving = true;
 
-			(this as any).api('i/update', {
+			this.$root.api('i/update', {
 				name: this.name || null,
 				location: this.location || null,
 				description: this.description || null,
 				birthday: this.birthday || null,
 				avatarId: this.avatarId,
 				bannerId: this.bannerId,
-				isCat: this.isCat,
-				isBot: this.isBot,
-				isLocked: this.isLocked,
-				carefulBot: this.carefulBot
+				isCat: !!this.isCat,
+				isBot: !!this.isBot,
+				isLocked: !!this.isLocked,
+				carefulBot: !!this.carefulBot
 			}).then(i => {
 				this.saving = false;
 				this.$store.state.i.avatarId = i.avatarId;
@@ -180,7 +194,7 @@ export default Vue.extend({
 				if (notify) {
 					this.$swal({
 						type: 'success',
-						text: '%i18n:@saved%'
+						text: this.$t('saved')
 					});
 				}
 			});
@@ -188,3 +202,26 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<style lang="stylus" scoped>
+.esokaraujimuwfttfzgocmutcihewscl
+	> .header
+		height 150px
+		overflow hidden
+		background-size cover
+		background-position center
+		border-radius 4px
+
+		> .avatar
+			position absolute
+			top 0
+			bottom 0
+			left 0
+			right 0
+			display block
+			width 72px
+			height 72px
+			margin auto
+			box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
+
+</style>

src/client/app/common/views/components/reaction-icon.vue

@@ -1,24 +1,26 @@
 <template>
 <span class="mk-reaction-icon">
-	<img v-if="reaction == 'like'" src="https://twemoji.maxcdn.com/2/svg/1f44d.svg" alt="%i18n:common.reactions.like%">
-	<img v-if="reaction == 'love'" src="https://twemoji.maxcdn.com/2/svg/2764.svg" alt="%i18n:common.reactions.love%">
-	<img v-if="reaction == 'laugh'" src="https://twemoji.maxcdn.com/2/svg/1f606.svg" alt="%i18n:common.reactions.laugh%">
-	<img v-if="reaction == 'hmm'" src="https://twemoji.maxcdn.com/2/svg/1f914.svg" alt="%i18n:common.reactions.hmm%">
-	<img v-if="reaction == 'surprise'" src="https://twemoji.maxcdn.com/2/svg/1f62e.svg" alt="%i18n:common.reactions.surprise%">
-	<img v-if="reaction == 'congrats'" src="https://twemoji.maxcdn.com/2/svg/1f389.svg" alt="%i18n:common.reactions.congrats%">
-	<img v-if="reaction == 'angry'" src="https://twemoji.maxcdn.com/2/svg/1f4a2.svg" alt="%i18n:common.reactions.angry%">
-	<img v-if="reaction == 'confused'" src="https://twemoji.maxcdn.com/2/svg/1f625.svg" alt="%i18n:common.reactions.confused%">
-	<img v-if="reaction == 'rip'" src="https://twemoji.maxcdn.com/2/svg/1f607.svg" alt="%i18n:common.reactions.rip%">
+	<img v-if="reaction == 'like'" src="https://twemoji.maxcdn.com/2/svg/1f44d.svg" :alt="$t('@.reactions.like')">
+	<img v-if="reaction == 'love'" src="https://twemoji.maxcdn.com/2/svg/2764.svg" :alt="$t('@.reactions.love')">
+	<img v-if="reaction == 'laugh'" src="https://twemoji.maxcdn.com/2/svg/1f606.svg" :alt="$t('@.reactions.laugh')">
+	<img v-if="reaction == 'hmm'" src="https://twemoji.maxcdn.com/2/svg/1f914.svg" :alt="$t('@.reactions.hmm')">
+	<img v-if="reaction == 'surprise'" src="https://twemoji.maxcdn.com/2/svg/1f62e.svg" :alt="$t('@.reactions.surprise')">
+	<img v-if="reaction == 'congrats'" src="https://twemoji.maxcdn.com/2/svg/1f389.svg" :alt="$t('@.reactions.congrats')">
+	<img v-if="reaction == 'angry'" src="https://twemoji.maxcdn.com/2/svg/1f4a2.svg" :alt="$t('@.reactions.angry')">
+	<img v-if="reaction == 'confused'" src="https://twemoji.maxcdn.com/2/svg/1f625.svg" :alt="$t('@.reactions.confused')">
+	<img v-if="reaction == 'rip'" src="https://twemoji.maxcdn.com/2/svg/1f607.svg" :alt="$t('@.reactions.rip')">
 	<template v-if="reaction == 'pudding'">
-		<img v-if="$store.getters.isSignedIn && $store.state.settings.iLikeSushi" src="https://twemoji.maxcdn.com/2/svg/1f363.svg" alt="%i18n:common.reactions.pudding%">
-		<img v-else src="https://twemoji.maxcdn.com/2/svg/1f36e.svg" alt="%i18n:common.reactions.pudding%">
+		<img v-if="$store.getters.isSignedIn && $store.state.settings.iLikeSushi" src="https://twemoji.maxcdn.com/2/svg/1f363.svg" :alt="$t('@.reactions.pudding')">
+		<img v-else src="https://twemoji.maxcdn.com/2/svg/1f36e.svg" :alt="$t('@.reactions.pudding')">
 	</template>
 </span>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 export default Vue.extend({
+	i18n: i18n(),
 	props: ['reaction']
 });
 </script>

src/client/app/common/views/components/reaction-picker.vue

@@ -4,16 +4,16 @@
 	<div class="popover" :class="{ compact, big }" ref="popover">
 		<p v-if="!compact">{{ title }}</p>
 		<div ref="buttons" :class="{ showFocus }">
-			<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button>
-			<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button>
-			<button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" title="%i18n:common.reactions.laugh%"><mk-reaction-icon reaction='laugh'/></button>
-			<button @click="react('hmm')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="4" title="%i18n:common.reactions.hmm%"><mk-reaction-icon reaction='hmm'/></button>
-			<button @click="react('surprise')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="5" title="%i18n:common.reactions.surprise%"><mk-reaction-icon reaction='surprise'/></button>
-			<button @click="react('congrats')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="6" title="%i18n:common.reactions.congrats%"><mk-reaction-icon reaction='congrats'/></button>
-			<button @click="react('angry')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="7" title="%i18n:common.reactions.angry%"><mk-reaction-icon reaction='angry'/></button>
-			<button @click="react('confused')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="8" title="%i18n:common.reactions.confused%"><mk-reaction-icon reaction='confused'/></button>
-			<button @click="react('rip')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="9" title="%i18n:common.reactions.rip%"><mk-reaction-icon reaction='rip'/></button>
-			<button @click="react('pudding')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="10" title="%i18n:common.reactions.pudding%"><mk-reaction-icon reaction='pudding'/></button>
+			<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" :title="$t('@.reactions.like')"><mk-reaction-icon reaction='like'/></button>
+			<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" :title="$t('@.reactions.love')"><mk-reaction-icon reaction='love'/></button>
+			<button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" :title="$t('@.reactions.laugh')"><mk-reaction-icon reaction='laugh'/></button>
+			<button @click="react('hmm')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="4" :title="$t('@.reactions.hmm')"><mk-reaction-icon reaction='hmm'/></button>
+			<button @click="react('surprise')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="5" :title="$t('@.reactions.surprise')"><mk-reaction-icon reaction='surprise'/></button>
+			<button @click="react('congrats')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="6" :title="$t('@.reactions.congrats')"><mk-reaction-icon reaction='congrats'/></button>
+			<button @click="react('angry')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="7" :title="$t('@.reactions.angry')"><mk-reaction-icon reaction='angry'/></button>
+			<button @click="react('confused')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="8" :title="$t('@.reactions.confused')"><mk-reaction-icon reaction='confused'/></button>
+			<button @click="react('rip')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="9" :title="$t('@.reactions.rip')"><mk-reaction-icon reaction='rip'/></button>
+			<button @click="react('pudding')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="10" :title="$t('@.reactions.pudding')"><mk-reaction-icon reaction='pudding'/></button>
 		</div>
 	</div>
 </div>
@@ -21,11 +21,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as anime from 'animejs';
 
-const placeholder = '%i18n:@choose-reaction%';
-
 export default Vue.extend({
+	i18n: i18n('common/views/components/reaction-picker.vue'),
 	props: {
 		note: {
 			type: Object,
@@ -67,7 +67,7 @@ export default Vue.extend({
 
 	data() {
 		return {
-			title: placeholder,
+			title: this.$t('choose-reaction'),
 			focus: null
 		};
 	},
@@ -145,7 +145,7 @@ export default Vue.extend({
 
 	methods: {
 		react(reaction) {
-			(this as any).api('notes/reactions/create', {
+			this.$root.api('notes/reactions/create', {
 				noteId: this.note.id,
 				reaction: reaction
 			}).then(() => {
@@ -160,7 +160,7 @@ export default Vue.extend({
 		},
 
 		onMouseout(e) {
-			this.title = placeholder;
+			this.title = this.$t('choose-reaction');
 		},
 
 		close() {

src/client/app/common/views/components/reactions-viewer.vue

@@ -17,6 +17,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+
 export default Vue.extend({
 	props: ['note'],
 	computed: {
@@ -26,7 +27,7 @@ export default Vue.extend({
 	},
 	methods: {
 		react(reaction: string) {
-			(this as any).api('notes/reactions/create', {
+			this.$root.api('notes/reactions/create', {
 				noteId: this.note.id,
 				reaction: reaction
 			});

src/client/app/common/views/components/signin.vue

@@ -2,25 +2,28 @@
 <form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
 	<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange" styl="fill">
-		<span>%i18n:@username%</span>
+		<span>{{ $t('username') }}</span>
 		<span slot="prefix">@</span>
 		<span slot="suffix">@{{ host }}</span>
 	</ui-input>
 	<ui-input v-model="password" type="password" required styl="fill">
-		<span>%i18n:@password%</span>
-		<span slot="prefix">%fa:lock%</span>
+		<span>{{ $t('password') }}</span>
+		<span slot="prefix"><fa icon="lock"/></span>
 	</ui-input>
 	<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required styl="fill"/>
-	<ui-button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</ui-button>
-	<p style="margin: 8px 0;">%i18n:@or% <a :href="`${apiUrl}/signin/twitter`">%i18n:@signin-with-twitter%</a></p>
+	<ui-button type="submit" :disabled="signing">{{ signing ? $t('signing-in') : $t('signin') }}</ui-button>
+	<p style="margin: 8px 0;"><a :href="`${apiUrl}/signin/twitter`">{{ $t('signin-with-twitter') }}</a></p>
+	<p style="margin: 8px 0;"><a :href="`${apiUrl}/signin/github`">{{ $t('signin-with-github') }}</a></p>
 </form>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { apiUrl, host } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/signin.vue'),
 	props: {
 		withAvatar: {
 			type: Boolean,
@@ -41,7 +44,7 @@ export default Vue.extend({
 	},
 	methods: {
 		onUsernameChange() {
-			(this as any).api('users/show', {
+			this.$root.api('users/show', {
 				username: this.username
 			}).then(user => {
 				this.user = user;
@@ -52,14 +55,14 @@ export default Vue.extend({
 		onSubmit() {
 			this.signing = true;
 
-			(this as any).api('signin', {
+			this.$root.api('signin', {
 				username: this.username,
 				password: this.password,
 				token: this.user && this.user.twoFactorEnabled ? this.token : undefined
 			}, true).then(() => {
 				location.reload();
 			}).catch(() => {
-				alert('%i18n:@login-failed%');
+				alert(this.$t('login-failed'));
 				this.signing = false;
 			});
 		}

src/client/app/common/views/components/signup.vue

@@ -2,51 +2,53 @@
 <form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
 	<template v-if="meta">
 		<ui-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required styl="fill">
-			<span>%i18n:@invitation-code%</span>
-			<span slot="prefix">%fa:id-card-alt%</span>
-			<p slot="text" v-html="'%i18n:@invitation-info%'.replace('{}', meta.maintainer.url)"></p>
+			<span>{{ $t('invitation-code') }}</span>
+			<span slot="prefix"><fa icon="id-card-alt"/></span>
+			<p slot="desc" v-html="this.$t('invitation-info').replace('{}', 'mailto:' + meta.maintainer.email)"></p>
 		</ui-input>
 		<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername" styl="fill">
-			<span>%i18n:@username%</span>
+			<span>{{ $t('username') }}</span>
 			<span slot="prefix">@</span>
 			<span slot="suffix">@{{ host }}</span>
-			<p slot="text" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw% %i18n:@checking%</p>
-			<p slot="text" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw% %i18n:@available%</p>
-			<p slot="text" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@unavailable%</p>
-			<p slot="text" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@error%</p>
-			<p slot="text" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@invalid-format%</p>
-			<p slot="text" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-short%</p>
-			<p slot="text" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-long%</p>
+			<p slot="desc" v-if="usernameState == 'wait'" style="color:#999"><fa icon="spinner .pulse" fixed-width/> {{ $t('checking') }}</p>
+			<p slot="desc" v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('available') }}</p>
+			<p slot="desc" v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('unavailable') }}</p>
+			<p slot="desc" v-if="usernameState == 'error'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('error') }}</p>
+			<p slot="desc" v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('invalid-format') }}</p>
+			<p slot="desc" v-if="usernameState == 'min-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('too-short') }}</p>
+			<p slot="desc" v-if="usernameState == 'max-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('too-long') }}</p>
 		</ui-input>
 		<ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true" styl="fill">
-			<span>%i18n:@password%</span>
-			<span slot="prefix">%fa:lock%</span>
-			<div slot="text">
-				<p slot="text" v-if="passwordStrength == 'low'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@weak-password%</p>
-				<p slot="text" v-if="passwordStrength == 'medium'" style="color:#3CB7B5">%fa:check .fw% %i18n:@normal-password%</p>
-				<p slot="text" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw% %i18n:@strong-password%</p>
+			<span>{{ $t('password') }}</span>
+			<span slot="prefix"><fa icon="lock"/></span>
+			<div slot="desc">
+				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('weak-password') }}</p>
+				<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('normal-password') }}</p>
+				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('strong-password') }}</p>
 			</div>
 		</ui-input>
 		<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype" styl="fill">
-			<span>%i18n:@password% (%i18n:@retype%)</span>
-			<span slot="prefix">%fa:lock%</span>
-			<div slot="text">
-				<p slot="text" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw% %i18n:@password-matched%</p>
-				<p slot="text" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@password-not-matched%</p>
+			<span>{{ $t('password') }} ({{ $t('retype') }})</span>
+			<span slot="prefix"><fa icon="lock"/></span>
+			<div slot="desc">
+				<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('password-matched') }}</p>
+				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('password-not-matched') }}</p>
 			</div>
 		</ui-input>
-		<div v-if="meta.recaptchaSitekey != null" class="g-recaptcha" :data-sitekey="meta.recaptchaSitekey" style="margin: 16px 0;"></div>
-		<ui-button type="submit">%i18n:@create%</ui-button>
+		<div v-if="meta.enableRecaptcha" class="g-recaptcha" :data-sitekey="meta.recaptchaSiteKey" style="margin: 16px 0;"></div>
+		<ui-button type="submit">{{ $t('create') }}</ui-button>
 	</template>
 </form>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 const getPasswordStrength = require('syuilo-password-strength');
 import { host, url } from '../../../config';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/signup.vue'),
 	data() {
 		return {
 			host,
@@ -70,7 +72,7 @@ export default Vue.extend({
 		}
 	},
 	created() {
-		(this as any).os.getMeta().then(meta => {
+		this.$root.getMeta().then(meta => {
 			this.meta = meta;
 		});
 	},
@@ -100,7 +102,7 @@ export default Vue.extend({
 
 			this.usernameState = 'wait';
 
-			(this as any).api('username/available', {
+			this.$root.api('username/available', {
 				username: this.username
 			}).then(result => {
 				this.usernameState = result.available ? 'ok' : 'unavailable';
@@ -126,22 +128,22 @@ export default Vue.extend({
 			this.passwordRetypeState = this.password == this.retypedPassword ? 'match' : 'not-match';
 		},
 		onSubmit() {
-			(this as any).api('signup', {
+			this.$root.api('signup', {
 				username: this.username,
 				password: this.password,
 				invitationCode: this.invitationCode,
-				'g-recaptcha-response': this.meta.recaptchaSitekey != null ? (window as any).grecaptcha.getResponse() : null
+				'g-recaptcha-response': this.meta.enableRecaptcha ? (window as any).grecaptcha.getResponse() : null
 			}, true).then(() => {
-				(this as any).api('signin', {
+				this.$root.api('signin', {
 					username: this.username,
 					password: this.password
 				}, true).then(() => {
 					location.href = '/';
 				});
 			}).catch(() => {
-				alert('%i18n:@some-error%');
+				alert(this.$t('some-error'));
 
-				if (this.meta.recaptchaSitekey != null) {
+				if (this.meta.enableRecaptcha) {
 					(window as any).grecaptcha.reset();
 				}
 			});

src/client/app/common/views/components/special-message.vue

@@ -1,42 +0,0 @@
-<template>
-<div class="mk-special-message">
-	<p v-if="m == 1 && d == 1">%i18n:@new-year%</p>
-	<p v-if="m == 12 && d == 25">%i18n:@christmas%</p>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	data() {
-		return {
-			now: new Date()
-		};
-	},
-	computed: {
-		d(): number {
-			return this.now.getDate();
-		},
-		m(): number {
-			return this.now.getMonth() + 1;
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.mk-special-message
-	&:empty
-		display none
-
-	> p
-		margin 0
-		padding 4px
-		text-align center
-		font-size 14px
-		font-weight bold
-		text-transform uppercase
-		color #fff
-		background #ff1036
-
-</style>

src/client/app/common/views/components/stream-indicator.vue

@@ -1,33 +1,35 @@
 <template>
 <div class="mk-stream-indicator">
 	<p v-if="stream.state == 'initializing'">
-		%fa:spinner .pulse%
-		<span>%i18n:@connecting%<mk-ellipsis/></span>
+		<fa icon="spinner .pulse"/>
+		<span>{{ $t('connecting') }}<mk-ellipsis/></span>
 	</p>
 	<p v-if="stream.state == 'reconnecting'">
-		%fa:spinner .pulse%
-		<span>%i18n:@reconnecting%<mk-ellipsis/></span>
+		<fa icon="spinner .pulse"/>
+		<span>{{ $t('reconnecting') }}<mk-ellipsis/></span>
 	</p>
 	<p v-if="stream.state == 'connected'">
-		%fa:check%
-		<span>%i18n:@connected%</span>
+		<fa icon="check"/>
+		<span>{{ $t('connected') }}</span>
 	</p>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as anime from 'animejs';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/stream-indicator.vue'),
 	computed: {
 		stream() {
-			return (this as any).os.stream;
+			return this.$root.stream;
 		}
 	},
 	created() {
-		(this as any).os.stream.on('_connected_', this.onConnected);
-		(this as any).os.stream.on('_disconnected_', this.onDisconnected);
+		this.$root.stream.on('_connected_', this.onConnected);
+		this.$root.stream.on('_disconnected_', this.onDisconnected);
 
 		this.$nextTick(() => {
 			if (this.stream.state == 'connected') {
@@ -36,8 +38,8 @@ export default Vue.extend({
 		});
 	},
 	beforeDestroy() {
-		(this as any).os.stream.off('_connected_', this.onConnected);
-		(this as any).os.stream.off('_disconnected_', this.onDisconnected);
+		this.$root.stream.off('_connected_', this.onConnected);
+		this.$root.stream.off('_disconnected_', this.onDisconnected);
 	},
 	methods: {
 		onConnected() {
@@ -80,7 +82,7 @@ export default Vue.extend({
 		display block
 		margin 0
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 0.25em
 
 </style>

src/client/app/common/views/components/tag-cloud.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="jtivnzhfwquxpsfidertopbmwmchmnmo">
-	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-	<p class="empty" v-else-if="tags.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
+	<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
+	<p class="empty" v-else-if="tags.length == 0"><fa icon="exclamation-circle"/>{{ $t('empty') }}</p>
 	<div v-else>
 		<vue-word-cloud
 				:words="tags.slice(0, 20).map(x => [x.name, x.count])"
@@ -19,9 +19,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as VueWordCloud from 'vuewordcloud';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/tag-cloud.vue'),
 	components: {
 		[VueWordCloud.name]: VueWordCloud
 	},
@@ -41,7 +43,7 @@ export default Vue.extend({
 	},
 	methods: {
 		fetch() {
-			(this as any).api('aggregation/hashtags').then(tags => {
+			this.$root.api('aggregation/hashtags').then(tags => {
 				this.tags = tags;
 				this.fetching = false;
 			});
@@ -74,7 +76,7 @@ export default Vue.extend({
 		text-align center
 		color #aaa
 
-		> [data-fa]
+		> [data-icon]
 			margin-right 4px
 
 	> div

src/client/app/common/views/components/theme.vue

@@ -1,96 +1,96 @@
 <template>
 <div class="nicnklzforebnpfgasiypmpdaaglujqm">
 	<label>
-		<span>%i18n:@light-theme%</span>
-		<ui-select v-model="light" placeholder="%i18n:@light-theme%">
-			<optgroup label="%i18n:@light-themes%">
+		<span>{{ $t('light-theme') }}</span>
+		<ui-select v-model="light" :placeholder="$t('light-theme')">
+			<optgroup :label="$t('light-themes')">
 				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
-			<optgroup label="%i18n:@dark-themes%">
+			<optgroup :label="$t('dark-themes')">
 				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
 		</ui-select>
 	</label>
 
 	<label>
-		<span>%i18n:@dark-theme%</span>
-		<ui-select v-model="dark" placeholder="%i18n:@dark-theme%">
-			<optgroup label="%i18n:@dark-themes%">
+		<span>{{ $t('dark-theme') }}</span>
+		<ui-select v-model="dark" :placeholder="$t('dark-theme')">
+			<optgroup :label="$t('dark-themes')">
 				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
-			<optgroup label="%i18n:@light-themes%">
+			<optgroup :label="$t('light-themes')">
 				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
 		</ui-select>
 	</label>
 
 	<details class="creator">
-		<summary>%fa:palette% %i18n:@create-a-theme%</summary>
+		<summary><fa icon="palette"/> {{ $t('create-a-theme') }}</summary>
 		<div>
-			<span>%i18n:@base-theme%:</span>
-			<ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio>
-			<ui-radio v-model="myThemeBase" value="dark">%i18n:@base-theme-dark%</ui-radio>
+			<span>{{ $t('base-theme') }}:</span>
+			<ui-radio v-model="myThemeBase" value="light">{{ $t('base-theme-light') }}</ui-radio>
+			<ui-radio v-model="myThemeBase" value="dark">{{ $t('base-theme-dark') }}</ui-radio>
 		</div>
 		<div>
 			<ui-input v-model="myThemeName">
-				<span>%i18n:@theme-name%</span>
+				<span>{{ $t('theme-name') }}</span>
 			</ui-input>
 			<ui-textarea v-model="myThemeDesc">
-				<span>%i18n:@desc%</span>
+				<span>{{ $t('desc') }}</span>
 			</ui-textarea>
 		</div>
 		<div>
-			<div style="padding-bottom:8px;">%i18n:@primary-color%:</div>
+			<div style="padding-bottom:8px;">{{ $t('primary-color') }}:</div>
 			<color-picker v-model="myThemePrimary"/>
 		</div>
 		<div>
-			<div style="padding-bottom:8px;">%i18n:@secondary-color%:</div>
+			<div style="padding-bottom:8px;">{{ $t('secondary-color') }}:</div>
 			<color-picker v-model="myThemeSecondary"/>
 		</div>
 		<div>
-			<div style="padding-bottom:8px;">%i18n:@text-color%:</div>
+			<div style="padding-bottom:8px;">{{ $t('text-color') }}:</div>
 			<color-picker v-model="myThemeText"/>
 		</div>
-		<ui-button @click="preview()">%fa:eye% %i18n:@preview-created-theme%</ui-button>
-		<ui-button primary @click="gen()">%fa:save R% %i18n:@save-created-theme%</ui-button>
+		<ui-button @click="preview()"><fa icon="eye"/> {{ $t('preview-created-theme') }}</ui-button>
+		<ui-button primary @click="gen()"><fa :icon="['far', 'save']"/> {{ $t('save-created-theme') }}</ui-button>
 	</details>
 
 	<details>
-		<summary>%fa:download% %i18n:@install-a-theme%</summary>
-		<ui-button @click="import_()">%fa:file-import% %i18n:@import%</ui-button>
+		<summary><fa icon="download"/> {{ $t('install-a-theme') }}</summary>
+		<ui-button @click="import_()"><fa icon="file-import"/> {{ $t('import') }}</ui-button>
 		<input ref="file" type="file" accept=".misskeytheme" style="display:none;" @change="onUpdateImportFile"/>
-		<p>%i18n:@import-by-code%:</p>
+		<p>{{ $t('import-by-code') }}:</p>
 		<ui-textarea v-model="installThemeCode">
-			<span>%i18n:@theme-code%</span>
+			<span>{{ $t('theme-code') }}</span>
 		</ui-textarea>
-		<ui-button @click="() => install(this.installThemeCode)">%fa:check% %i18n:@install%</ui-button>
+		<ui-button @click="() => install(this.installThemeCode)"><fa icon="check"/> {{ $t('install') }}</ui-button>
 	</details>
 
 	<details>
-		<summary>%fa:folder-open% %i18n:@manage-themes%</summary>
-		<ui-select v-model="selectedThemeId" placeholder="%i18n:@select-theme%">
-			<optgroup label="%i18n:@builtin-themes%">
+		<summary><fa icon="folder-open"/> {{ $t('manage-themes') }}</summary>
+		<ui-select v-model="selectedThemeId" :placeholder="$t('select-theme')">
+			<optgroup :label="$t('builtin-themes')">
 				<option v-for="x in builtinThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
-			<optgroup label="%i18n:@my-themes%">
+			<optgroup :label="$t('my-themes')">
 				<option v-for="x in installedThemes.filter(t => t.author == this.$store.state.i.username)" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
-			<optgroup label="%i18n:@installed-themes%">
+			<optgroup :label="$t('installed-themes')">
 				<option v-for="x in installedThemes.filter(t => t.author != this.$store.state.i.username)" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
 		</ui-select>
 		<template v-if="selectedTheme">
 			<ui-input readonly :value="selectedTheme.author">
-				<span>%i18n:@author%</span>
+				<span>{{ $t('author') }}</span>
 			</ui-input>
 			<ui-textarea v-if="selectedTheme.desc" readonly :value="selectedTheme.desc">
-				<span>%i18n:@desc%</span>
+				<span>{{ $t('desc') }}</span>
 			</ui-textarea>
 			<ui-textarea readonly :value="selectedThemeCode">
-				<span>%i18n:@theme-code%</span>
+				<span>{{ $t('theme-code') }}</span>
 			</ui-textarea>
-			<ui-button @click="export_()" link :download="`${selectedTheme.name}.misskeytheme`" ref="export">%fa:box% %i18n:@export%</ui-button>
-			<ui-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)">%fa:trash-alt R% %i18n:@uninstall%</ui-button>
+			<ui-button @click="export_()" link :download="`${selectedTheme.name}.misskeytheme`" ref="export"><fa icon="box"/> {{ $t('export') }}</ui-button>
+			<ui-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="['far', 'trash-alt']"/> {{ $t('uninstall') }}</ui-button>
 		</template>
 	</details>
 </div>
@@ -98,6 +98,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import { lightTheme, darkTheme, builtinThemes, applyTheme, Theme } from '../../../theme';
 import { Chrome } from 'vue-color';
 import * as uuid from 'uuid';
@@ -119,6 +120,7 @@ function convertOldThemedefinition(t) {
 }
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/theme.vue'),
 	components: {
 		ColorPicker: Chrome
 	},
@@ -221,7 +223,7 @@ export default Vue.extend({
 			} catch (e) {
 				this.$swal({
 					type: 'error',
-					text: '%i18n:@invalid-theme%'
+					text: this.$t('invalid-theme')
 				});
 				return;
 			}
@@ -234,7 +236,7 @@ export default Vue.extend({
 			if (theme.id == null) {
 				this.$swal({
 					type: 'error',
-					text: '%i18n:@invalid-theme%'
+					text: this.$t('invalid-theme')
 				});
 				return;
 			}
@@ -242,7 +244,7 @@ export default Vue.extend({
 			if (this.$store.state.device.themes.some(t => t.id == theme.id)) {
 				this.$swal({
 					type: 'info',
-					text: '%i18n:@already-installed%'
+					text: this.$t('already-installed')
 				});
 				return;
 			}
@@ -254,7 +256,7 @@ export default Vue.extend({
 
 			this.$swal({
 				type: 'success',
-				text: '%i18n:@installed%'.replace('{}', theme.name)
+				text: this.$t('installed').replace('{}', theme.name)
 			});
 		},
 
@@ -267,7 +269,7 @@ export default Vue.extend({
 
 			this.$swal({
 				type: 'info',
-				text: '%i18n:@uninstalled%'.replace('{}', theme.name)
+				text: this.$t('uninstalled').replace('{}', theme.name)
 			});
 		},
 
@@ -304,7 +306,7 @@ export default Vue.extend({
 			if (theme.name == null || theme.name.trim() == '') {
 				this.$swal({
 					type: 'warning',
-					text: '%i18n:@theme-name-required%'
+					text: this.$t('theme-name-required')
 				});
 				return;
 			}
@@ -318,7 +320,7 @@ export default Vue.extend({
 
 			this.$swal({
 				type: 'success',
-				text: '%i18n:@saved%'
+				text: this.$t('saved')
 			});
 		}
 	}

src/client/app/common/views/components/time.vue

@@ -8,8 +8,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 
 export default Vue.extend({
+	i18n: i18n(),
 	props: {
 		time: {
 			type: [Date, String],
@@ -44,16 +46,16 @@ export default Vue.extend({
 			const time = this._time;
 			const ago = (this.now.getTime() - time.getTime()) / 1000/*ms*/;
 			return (
-				ago >= 31536000 ? '%i18n:common.time.years_ago%'  .replace('{}', (~~(ago / 31536000)).toString()) :
-				ago >= 2592000  ? '%i18n:common.time.months_ago%' .replace('{}', (~~(ago / 2592000)).toString()) :
-				ago >= 604800   ? '%i18n:common.time.weeks_ago%'  .replace('{}', (~~(ago / 604800)).toString()) :
-				ago >= 86400    ? '%i18n:common.time.days_ago%'   .replace('{}', (~~(ago / 86400)).toString()) :
-				ago >= 3600     ? '%i18n:common.time.hours_ago%'  .replace('{}', (~~(ago / 3600)).toString()) :
-				ago >= 60       ? '%i18n:common.time.minutes_ago%'.replace('{}', (~~(ago / 60)).toString()) :
-				ago >= 10       ? '%i18n:common.time.seconds_ago%'.replace('{}', (~~(ago % 60)).toString()) :
-				ago >= 0        ? '%i18n:common.time.just_now%' :
-				ago <  0        ? '%i18n:common.time.future%' :
-				'%i18n:common.time.unknown%');
+				ago >= 31536000 ? this.$t('@.time.years_ago')  .replace('{}', (~~(ago / 31536000)).toString()) :
+				ago >= 2592000  ? this.$t('@.time.months_ago') .replace('{}', (~~(ago / 2592000)).toString()) :
+				ago >= 604800   ? this.$t('@.time.weeks_ago')  .replace('{}', (~~(ago / 604800)).toString()) :
+				ago >= 86400    ? this.$t('@.time.days_ago')   .replace('{}', (~~(ago / 86400)).toString()) :
+				ago >= 3600     ? this.$t('@.time.hours_ago')  .replace('{}', (~~(ago / 3600)).toString()) :
+				ago >= 60       ? this.$t('@.time.minutes_ago').replace('{}', (~~(ago / 60)).toString()) :
+				ago >= 10       ? this.$t('@.time.seconds_ago').replace('{}', (~~(ago % 60)).toString()) :
+				ago >= 0        ? this.$t('@.time.just_now') :
+				ago <  0        ? this.$t('@.time.future') :
+				this.$t('@.time.unknown'));
 		}
 	},
 	created() {