Merge branch 'develop'

12.92.0
Update docker-develop.yml
2021-10-16 19:55:44 +09:00 · 2021-10-16 19:55:26 +09:00 · 2021-10-16 19:49:37 +09:00 · 2021-10-16 19:44:32 +09:00 · 2021-10-16 19:38:51 +09:00 · 2021-10-16 19:38:47 +09:00
456 changed files with 9741 additions and 6190 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -2,6 +2,7 @@
 .github
 .travis
 .vscode
+.config
 Dockerfile
 build/
 built/
--- a/.github/workflows/docker-develop.yml
+++ b/.github/workflows/docker-develop.yml
@@ -0,0 +1,33 @@
+name: Publish Docker image (develop)
+
+on:
+  push:
+    branches:
+      - develop
+  workflow_dispatch:
+
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v3
+        with:
+          images: misskey/misskey
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and Push to Docker Hub
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          push: true
+          tags: misskey/misskey:develop
+          labels: develop
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -0,0 +1,32 @@
+name: Publish Docker image
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v3
+        with:
+          images: misskey/misskey
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and Push to Docker Hub
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -16,16 +16,16 @@ jobs:

    services:
      postgres:
-        image: postgres:10-alpine
+        image: postgres:12.2-alpine
        ports:
-          - 5432:5432
+          - 54312:5432
        env:
          POSTGRES_DB: test-misskey
          POSTGRES_HOST_AUTH_METHOD: trust
      redis:
-        image: redis:alpine
+        image: redis:4.0-alpine
        ports:
-          - 6379:6379
+          - 56312:6379

    steps:
    - uses: actions/checkout@v2
@@ -40,7 +40,7 @@ jobs:
    - name: Check yarn.lock
      run: git diff --exit-code yarn.lock
    - name: Copy Configure
-      run: cp .circleci/misskey/*.yml .config
+      run: cp test/test.yml .config
    - name: Build
      run: yarn build
    - name: Test
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,10 @@
 /node_modules
 report.*.json

+# Cypress
+cypress/screenshots
+cypress/videos
+
 # config
 /.config/*
 !/.config/example.yml
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,12 +1,10 @@
 {
 	"recommendations": [
-		"ducksoupdev.vue2",
 		"editorconfig.editorconfig",
 		"eg2.vscode-npm-script",
-		"hollowtree.vue-snippets",
 		"ms-vscode.typescript-javascript-grammar",
 		"ms-vscode.vscode-typescript-tslint-plugin",
-		"octref.vetur",
+		"johnsoncodehk.volar",
 		"sysoev.language-stylus"
 	]
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,11 +2,71 @@
 ## 12.x.x (unreleased)

 ### Improvements
+- ページロードエラーページにリロードボタンを追加

 ### Bugfixes

 -->

+## 12.92.0 (2021/10/16)
+
+### Improvements
+- アカウント登録にメールアドレスの設定を必須にするオプション
+- クライアント: 全体的なUIのブラッシュアップ
+- クライアント: MFM関数構文のサジェストを実装
+- クライアント: ノート本文を投稿フォーム内でプレビューできるように
+- クライアント: 未読の通知のみ表示する機能
+- クライアント: 通知ページで通知の種類によるフィルタ
+- クライアント: アニメーションを減らす設定の適用範囲を拡充
+- クライアント: 新しいダークテーマを追加
+- クライアント: テーマコンパイラに hue と saturate 関数を追加
+- ActivityPub: HTML -> MFMの変換を強化
+- API: グループから抜ける users/groups/leave エンドポイントを実装
+- API: i/notifications に unreadOnly オプションを追加
+- API: ap系のエンドポイントをログイン必須化+レートリミット追加
+- MFM: Add tag syntaxes of bold <b></b> and strikethrough <s></s>
+
+### Bugfixes
+- Fix createDeleteAccountJob
+- admin inbox queue does not show individual jobs
+- クライアント: ヘッダーのタブが折り返される問題を修正
+- クライアント: ヘッダーにタブが表示されている状態でタイトルをクリックしたときにタブ選択が表示されるのを修正
+- クライアント: ユーザーページのタブが機能していない問題を修正
+- クライアント: ピン留めユーザーの設定項目がない問題を修正
+- クライアント: Deck UIにおいて、重ねたカラムの片方を畳んだ状態で右に出すと表示が壊れる問題を修正
+- API: 管理者およびモデレーターをブロックできてしまう問題を修正
+- MFM: Mentions in the link label are parsed as text
+- MFM: Add a property to the URL node indicating whether it was enclosed in <>
+- MFM: Disallows < and > in hashtags
+
+### Changes
+- 保守性やユーザビリティの観点から、Misskeyのコマンドラインオプションが削除されました。
+	- 必要であれば、代わりに環境変数で設定することができます
+- MFM: パフォーマンス、保守性、構文誤認識抑制の観点から、旧関数構文のサポートが削除されました。
+	- 旧構文(`[foo bar]`)を使用せず、現行の構文(`$[foo bar]`)を使用してください。
+
+## 12.91.0 (2021/09/22)
+
+### Improvements
+- ActivityPub: リモートユーザーのDeleteアクティビティに対応
+- ActivityPub: add resolver check for blocked instance
+- ActivityPub: deliverキューのメモリ使用量を削減
+- API: 管理者用アカウント削除APIを実装(/admin/accounts/delete)
+	- リモートユーザーの削除も可能に
+- アカウントが凍結された場合に、凍結された旨を表示してからログアウトするように
+- 凍結されたアカウントにログインしようとしたときに、凍結されている旨を表示するように
+- リスト、アンテナタイムラインを個別ページとして分割
+- UIの改善
+- MFMにsparklesエフェクトを追加
+- 非ログイン自は更新ダイアログを出さないように
+- クライアント起動時、アップデートが利用可能な場合エラー表示およびダイアログ表示しないように
+
+### Bugfixes
+- アカウントデータのエクスポート/インポート処理ができない問題を修正
+- アンテナの既読が付かない問題を修正
+- popupで設定ページを表示すると、アカウントの削除ページにアクセスすることができない問題を修正
+- "問題が発生しました"ウィンドウを開くと☓ボタンがなくて閉じれない問題を修正
+
 ## 12.90.1 (2021/09/05)

 ### Bugfixes
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,42 +1,44 @@
 # Contribution guide
-**[✨ English version available](/docs/CONTRIBUTING.en.md)**
+We're glad you're interested in contributing Misskey! In this document you will find the information you need to contribute to the project.

-プロジェクトに興味を持っていただきありがとうございます！ このドキュメントでは、プロジェクトに貢献する際に必要な情報をまとめています。
+**ℹ️ Important:** This project uses Japanese as its major language, **but you do not need to translate and write the Issues/PRs in Japanese.**
+Also, you might receive comments on your Issue/PR in Japanese, but you do not need to reply to them in Japanese as well.\
+The accuracy of translation into Japanese is not high, so it will be easier for us to understand if you write it in the original language.
+It will also allow the reader to use the translation tool of their preference if necessary.

 ## Issues
-Issueを作成する前に、以下をご確認ください:
- 重複を防ぐため、既に同様の内容のIssueが作成されていないか検索してから新しいIssueを作ってください。
- Issueを質問に使わないでください。
-	- Issueは、要望、提案、問題の報告にのみ使用してください。
-	- 質問は、[Misskey Forum](https://forum.misskey.io/)や[Discord](https://discord.gg/Wp8gVStHW3)でお願いします。
+Before creating an issue, please check the following:
+- To avoid duplication, please search for similar issues before creating a new issue.
+- Do not use Issues as a question.
+	- Issues should only be used to feature requests, suggestions, and report problems.
+	- Please ask questions in the [Misskey Forum](https://forum.misskey.io/) or [Discord](https://discord.gg/Wp8gVStHW3).

-## 実装をする前に
-機能追加やバグ修正をしたいときは、まずIssueで設計、方針をレビューしてもらいましょう(無い場合は作ってください)。このステップがないと、せっかく実装してもPRがマージされない可能性が高くなります。
+## Before implementation
+When you want to add a feature or fix a bug, **first have the design and policy reviewed in an Issue** (if it is not there, please make one). Without this step, there is a high possibility that the PR will not be merged even if it is implemented.

-また、実装に取り掛かるときは当該Issueに自分をアサインしてください(自分でできない場合は他メンバーに自分をアサインしてもらうようお願いしてください)。
-自分が実装するという意思表示をすることで、作業がバッティングするのを防ぎます。
+Also, when you start implementation, assign yourself to the Issue (if you cannot do it yourself, ask another member to assign you). By expressing your intention to work the Issue, you can prevent conflicts in the work.

-## PRの作成
-PRありがとうございます！ PRを作成する前に、以下をご確認ください:
- 可能であればタイトルに、以下で示すようなPRの種類が分かるキーワードをプリフィクスしてください。
-  - `fix` / `refactor` / `feat` / `enhance` / `perf` / `chore` など
-  - また、PRの粒度が適切であることを確認してください。ひとつのPRに複数の種類の変更や関心を含めることは避けてください。
- このPRによって解決されるIssueがある場合は、そのIssueへの参照を本文内に含めてください。
- [`CHANGELOG.md`](/CHANGELOG.md)に変更点を追記してください。リファクタリングなど、利用者に影響を与えない変更についてはこの限りではありません。
- この変更により新たに作成、もしくは更新すべきドキュメントがないか確認してください。
- 機能追加やバグ修正をした場合は、可能であればテストケースを追加してください。
- テスト、Lintが通っていることを予め確認してください。
-  - `npm run test`、`npm run lint`でぞれぞれ実施可能です。[詳細](#testing)
- UIに変更がある場合はスクリーンショットを本文内に添付してください。
-
-ご協力ありがとうございます🤗
-
-## ブランチ
+## Well-known branches
 - **`master`** branch is tracking the latest release and used for production purposes.
 - **`develop`** branch is where we work for the next release.
-	- PRを作成するときは、基本的にこのブランチに向けてください。
+	- When you create a PR, basically target it to this branch.
 - **`l10n_develop`** branch is reserved for localization management.

+## Creating a PR
+Thank you for your PR! Before creating a PR, please check the following:
+- If possible, prefix the title with a keyword that identifies the type of this PR, as shown below.
+  - `fix` / `refactor` / `feat` / `enhance` / `perf` / `chore` etc
+  - Also, make sure that the granularity of this PR is appropriate. Please do not include more than one type of change or interest in a single PR.
+- If there is an Issue which will be resolved by this PR, please include a reference to the Issue in the text.
+- Please add the summary of the changes to [`CHANGELOG.md`](/CHANGELOG.md). However, this is not necessary for changes that do not affect the users, such as refactoring.
+- Check if there are any documents that need to be created or updated due to this change.
+- If you have added a feature or fixed a bug, please add a test case if possible.
+- Please make sure that tests and Lint are passed in advance.
+  - You can run it with `npm run test` and `npm run lint`. [See more info](#testing)
+- If this PR includes UI changes, please attach a screenshot in the text.
+
+Thanks for your cooperation 🤗
+
 ## Localization (l10n)
 Misskey uses [Crowdin](https://crowdin.com/project/misskey) for localization management.
 You can improve our translations with your Crowdin account.
@@ -55,6 +57,17 @@ If your language is not listed in Crowdin, please open an issue.
 - Test codes are located in [`/test`](/test).

 ### Run test
+Create a config file.
+```
+cp test/test.yml .config/
+```
+Prepare DB/Redis for testing.
+```
+docker-compose -f test/docker-compose.yml up
+```
+Alternatively, prepare an empty (data can be erased) DB and edit `.config/test.yml`. 
+
+Run all test.
 ```
 npm run test
 ```
@@ -175,6 +188,10 @@ npx ts-node ./node_modules/typeorm/cli.js migration:generate -n 変更の名前
 ### JSONのimportに気を付けよう
 TypeScriptでjsonをimportすると、tscでコンパイルするときにそのjsonファイルも一緒にdistディレクトリに吐き出されてしまう。この挙動により、意図せずファイルの書き換えが発生することがあるので、jsonをimportするときは書き換えられても良いものかどうか確認すること。書き換えされて欲しくない場合は、importで読み込むのではなく、`fs.readFileSync`などの関数を使って読み込むようにすればよい。

+### コンポーネントのスタイル定義でmarginを持たせない
+コンポーネント自身がmarginを設定するのは問題の元となることはよく知られている
+marginはそのコンポーネントを使う側が設定する
+
 ## その他
 ### HTMLのクラス名で follow という単語は使わない
 広告ブロッカーで誤ってブロックされる
--- a/README.md
+++ b/README.md
@@ -104,6 +104,12 @@ Related projects
 - [misskey.js](https://github.com/misskey-dev/misskey.js) - Misskey SDK for JavaScript
 - [mfm.js](https://github.com/misskey-dev/mfm.js) - MFM parser

+Sponsors
+----------------------------------------------------------------
+<div align="center">
+	<a class="rss3" title="RSS3" href="https://rss3.io/" target="_blank" style="display: inline-block;"><img src="https://rss3.io/assets/images/Logo.svg" alt="RSS3" style="display: inline-block; height: 60px;"></a>
+</div>
+
 :heart: Backers
 ----------------------------------------------------------------
 <!-- PATREON_START -->
--- a/assets/client/sparkle-spritesheet.png
+++ b/assets/client/sparkle-spritesheet.png
--- a/cypress/integration/basic.js
+++ b/cypress/integration/basic.js
@@ -1,10 +1,14 @@
-describe('Basic', () => {
-	before(() => {
-		cy.request('POST', '/api/reset-db');
+describe('Before setup instance', () => {
+	beforeEach(() => {
+		cy.request('POST', '/api/reset-db').as('reset');
+		cy.get('@reset').its('status').should('equal', 204);
+		cy.reload(true);
 	});

-	beforeEach(() => {
-		cy.reload(true);
+	afterEach(() => {
+		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
+		// waitを入れることでそれを防止できる
+		cy.wait(1000);
 	});

  it('successfully loads', () => {
@@ -14,56 +18,172 @@ describe('Basic', () => {
 	it('setup instance', () => {
    cy.visit('/');

+		cy.intercept('POST', '/api/admin/accounts/create').as('signup');
+	
 		cy.get('[data-cy-admin-username] input').type('admin');
-
 		cy.get('[data-cy-admin-password] input').type('admin1234');
-
 		cy.get('[data-cy-admin-ok]').click();
+
+		// なぜか動かない
+		//cy.wait('@signup').should('have.property', 'response.statusCode');
+		cy.wait('@signup');
+  });
+});
+
+describe('After setup instance', () => {
+	beforeEach(() => {
+		cy.request('POST', '/api/reset-db').as('reset');
+		cy.get('@reset').its('status').should('equal', 204);
+		cy.reload(true);
+
+		// インスタンス初期セットアップ
+		cy.request('POST', '/api/admin/accounts/create', {
+			username: 'admin',
+			password: 'pass',
+		}).its('body').as('admin');
+
+		cy.get('@admin');
+	});
+
+	afterEach(() => {
+		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
+		// waitを入れることでそれを防止できる
+		cy.wait(1000);
+	});
+
+  it('successfully loads', () => {
+    cy.visit('/');
  });

 	it('signup', () => {
-    cy.visit('/');
+		cy.visit('/');
+
+		cy.intercept('POST', '/api/signup').as('signup');

 		cy.get('[data-cy-signup]').click();
-
 		cy.get('[data-cy-signup-username] input').type('alice');
-
 		cy.get('[data-cy-signup-password] input').type('alice1234');
-	
 		cy.get('[data-cy-signup-password-retype] input').type('alice1234');
-
 		cy.get('[data-cy-signup-submit]').click();
+
+		cy.wait('@signup');
+  });
+});
+
+describe('After user signup', () => {
+	beforeEach(() => {
+		cy.request('POST', '/api/reset-db').as('reset');
+		cy.get('@reset').its('status').should('equal', 204);
+		cy.reload(true);
+
+		// インスタンス初期セットアップ
+		cy.request('POST', '/api/admin/accounts/create', {
+			username: 'admin',
+			password: 'pass',
+		}).its('body').as('admin');
+
+		cy.get('@admin').then(() => {
+			// ユーザー作成
+			cy.request('POST', '/api/signup', {
+				username: 'alice',
+				password: 'alice1234',
+			}).its('body').as('alice');
+		});
+
+		cy.get('@alice');
+	});
+
+	afterEach(() => {
+		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
+		// waitを入れることでそれを防止できる
+		cy.wait(1000);
+	});
+
+  it('successfully loads', () => {
+    cy.visit('/');
  });

 	it('signin', () => {
-    cy.visit('/');
+		cy.visit('/');
+
+		cy.intercept('POST', '/api/signin').as('signin');

 		cy.get('[data-cy-signin]').click();
-
 		cy.get('[data-cy-signin-username] input').type('alice');
-
 		// Enterキーでサインインできるかの確認も兼ねる
 		cy.get('[data-cy-signin-password] input').type('alice1234{enter}');
+
+		cy.wait('@signin');
+  });
+
+	it('suspend', function() {
+		cy.request('POST', '/api/admin/suspend-user', {
+			i: this.admin.token,
+			userId: this.alice.id,
+		});
+
+		cy.visit('/');
+
+		cy.get('[data-cy-signin]').click();
+		cy.get('[data-cy-signin-username] input').type('alice');
+		cy.get('[data-cy-signin-password] input').type('alice1234{enter}');
+
+		cy.contains('アカウントが凍結されています');
+	});
+});
+
+describe('After user singed in', () => {
+	beforeEach(() => {
+		cy.request('POST', '/api/reset-db').as('reset');
+		cy.get('@reset').its('status').should('equal', 204);
+		cy.reload(true);
+
+		// インスタンス初期セットアップ
+		cy.request('POST', '/api/admin/accounts/create', {
+			username: 'admin',
+			password: 'pass',
+		}).its('body').as('admin');
+
+		cy.get('@admin').then(() => {
+			// ユーザー作成
+			cy.request('POST', '/api/signup', {
+				username: 'alice',
+				password: 'alice1234',
+			}).its('body').as('alice');
+		});
+
+		cy.get('@alice').then(() => {
+			cy.visit('/');
+
+			cy.intercept('POST', '/api/signin').as('signin');
+
+			cy.get('[data-cy-signin]').click();
+			cy.get('[data-cy-signin-username] input').type('alice');
+			cy.get('[data-cy-signin-password] input').type('alice1234{enter}');
+
+			cy.wait('@signin').as('signedIn');
+		});
+
+		cy.get('@signedIn');
+	});
+
+	afterEach(() => {
+		// テスト終了直前にページ遷移するようなテストケース(例えばアカウント作成)だと、たぶんCypressのバグでブラウザの内容が次のテストケースに引き継がれてしまう(例えばアカウントが作成し終わった段階からテストが始まる)。
+		// waitを入れることでそれを防止できる
+		cy.wait(1000);
+	});
+
+  it('successfully loads', () => {
+    cy.visit('/');
  });

 	it('note', () => {
    cy.visit('/');

-		//#region TODO: この辺はUI操作ではなくAPI操作でログインする
-		cy.get('[data-cy-signin]').click();
-
-		cy.get('[data-cy-signin-username] input').type('alice');
-
-		// Enterキーでサインインできるかの確認も兼ねる
-		cy.get('[data-cy-signin-password] input').type('alice1234{enter}');
-		//#endregion
-
 		cy.get('[data-cy-open-post-form]').click();
-
 		cy.get('[data-cy-post-form-text]').type('Hello, Misskey!');
-
 		cy.get('[data-cy-open-post-form-submit]').click();

-		// TODO: 投稿した文字列が画面内にあるか(=タイムラインに流れてきたか)のテスト
+		cy.contains('Hello, Misskey!');
  });
 });
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -15,6 +15,7 @@ services:
      - external_network
    volumes:
      - ./files:/misskey/files
+      - ./.config:/misskey/.config:ro

  redis:
    restart: always
--- a/docs/CONTRIBUTING.en.md
+++ b/docs/CONTRIBUTING.en.md
@@ -1,66 +0,0 @@
-# Contribution guide
-:v: Thanks for your contributions :v:
-
-**ℹ️ Important:** This project uses Japanese as its major language, **but you do not need to translate and write the Issues/PRs in Japanese.**
-Also, you might receive comments on your Issue/PR in Japanese, but you do not need to reply to them in Japanese as well.\
-The accuracy of translation into Japanese is not high, so it will be easier for us to understand if you write it in the original language.
-It will also allow the reader to use the translation tool of their preference if necessary.
-
-## Issues
-Before creating an issue, please check the following:
- To avoid duplication, please search for similar issues before creating a new issue.
- Do not use Issues as a question.
-	- Issues should only be used to feature requests, suggestions, and report problems.
-	- Please ask questions in the [Misskey Forum](https://forum.misskey.io/) or [Discord](https://discord.gg/Wp8gVStHW3).
-
-## Before implementation
-When you want to add a feature or fix a bug, first have the design and policy reviewed in an Issue (if it is not there, please make one). Without this step, there is a high possibility that the PR will not be merged even if it is implemented.
-
-Also, when you start implementation, assign yourself to the Issue (if you cannot do it yourself, ask another member to assign you). By expressing your intention to work the Issue, you can prevent conflicts in the work.
-
-## Well-known branches
- **`master`** branch is tracking the latest release and used for production purposes.
- **`develop`** branch is where we work for the next release.
-	- When you create a PR, basically target it to this branch.
- **`l10n_develop`** branch is reserved for localization management.
-
-## Creating a PR
-Thank you for your PR! Before creating a PR, please check the following:
- If possible, prefix the title with a keyword that identifies the type of this PR, as shown below.
-  - `fix` / `refactor` / `feat` / `enhance` / `perf` / `chore` etc
-  - Also, make sure that the granularity of this PR is appropriate. Please do not include more than one type of change or interest in a single PR.
- If there is an Issue which will be resolved by this PR, please include a reference to the Issue in the text.
- Please add the summary of the changes to [`CHANGELOG.md`](/CHANGELOG.md). However, this is not necessary for changes that do not affect the users, such as refactoring.
- Check if there are any documents that need to be created or updated due to this change.
- If you have added a feature or fixed a bug, please add a test case if possible.
- Please make sure that tests and Lint are passed in advance.
-  - You can run it with `npm run test` and `npm run lint`. [See more info](#testing)
- If this PR includes UI changes, please attach a screenshot in the text.
-
-Thanks for your cooperation 🤗
-
-## Localization (l10n)
-Misskey uses [Crowdin](https://crowdin.com/project/misskey) for localization management.
-You can improve our translations with your Crowdin account.
-Your changes in Crowdin are automatically submitted as a PR (with the title "New Crowdin translations") to the repository.
-The owner [@syuilo](https://github.com/syuilo) merges the PR into the develop branch before the next release.
-
-If your language is not listed in Crowdin, please open an issue.
-
-![Crowdin](https://d322cqt584bo4o.cloudfront.net/misskey/localized.svg)
-
-## Testing
- Test codes are located in [`/test`](/test).
-
-### Run test
-```
-npm run test
-```
-
-#### Run specify test
-```
-npx cross-env TS_NODE_FILES=true TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT="./test/tsconfig.json" npx mocha test/foo.ts --require ts-node/register
-```
-
-### e2e tests
-TODO
--- a/docs/push-docker-hub.ja.md
+++ b/docs/push-docker-hub.ja.md
@@ -0,0 +1,28 @@
+GitHub Actionsを使用してDocker Hubへpushする方法
+================================================================
+
+[/.github/workflows/docker.yml](/.github/workflows/docker.yml) に  
+GitHub ActionによりDocker Hubへpushするワークフローが記述されています。
+
+オリジナルリポジトリでは、リリースされたタイミングで `latest`, `<リリース名>` それぞれのタグでDocker Hubにpushされます。  
+※ Docker Hub に`<ブランチ名>`のようなタグがあるかもしれませんが、こちらは自動push対象ではありません。
+
+Fork先でこのワークフローを実行すると失敗します。
+
+以下では、Fork先で自分のDocker Hubリポジトリにpushするようにする方法を記述します。
+
+## 自分のDocker Hubリポジトリにpushするように設定する方法
+
+1. Docker Hubでリポジトリを作成します。
+2. ワークフローファイルの [images](https://github.com/misskey-dev/misskey/blob/53f3b779bf16abcda4f6e026c51384f3b8fbcc62/.github/workflows/docker.yml#L20) を作成したリポジトリに置き換えます。
+3. GitHubにて [暗号化されたシークレット](https://docs.github.com/ja/actions/reference/encrypted-secrets#creating-encrypted-secrets-for-a-repository) を作成します。  
+   作成が必要なのは `DOCKER_USERNAME` と `DOCKER_PASSWORD` で、それぞれDocker Hubのユーザーとパスワードになります。
+
+## pushする方法
+
+上記設定によりリリース時に自動的にDocker Hubにpushされるようになります。  
+具体的には、GitHubのリリース機能でリリースしたタイミングで `latest`, `<リリース名>` それぞれのタグでDocker Hubにpushされます。
+
+また、GitHub上から手動でpushすることも出来ます。  
+それを行うには、Actions => Publish Docker image => Run workflow からbranchを選択してワークフローを実行します。  
+ただし、この場合作成されるタグは`<ブランチ名>`になります。
--- a/locales/ar-SA.yml
+++ b/locales/ar-SA.yml
@@ -6,6 +6,7 @@ search: "البحث"
 notifications: "الإشعارات"
 username: "اسم المستخدم"
 password: "الكلمة السرية"
+forgotPassword: "نسيتَ كلمة السر"
 fetchingAsApObject: "جارٍ جلبه مِن الفديفرس…"
 ok: " حسناً"
 gotIt: "فهِمت"
--- a/locales/de-DE.yml
+++ b/locales/de-DE.yml
@@ -81,6 +81,8 @@ somethingHappened: "Ein Fehler ist aufgetreten"
 retry: "Wiederholen"
 pageLoadError: "Laden der Seite fehlgeschlagen."
 pageLoadErrorDescription: "Dieser Fehler wird meist durch Netzwerkfehler oder den Browser-Cache verursacht. Bitte leere den Cache oder versuche es nach einiger Zeit erneut."
+serverIsDead: "Dieser Server antwortet nicht. Bitte warte einen Moment und versuche es dann erneut."
+youShouldUpgradeClient: "Bitte aktualisiere diese Seite, um eine neuere Version deines Clients zu verwenden."
 enterListName: "Name der Liste eingeben"
 privacy: "Privatsphäre"
 makeFollowManuallyApprove: "Follow-Anfragen benötigen Bestätigung"
@@ -529,6 +531,8 @@ removeAllFollowing: "Allen gefolgten Benutzern entfolgen"
 removeAllFollowingDescription: "Dies entfolgt allen Benutzerkonten von {host}. Bitte führe dies durch, falls diese Instanz z.B. nicht mehr existiert."
 userSuspended: "Dieser Benutzer wurde gesperrt."
 userSilenced: "Dieser Benutzer wurde instanzweit stummgeschaltet."
+yourAccountSuspendedTitle: "Dieses Benutzerkonto ist gesperrt"
+yourAccountSuspendedDescription: "Dieses Benutzerkonto wurde gesperrt, da es gegen die Nutzungsbedingungen dieses Servers verstoßen hat. Trete mit dem Betreiber in Kontakt, falls du weitere Details erfahren möchtest. Bitte erstelle kein neues Benutzerkonto."
 menu: "Menü"
 divider: "Trenner"
 addItem: "Element hinzufügen"
@@ -543,7 +547,7 @@ invisibleNote: "Private Notiz"
 enableInfiniteScroll: "Automatisch mehr Notizen laden"
 visibility: "Sichtbarkeit"
 poll: "Umfrage"
-useCw: "Inhalt verbergen"
+useCw: "Inhaltswarnung verwenden"
 enablePlayer: "Video-Player öffnen"
 disablePlayer: "Video-Player schließen"
 expandTweet: "Tweet ausklappen"
@@ -748,7 +752,7 @@ switch: "Wechseln"
 noMaintainerInformationWarning: "Betreiberinformationen sind nicht konfiguriert."
 noBotProtectionWarning: "Bot-Schutz ist nicht konfiguriert."
 configure: "Konfigurieren"
-postToGallery: "Beitrag zu Galerie hinzufügen"
+postToGallery: "Neuen Galerie-Beitrag erstellen"
 gallery: "Galerie"
 recentPosts: "Neue Beiträge"
 popularPosts: "Beliebte Beiträge"
@@ -762,6 +766,7 @@ middle: "Mittel"
 low: "Niedrig"
 emailNotConfiguredWarning: "Keine Email-Adresse hinterlegt"
 ratio: "Verhältnis"
+previewNoteText: "Vorschau anzeigen"
 customCss: "Benutzerdefiniertes CSS"
 customCssWarn: "Verwende diese Einstellung nur, wenn du weißt, was sie tut. Ungültige Eingaben können dazu führen, dass der Client nicht mehr normal funktioniert."
 global: "Global"
@@ -780,11 +785,22 @@ translatedFrom: "Aus {x} übersetzt"
 accountDeletionInProgress: "Löschung des Benutzerkontos momentan in Bearbeitung"
 usernameInfo: "Ein Name, durch den dein Benutzerkonto auf diesem Server identifiziert werden kann. Du kannst das Alphabet (a~z, A~Z), Ziffern (0~9) oder Unterstriche (_) verwenden. Benutzernamen können später nicht geändert werden."
 aiChanMode: "Ai Modus"
-keepCw: "Inhaltswarnung beibehalten"
+keepCw: "Inhaltswarnungen beibehalten"
 pubSub: "Pub/Sub Benutzerkonten"
 lastCommunication: "Letzte Kommunikation"
 resolved: "Gelöst"
 unresolved: "Ungelöst"
+itsOn: "Eingeschaltet"
+itsOff: "Ausgeschaltet"
+emailRequiredForSignup: "Angaben einer Email-Adresse als benötigt markieren"
+unread: "Ungelesen"
+filter: "Filter"
+controllPanel: "Systemsteuerung"
+manageAccounts: "Benutzerkonten verwalten"
+_signup:
+  almostThere: "Fast geschafft"
+  emailAddressInfo: "Bitte gib deine Email-Adresse ein."
+  emailSent: "An deine Email-Adresse ({email}) wurde soeben eine Bestätigungsmail geschickt. Bitte klicke auf den enthaltenen Link, um die Erstellung deines Benutzerkontos abzuschließen."
 _accountDelete:
  accountDelete: "Benutzerkonto löschen"
  mayTakeTime: "Da die Löschung eines Benutzerkontos ein aufwendiger Prozess ist, kann dessen Dauer davon abhängen, wie viel Inhalt in diesem erstellt wurde oder wie viele Dateien hochgeladen wurden."
@@ -874,19 +890,19 @@ _mfm:
  flip: "Spiegelung"
  flipDescription: "Inhalt horizontal oder vertikal gespiegelt anzeigen."
  jelly: "Animation (Dehnen)"
-  jellyDescription: "Verleiht eine sich dehnende Animation."
+  jellyDescription: "Verleiht dem Inhalt eine sich dehnende Animation."
  tada: "Animation (Tada)"
  tadaDescription: "Verleiht eine Animation mit \"Tada!\"-Gefühl"
  jump: "Animation (Sprung)"
-  jumpDescription: "Verleiht eine springende Animation."
+  jumpDescription: "Verleiht dem Inhalt eine springende Animation."
  bounce: "Animation (Federn)"
-  bounceDescription: "Verleiht eine federnde Animation."
+  bounceDescription: "Verleiht dem Inhalt eine federnde Animation."
  shake: "Animation (Zittern)"
-  shakeDescription: "Verleiht eine zitternde Animation."
+  shakeDescription: "Verleiht dem Inhalt eine zitternde Animation."
  twitch: "Animation (Zucken)"
-  twitchDescription: "Verleiht eine sehr stark zuckende Animation."
+  twitchDescription: "Verleiht dem Inhalt eine sehr stark zuckende Animation."
  spin: "Animation (Rotieren)"
-  spinDescription: "Verleiht eine rotierende Animation."
+  spinDescription: "Verleiht dem Inhalt eine rotierende Animation."
  x2: "Groß"
  x2Description: "Inhalte größer anzeigen."
  x3: "Sehr groß"
@@ -899,6 +915,8 @@ _mfm:
  fontDescription: "Setzt die Schriftart des Inhaltes fest."
  rainbow: "Regenbogen"
  rainbowDescription: "Lässt den Inhalt in Regenbogenfarben erscheinen."
+  sparkle: "Glitzer"
+  sparkleDescription: "Verleiht Inhalt einen glitzernden Partikeleffekt."
 _reversi:
  reversi: "Reversi"
  gameSettings: "Spieleinstellungen"
@@ -1022,9 +1040,9 @@ _theme:
    infoFg: "Text von Informationen"
    infoWarnBg: "Hintergrund von Warnungen"
    infoWarnFg: "Text von Warnungen"
-    cwBg: "Hintergrund von verborgenen Inhalten"
-    cwFg: "Text von verborgenen Inhalten"
-    cwHoverBg: "Hintergrund von verborgenen Inhalten (Mouseover)"
+    cwBg: "Hintergrund des Inhaltswarnungsknopfs"
+    cwFg: "Text des Inhaltswarnungsknopfs"
+    cwHoverBg: "Hintergrund des Inhaltswarnungsknopfs (Mouseover)"
    toastBg: "Hintergrund von Benachrichtigungen"
    toastFg: "Text von Benachrichtigungen"
    buttonBg: "Hintergrund von Schaltflächen"
@@ -1125,6 +1143,10 @@ _permissions:
  "write:user-groups": "Benutzergruppen bearbeiten oder löschen"
  "read:channels": "Kanäle lesen"
  "write:channels": "Kanäle bedienen"
+  "read:gallery": "Beiträge deiner Galerie lesen"
+  "write:gallery": "Deine Galerie bearbeiten"
+  "read:gallery-likes": "Liste deiner mit \"Gefällt mir\" markierten Galerie-Beiträge lesen"
+  "write:gallery-likes": "Liste deiner mit \"Gefällt mir\" markierten Galerie-Beiträge bearbeiten"
 _auth:
  shareAccess: "Möchtest du \"{name}\" authorisieren, auf dieses Benuzerkonto zugreifen zu können?"
  shareAccessAsk: "Bist du dir sicher, dass du diese Anwendung authorisieren möchtest, auf dein Benutzerkonto zugreifen zu können?"
@@ -1167,7 +1189,7 @@ _widgets:
  aiscript: "AiScript-Konsole"
  aichan: "Ai"
 _cw:
-  hide: "Verbergen"
+  hide: "Inhalt verbergen"
  show: "Inhalt anzeigen"
  chars: "{count} Zeichen"
  files: "{count} Datei(en)"
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1,7 +1,7 @@
 ---
 _lang_: "English"
 headlineMisskey: "A network connected by notes"
-introMisskey: "Welcome! Misskey is an open source, decentralized microblogging service.\nCreate \"notes\" to share what is happening now, or to share it with everyone around you. 📡\nWith \"reactions\", you can also quickly express your feelings about everyone's notes. 👍\nLet's explore a new world! 🚀"
+introMisskey: "Welcome! Misskey is an open source, decentralized microblogging service.\nCreate \"notes\" to share your thoughts with everyone around you. 📡\nWith \"reactions\", you can also quickly express your feelings about everyone's notes. 👍\nLet's explore a new world! 🚀"
 monthAndDay: "{month}/{day}"
 search: "Search"
 notifications: "Notifications"
@@ -81,6 +81,8 @@ somethingHappened: "An error occurred"
 retry: "Retry"
 pageLoadError: "Failed to load page."
 pageLoadErrorDescription: "This is normally caused by network errors or the browser's cache. Try clearing the cache and then try again after waiting a little while."
+serverIsDead: "This server is not responding. Please wait for a while and try again."
+youShouldUpgradeClient: "To view this page, please refresh to update your client."
 enterListName: "Enter a list name"
 privacy: "Privacy"
 makeFollowManuallyApprove: "Follow requests require approval"
@@ -92,7 +94,7 @@ unfollow: "Unfollow"
 followRequestPending: "Pending follow request"
 enterEmoji: "Enter an emoji"
 renote: "Renote"
-unrenote: "Take back Renote"
+unrenote: "Take back renote"
 renoted: "Renoted."
 cantRenote: "This post can't be renoted."
 cantReRenote: "A renote can't be renoted."
@@ -136,7 +138,7 @@ settingGuide: "Recommended settings"
 cacheRemoteFiles: "Cache remote files"
 cacheRemoteFilesDescription: "When this setting is disabled, remote files are loaded directly from the remote instance. Disabling this will decrease storage usage, but increase traffic, as thumbnails will not be generated."
 flagAsBot: "Mark this account as as bot"
-flagAsBotDescription: "Enable this option if this account is controlled by a program. If enabled, it will act as flag for other developers to prevent endless interaction chains with other bots and adjust Misskey's internal systems to treat this account as a bot."
+flagAsBotDescription: "Enable this option if this account is controlled by a program. If enabled, it will act as a flag for other developers to prevent endless interaction chains with other bots and adjust Misskey's internal systems to treat this account as a bot."
 flagAsCat: "Mark this account as a cat"
 flagAsCatDescription: "Enable this option to mark this account as a cat."
 autoAcceptFollowed: "Automatically approve follow requests from users you're following"
@@ -199,7 +201,7 @@ done: "Done"
 processing: "Processing..."
 preview: "Preview"
 default: "Default"
-noCustomEmojis: "There are no emojis"
+noCustomEmojis: "There are no emoji"
 noJobs: "There are no jobs"
 federating: "Federating"
 blocked: "Blocked"
@@ -213,7 +215,7 @@ instanceFollowers: "Followers of instance"
 instanceUsers: "Users of this instance"
 changePassword: "Change password"
 security: "Security"
-retypedNotMatch: "The inputs does not match."
+retypedNotMatch: "The inputs do not match."
 currentPassword: "Current password"
 newPassword: "New password"
 newPasswordRetype: "Retype new password"
@@ -429,7 +431,7 @@ invitationCode: "Invitation code"
 checking: "Checking..."
 available: "Available"
 unavailable: "Not available"
-usernameInvalidFormat: "You can use upper- and lowercase letters, numbers as well as underscores."
+usernameInvalidFormat: "You can use upper- and lowercase letters, numbers, and underscores."
 tooShort: "Too short"
 tooLong: "Too long"
 weakPassword: "Weak password"
@@ -445,7 +447,7 @@ language: "Language"
 uiLanguage: "User interface language"
 groupInvited: "You've been invited to a group"
 aboutX: "About {x}"
-useOsNativeEmojis: "Use OS native Emojis"
+useOsNativeEmojis: "Use OS native Emoji"
 youHaveNoGroups: "You have no groups"
 joinOrCreateGroup: "Get invited to a group or create your own."
 noHistory: "No history available"
@@ -482,7 +484,7 @@ objectStorageBaseUrlDesc: "URL used as reference. Specify the URL of your CDN or
 objectStorageBucket: "Bucket"
 objectStorageBucketDesc: "Please specify the bucket name used at your provider."
 objectStoragePrefix: "Prefix"
-objectStoragePrefixDesc: "Files will stored under directories with this prefix."
+objectStoragePrefixDesc: "Files will be stored under directories with this prefix."
 objectStorageEndpoint: "Endpoint"
 objectStorageEndpointDesc: "Leave this empty if you are using AWS S3, otherwise specify the endpoint as '<host>' or '<host>:<port>', depending on the service you are using."
 objectStorageRegion: "Region"
@@ -529,6 +531,8 @@ removeAllFollowing: "Unfollow all followed users"
 removeAllFollowingDescription: "Executing this unfollows all accounts from {host}. Please run this if the instance e.g. no longer exists."
 userSuspended: "This user has been suspended."
 userSilenced: "This user has been silenced."
+yourAccountSuspendedTitle: "This account is suspended"
+yourAccountSuspendedDescription: "This account has been suspended due to breaking the server's terms of services or similar. Contact the administrator if you would like to know a more detailed reason. Please do not create a new account."
 menu: "Menu"
 divider: "Divider"
 addItem: "Add Item"
@@ -606,7 +610,7 @@ useGlobalSettingDesc: "If turned on, your account's notification settings will b
 other: "Other"
 regenerateLoginToken: "Regenerate login token"
 regenerateLoginTokenDescription: "Regenerate the token used internally during login. Normally this action is not necessary. If regenerated, all devices will be logged out."
-setMultipleBySeparatingWithSpace: "You can set multiple by separating them with spaces."
+setMultipleBySeparatingWithSpace: "Separate multiple entries with spaces."
 fileIdOrUrl: "File-ID or URL"
 chatOpenBehavior: "Behavior of the chat window when opened"
 behavior: "Behavior"
@@ -649,7 +653,7 @@ pollVotesCount: "Number of sent poll votes"
 pollVotedCount: "Number of received poll votes"
 yes: "Yes"
 no: "No"
-driveFilesCount: "Number of drive files"
+driveFilesCount: "Number of Drive files"
 driveUsage: "Drive space usage"
 noCrawle: "Reject crawler indexing"
 noCrawleDescription: "Ask search engines to not index your profile page, notes, Pages, etc."
@@ -657,7 +661,7 @@ lockedAccountInfo: "Unless you set your note visiblity to \"Followers only\", yo
 alwaysMarkSensitive: "Mark as NSFW by default"
 loadRawImages: "Load original images instead of showing thumbnails"
 disableShowingAnimatedImages: "Don't play animated images"
-verificationEmailSent: "A verification email has been sent. Please access the included link to complete verification."
+verificationEmailSent: "A verification email has been sent. Please follow the included link to complete verification."
 notSet: "Not set"
 emailVerified: "Email has been verified"
 noteFavoritesCount: "Number of favorite notes"
@@ -688,7 +692,7 @@ sendErrorReportsDescription: "When turned on, detailed error information will be
 myTheme: "My theme"
 backgroundColor: "Background color"
 accentColor: "Accent color"
-textColor: "Textfarbe"
+textColor: "Text color"
 saveAs: "Save as..."
 advanced: "Advanced"
 value: "Value"
@@ -724,7 +728,7 @@ fullView: "Full view"
 quitFullView: "Exit full view"
 addDescription: "Add description"
 userPagePinTip: "You can display notes here by selecting \"Pin to profile\" from the menu of individual notes."
-notSpecifiedMentionWarning: "This note contains mentions of users not included as recipient"
+notSpecifiedMentionWarning: "This note contains mentions of users not included as recipients"
 info: "About"
 userInfo: "User information"
 unknown: "Unknown"
@@ -748,7 +752,7 @@ switch: "Switch"
 noMaintainerInformationWarning: "Maintainer information is not configured."
 noBotProtectionWarning: "Bot protection is not configured."
 configure: "Configure"
-postToGallery: "Post to Gallery"
+postToGallery: "Create new gallery post"
 gallery: "Gallery"
 recentPosts: "Recent posts"
 popularPosts: "Popular posts"
@@ -762,6 +766,7 @@ middle: "Medium"
 low: "Low"
 emailNotConfiguredWarning: "Email address not set."
 ratio: "Ratio"
+previewNoteText: "Show preview"
 customCss: "Custom CSS"
 customCssWarn: "This setting should only be used if you know what it does. Entering improper values may cause the client to stop functioning normally."
 global: "Global"
@@ -778,13 +783,24 @@ whatIsNew: "Show changes"
 translate: "Translate"
 translatedFrom: "Translated from {x}"
 accountDeletionInProgress: "Account deletion is currently in progress"
-usernameInfo: "A name that identifies your account from others on this server.  You can use the alphabet (a~z, A~Z), digits (0~9) or underscores (_). Usernames can not be changed later."
+usernameInfo: "A name that identifies your account from others on this server.  You can use the alphabet (a~z, A~Z), digits (0~9) or underscores (_). Usernames cannot be changed later."
 aiChanMode: "Ai Mode"
-keepCw: "Keep Content Warning"
+keepCw: "Keep Content Warnings"
 pubSub: "Pub/Sub Accounts"
 lastCommunication: "Last communication"
 resolved: "Resolved"
 unresolved: "Unresolved"
+itsOn: "Enabled"
+itsOff: "Disabled"
+emailRequiredForSignup: "Require email address for sign-up"
+unread: "Unread"
+filter: "Filter"
+controllPanel: "Control Panel"
+manageAccounts: "Manage Accounts"
+_signup:
+  almostThere: "Almost there"
+  emailAddressInfo: "Please enter your email address."
+  emailSent: "A confirmation email has been sent to your email address ({email}). Please click the included link to complete account creation."
 _accountDelete:
  accountDelete: "Delete Account"
  mayTakeTime: "As account deletion is a resource-heavy process, it may take some time to complete depending on how much content you have created and how many files you have uploaded."
@@ -810,7 +826,7 @@ _gallery:
  my: "My Gallery"
  liked: "Liked Posts"
  like: "Like"
-  unlike: "Undo like"
+  unlike: "Remove like"
 _email:
  _follow:
    title: "You've got a new follower"
@@ -850,11 +866,11 @@ _mfm:
  url: "URL"
  urlDescription: "URLs can be displayed."
  link: "Link"
-  linkDescription: "Specific parts of text can be displayed as an URL."
+  linkDescription: "Specific parts of text can be displayed as a URL."
  bold: "Bold"
  boldDescription: "Highlights letters by making them thicker."
  small: "Small"
-  smallDescription: "Displays contents small and thin."
+  smallDescription: "Displays content small and thin."
  center: "Center"
  centerDescription: "Displays content centered."
  inlineCode: "Code (In-line)"
@@ -866,7 +882,7 @@ _mfm:
  blockMath: "Math (Block)"
  blockMathDescription: "Display multi-line Math formulas (KaTeX) in a block"
  quote: "Quote"
-  quoteDescription: "Displays content as quote."
+  quoteDescription: "Displays content as a quote."
  emoji: "Custom Emoji"
  emojiDescription: "By surrounding a custom emoji name with colons, custom emoji can be displayed."
  search: "Search"
@@ -896,9 +912,11 @@ _mfm:
  blur: "Blur"
  blurDescription: "Content can be blurred via this effect. It will be displayed clearly when hovered over."
  font: "Font"
-  fontDescription: "Sets the font to display contents in."
+  fontDescription: "Sets the font to display content in."
  rainbow: "Rainbow"
  rainbowDescription: "Makes the content appear in rainbow colors."
+  sparkle: "Sparkle"
+  sparkleDescription: "Gives content a sparkling particle effect."
 _reversi:
  reversi: "Reversi"
  gameSettings: "Game settings"
@@ -958,8 +976,8 @@ _menuDisplay:
 _wordMute:
  muteWords: "Muted words"
  muteWordsDescription: "Separate with spaces for an AND condition or with line breaks for an OR condition."
-  muteWordsDescription2: "Surround keywords by slashes to use regular expressions."
-  softDescription: "Hides notes fulfilling the set conditions from the timeline."
+  muteWordsDescription2: "Surround keywords with slashes to use regular expressions."
+  softDescription: "Hide notes that fulfil the set conditions from the timeline."
  hardDescription: "Prevents notes fulfilling the set conditions from being added to the timeline. In addition, these notes will not be added to the timeline even if the conditions are changed."
  soft: "Soft"
  hard: "Hard"
@@ -1017,7 +1035,7 @@ _theme:
    divider: "Divider"
    scrollbarHandle: "Scrollbar handle"
    scrollbarHandleHover: "Scrollbar handle (Hover)"
-    dateLabelFg: "Text of date labels"
+    dateLabelFg: "Date label text"
    infoBg: "Information background"
    infoFg: "Information text"
    infoWarnBg: "Warning background"
@@ -1090,19 +1108,19 @@ _tutorial:
 _2fa:
  alreadyRegistered: "You have already registered a 2-factor authentication device."
  registerDevice: "Register a new device"
-  registerKey: "Register a new Security Key"
+  registerKey: "Register a security key"
  step1: "First, install an authentication app (such as {a} or {b}) on your device."
  step2: "Then, scan the QR code displayed on this screen."
  step3: "Enter the token provided by your app to finish setup."
-  step4: "From now, any future login attempts will ask for such a login token."
-  securityKeyInfo: "Besides fingerprint or PIN authentication, you can also setup authentication via hardware security keys that support FIDO2 to further secure your login process."
+  step4: "From now on, any future login attempts will ask for such a login token."
+  securityKeyInfo: "Besides fingerprint or PIN authentication, you can also setup authentication via hardware security keys that support FIDO2 to further secure your account."
 _permissions:
  "read:account": "View your account information"
  "write:account": "Edit your account information"
  "read:blocks": "View your list of blocked users"
  "write:blocks": "Edit your list of blocked users"
-  "read:drive": "Access your drive files and folders"
-  "write:drive": "Edit or delete your drive files and folders"
+  "read:drive": "Access your Drive files and folders"
+  "write:drive": "Edit or delete your Drive files and folders"
  "read:favorites": "View your list of favorites"
  "write:favorites": "Edit your list of favorites"
  "read:following": "View information on who you follow"
@@ -1125,6 +1143,10 @@ _permissions:
  "write:user-groups": "Edit or delete your user groups"
  "read:channels": "Read your channels"
  "write:channels": "Modify your channels"
+  "read:gallery": "View your gallery"
+  "write:gallery": "Edit your gallery"
+  "read:gallery-likes": "View list of liked gallery posts"
+  "write:gallery-likes": "Edit list of liked gallery posts"
 _auth:
  shareAccess: "Would you like to authorize \"{name}\" to access this account?"
  shareAccessAsk: "Are you sure you want to authorize this application to access your account?"
@@ -1327,23 +1349,23 @@ _rooms:
    doll-ai: "Ai doll"
    banknote: "Pile of money"
 _pages:
-  newPage: "Create a page"
-  editPage: "Edit this page"
+  newPage: "Create a new Page"
+  editPage: "Edit this Page"
  readPage: "Source view activated"
  created: "Page successfully created"
  updated: "Page successfully edited"
  deleted: "Page successfully deleted"
  pageSetting: "Page settings"
-  nameAlreadyExists: "The specified page URL already exists"
-  invalidNameTitle: "The specified page URL is invalid"
-  invalidNameText: "Make sure the page title is not empty"
-  editThisPage: "Edit this page"
+  nameAlreadyExists: "The specified Page URL already exists"
+  invalidNameTitle: "The specified Page URL is invalid"
+  invalidNameText: "Make sure the Page title is not empty"
+  editThisPage: "Edit this Page"
  viewSource: "View source"
-  viewPage: "View your pages"
+  viewPage: "View your Pages"
  like: "Like"
-  unlike: "Undo like"
-  my: "My pages"
-  liked: "Liked pages"
+  unlike: "Remove like"
+  my: "My Pages"
+  liked: "Liked Pages"
  featured: "Featured"
  inspector: "Inspector"
  contents: "Contents"
@@ -1353,10 +1375,10 @@ _pages:
  url: "Page URL"
  summary: "Page summary"
  alignCenter: "Center elements"
-  hideTitleWhenPinned: "Hide page title when pinned to profile"
+  hideTitleWhenPinned: "Hide Page title when pinned to profile"
  font: "Font"
  fontSerif: "Serif"
-  fontSansSerif: "Sans serif"
+  fontSansSerif: "Sans Serif"
  eyeCatchingImageSet: "Set thumbnail"
  eyeCatchingImageRemove: "Delete thumbnail"
  chooseBlock: "Add a block"
@@ -1571,7 +1593,7 @@ _pages:
      seedRandomPick: "Randomly choose from list (with seed)"
      _seedRandomPick:
        arg1: "Seed"
-        arg2: "Liste"
+        arg2: "List"
      DRPWPM: "Randomly choose from weighted list (Changes once a day for each user)"
      _DRPWPM:
        arg1: "Text list"
@@ -1651,8 +1673,8 @@ _deck:
  columnMargin: "Margin between columns"
  columnHeaderHeight: "Column header height"
  addColumn: "Add column"
-  swapLeft: "Swap to left"
-  swapRight: "Swap to right"
+  swapLeft: "Swap left"
+  swapRight: "Swap right"
  swapUp: "Swap with above"
  swapDown: "Swap with below"
  stackLeft: "Stack on left column"
--- a/locales/eo-UY.yml
+++ b/locales/eo-UY.yml
@@ -1,19 +1,19 @@
 ---
 _lang_: "Esperanto"
-headlineMisskey: "Reto ligata per notoj"
-introMisskey: "Bonvenon! Misskey estas malfermitkoda malcentraliza mikrobloga servo.\nKreu \"noto\"n por diskonigu ke nun okazas, aŭ por dissendu pri vi. 📡\nPer la funkcio \"reago\", vi ankaŭ povas rapide esprimi vian senton pri ĉies noto. 👍\nEsploru novan mondon. 🚀"
-monthAndDay: "{day}a/{month}"
+headlineMisskey: "Jen la reto konektata de notoj"
+introMisskey: "Bonvenon! Misskey estas malfermitkoda malcentraliza etbloga servo.\nKreu \"noto\"n por paroli vian penson al iuj ĉirkaŭ vi. 📡\nLa funkcion \"reago\" ebligas esprimi rapide vian senton pri ies noto en Fediverso. 👍\nBonvole esploru novan mondon. 🚀"
+monthAndDay: "La {day}-a de la {month}-a monato"
 search: "Serĉi"
 notifications: "Sciigoj"
 username: "Uzantnomo"
 password: "Pasvorto"
 forgotPassword: "Ĉu vi forgesis pasvorton?"
-fetchingAsApObject: "Informpetado de Fediverso..."
+fetchingAsApObject: "Informpetado de kunfederaĵo…"
 ok: "Akcepteble"
 gotIt: "Mi komprenas"
 cancel: "Nuligi"
 enterUsername: "Entajpu uzantnomon"
-renotedBy: "Renoto farita de {user}"
+renotedBy: "Noto plusendita de {user}"
 noNotes: "Neniu noto!"
 noNotifications: "Vi ne havas sciigojn."
 instance: "Nodo"
@@ -23,27 +23,28 @@ otherSettings: "Aliaj agordoj"
 openInWindow: "Malfermi en nova fenestro"
 profile: "Profilo"
 timeline: "Templinio"
-noAccountDescription: "Tiu uzanto ne skribis biografieton"
+noAccountDescription: "Ĉi tiu uzanto ne skribis vivpriskribon."
 login: "Ensaluti"
-loggingIn: "Ensalutado..."
+loggingIn: "Ensalutado…"
 logout: "Elsaluti"
-signup: "Krei konton"
-uploading: "Alŝutado..."
+signup: "Registriĝi"
+uploading: "Alŝutado…"
 save: "Konservi"
 users: "Uzantoj"
 addUser: "Aldoni uzanton"
 favorite: "Preferi"
-favorites: "Preferataĵoj"
+favorites: "Preferaĵoj"
 unfavorite: "Malpreferi"
-favorited: "Aldonita al preferataĵoj"
-cantFavorite: "Ne aldonita al preferataĵoj"
-pin: "Alpingli al la profilo"
+favorited: "Aldonita al via listo de preferaĵoj."
+alreadyFavorited: "Ĝi jam estis aldonita al via listo de preferaĵoj."
+cantFavorite: "Ne aldonita al via listo de preferaĵoj."
+pin: "Alpingli"
 unpin: "Depingli"
 copyContent: "Kopii enhavon"
 copyLink: "Kopii ligilon"
 delete: "Forviŝi"
-deleteAndEdit: "Forviŝi kaj redakti"
-deleteAndEditConfirm: "Ĉu vi certas, ke vi volas forigi kaj redakti la noton? Ankaŭ ĉiuj reagoj, renotoj, kaj respondoj al ĝi foriĝos."
+deleteAndEdit: "Redakti foriginte"
+deleteAndEditConfirm: "Ĉu vi certas, ke vi volas forigi kaj redakti la noton? Tio forviŝos reagojn, notojn plusendintajn, kaj respondojn ĉiujn de ĝi."
 addToList: "Aldoni al listo"
 sendMessage: "Sendi mesaĝon"
 copyUsername: "Kopii uzantnomon"
@@ -51,52 +52,53 @@ searchUser: "Serĉi uzanton"
 reply: "Respondi"
 loadMore: "Vidu pli"
 showMore: "Vidi pli"
-youGotNewFollower: "sksekvis vin"
+youGotNewFollower: "eksekvis vin"
 receiveFollowRequest: "Peto de sekvado estas ricevita"
 followRequestAccepted: "La peto de sekvado akceptita"
 mention: "Mencioj"
 mentions: "Al vi"
-directNotes: "Notoj rektaj"
+directNotes: "Rekte senditaj"
 importAndExport: "Importi/eksporti"
 import: "Importi"
 export: "Eksporti"
 files: "Dosieroj"
 download: "Elŝuti"
-driveFileDeleteConfirm: "Ĉu vi certas, ke vi volas forviŝi la dosieron \"{name}\"? Ankaŭ notoj kiuj enhavas ĝin forviŝiĝos."
-unfollowConfirm: "Ĉu vi certas, ke vi volas ne plu sekvi {name}'(o)n?"
+driveFileDeleteConfirm: "Ĉu vi certas, ke vi volas forviŝi la dosieron \"{name}\"? Pro tio forviŝiĝos ankaŭ la notoj kiuj enhavas ĝin."
+unfollowConfirm: "Ĉu vi certas, ke vi volas ĉesi sekvi {name}'(o)n?"
 lists: "Listoj"
 noLists: "Neniu listo"
-note: "Elsendi noto"
+note: "Sendi"
 notes: "Notoj"
 following: "Sekvatoj"
 followers: "Sekvantoj"
 followsYou: "Sekvas vin"
-createList: "Kreii liston"
+createList: "Krei liston"
 manageLists: "Administri liston"
 error: "Eraro"
-somethingHappened: "Problemo okazis."
-retry: "Reprovi"
+somethingHappened: "Problemo okazis"
+retry: "Provi denove"
 enterListName: "Entajpu nomon de la listo"
 privacy: "Privateco"
+defaultNoteVisibility: "Implicitaĵo de videbleco"
 follow: "Sekvi"
 followRequest: "Peti de sekvado"
 followRequests: "Petoj de sekvado"
-unfollow: "Malsekvi"
+unfollow: "Ne plu sekvi"
 enterEmoji: "Entajpu emoĵion"
-renote: "Fari renoton"
-unrenote: "Malfari renoton"
-renoted: "Renoto fariĝis."
-cantRenote: "Tiu noto ne estas resendebla."
-cantReRenote: "Renotoj ne estas renotebla."
+renote: "Plusendi la noton"
+unrenote: "Malfari plusendadon"
+renoted: "Sukcese plusendita"
+cantRenote: "Oni ne povas plusendi la noton."
+cantReRenote: "Plusendado ne estas plusendebla."
 quote: "Citi"
 pinnedNote: "Alpinglita noto"
-pinned: "Alpingli al la profilo"
+pinned: "Alpingli"
 you: "Vi"
 clickToShow: "Klaku por malkaŝu"
 sensitive: "Enhavo ne estas deca por laborejo (NSFW)"
 add: "Aldoni"
 reaction: "Reagoj"
-rememberNoteVisibility: "Rememori la videblecon de la noto laste sendita"
+rememberNoteVisibility: "Rememoru videblecon de la noto laste sendita "
 attachCancel: "Deigi aldonaĵon"
 markAsSensitive: "Troviĝi NSFW"
 unmarkAsSensitive: "Ne troviĝi NSFW"
@@ -123,11 +125,11 @@ emojiName: "Nomo de emoĵio"
 emojiUrl: "URL de la emoĵio"
 addEmoji: "Aldoni emoĵion"
 settingGuide: "Agordaj rekomendoj"
-cacheRemoteFiles: "Havi staplon de transaj dosieroj"
+cacheRemoteFiles: "Stapli transajn dosierojn"
 flagAsBot: "Agordo por robota uzanto"
 flagAsCat: "Agordo de katiĝa uzanto"
 addAccount: "Aldoni konton"
-showOnRemote: "Vidi sur la fora nodo"
+showOnRemote: "Vidi ĉe la surloka nodo"
 general: "Ĝenerala"
 wallpaper: "Ekranfonoj"
 setWallpaper: "Apliki ekranfonon"
@@ -135,17 +137,28 @@ removeWallpaper: "Forviŝi ekranfonon. "
 searchWith: "Serĉi: {q}"
 youHaveNoLists: "Vi ne havas listojn."
 followConfirm: "Ĉu vi certas ke vi volas sekvi {name}'(o)n?"
+host: "Gastigo"
 selectUser: "Elekti uzanton"
+recipient: "Ricevonto"
 annotation: "Komentarioj"
 federation: "Kunfederaĵo"
-instances: "Nodo"
+instances: "Nodoj"
+latestRequestSentAt: "Lastatempa sendo"
+latestRequestReceivedAt: "Lastatempa ricevo"
+latestStatus: "Laŭstato"
 perHour: "Po horo"
 perDay: "Po tago"
-blockThisInstance: "Bloki tiun nodon"
+blockThisInstance: "Bloki la nodon"
+operations: "Agoj"
+software: "Programaro"
 version: "Versio"
+metadata: "Metadatumoj"
 withNFiles: "{n} dosiero(j)"
+monitor: "Monitoro"
+network: "Reto"
 disk: "Diskilo"
 instanceInfo: "Informoj pri la nodo"
+statistics: "Statistikoj"
 clearCachedFiles: "Malplenigi la staplon"
 clearCachedFilesConfirm: "Ĉu vi certas, ke vi volas forviŝi ĉiujn transajn dosierojn en la staplo?"
 blockedInstances: "Blokitaj nodoj"
@@ -156,7 +169,9 @@ noUsers: "Sen uzantoj"
 editProfile: "Redakti profilon"
 noteDeleteConfirm: "Ĉu vi certas ke vi volas forviŝi la noton?"
 pinLimitExceeded: "Vi povas alpingli ne pli noton."
-processing: "Prilaborado..."
+done: "Fini"
+processing: "Prilaborado…"
+preview: "Antaŭmontro"
 noCustomEmojis: "Neniu emoĵio"
 federating: "Nun kunfederanta"
 blocked: "Blokita"
@@ -165,11 +180,12 @@ all: "Ĉiuj"
 subscribing: "Abonata"
 publishing: "Al kiu dissendas"
 notResponding: "Alvokato ne disponeblas"
-instanceFollowing: "Sekvatoj el la nodo"
+instanceFollowing: "Sekvatoj en la nodo"
 instanceFollowers: "Sekvantoj el la nodo"
-instanceUsers: "Uzantoj de ĉi tiu nodo"
+instanceUsers: "Uzantoj de tiu ĉi nodo"
 changePassword: "Ŝanĝi pasvorton"
 security: "Sekureco"
+retypedNotMatch: "Enigitoj ne estas konformaj."
 currentPassword: "Aktuala pasvorto"
 newPassword: "Nova pasvorto"
 newPasswordRetype: "Reentajpu la novan pasvorton"
@@ -191,7 +207,7 @@ upload: "Alŝuti"
 fromDrive: "De la disko"
 fromUrl: "De URL"
 uploadFromUrl: "Alŝuti de URL"
-uploadFromUrlDescription: "URL de la dosiero kiun vi volas alŝuti"
+uploadFromUrlDescription: "URL de dosiero kiun vi volas alŝuti"
 explore: "Esplori"
 games: "Miskiaj Ludoj"
 messageRead: "Legita"
@@ -200,7 +216,7 @@ nUsersRead: "Legita de {n} homoj"
 tos: "Kondiĉoj de uzado"
 start: "Komenciĝi"
 home: "Hejma"
-remoteUserCaution: "Tiu infomoj estas ne tute ekzakta pro distanca uzanto."
+remoteUserCaution: "Ĉi tiuj infomoj ne estas tute ekzaktaj pro transa uzanto."
 activity: "Aktiveco"
 images: "Bildoj"
 birthday: "Naskiĝdato"
@@ -238,6 +254,7 @@ unwatch: "Malobservi"
 accept: "Permesi"
 normal: "Normala"
 instanceName: "Nomo de la nodo"
+instanceDescription: "Priskribo de la nodo "
 maintainerName: "Nomo de la administranto"
 maintainerEmail: "Retpoŝto de la administranto"
 tosUrl: "URL de kondiĉoj de uzado"
@@ -253,6 +270,8 @@ disconnectService: "Farkonektiĝi"
 enableLocalTimeline: "Ebligi lokan templinion"
 enableGlobalTimeline: "Ebligi mallokan templinion"
 registration: "Registri"
+enableRegistration: "Ebligi novan uzanton registriĝon"
+invite: "Inviti"
 driveCapacityPerLocalAccount: "Volumo de disko po unu loka uzanto"
 driveCapacityPerRemoteAccount: "Volumo de disko po unu transa uzanto"
 iconUrl: "URL de la ikono (retpaĝsimbolo, ktp)"
@@ -262,6 +281,12 @@ basicInfo: "Baza informo"
 pinnedUsers: "Alpinglita uzanto"
 pinnedPages: "Alpinglitaj paĝoj"
 pinnedNotes: "Alpinglita noto"
+hcaptchaSiteKey: "Reteja ŝlosilo"
+hcaptchaSecretKey: "Sekreta ŝlosilo"
+recaptcha: "reCAPTCHA"
+enableRecaptcha: "Ebligi reCAPTCHA'on"
+recaptchaSiteKey: "Reteja ŝlosilo"
+recaptchaSecretKey: "Sekreta ŝlosilo"
 antennas: "Antenoj"
 manageAntennas: "Administri antenojn"
 name: "Nomo"
@@ -278,13 +303,15 @@ unsilenceConfirm: "Ĉu vi certas ke vi volas malmutigi la uzanton?"
 popularUsers: "Popularaj uzantoj"
 recentlyUpdatedUsers: "Uzantoj kiuj lastatempe sendis noton"
 recentlyRegisteredUsers: "Novaliĝintaj uzantoj"
-exploreUsersCount: "Tiuj estas {count} uzantoj"
+recentlyDiscoveredUsers: "Lastatempe trovitaj uzantoj"
+exploreUsersCount: "Tio estas {count} uzantoj"
 exploreFediverse: "Esplori la Fediverson"
 popularTags: "Popularaj kradvortoj"
 userList: "Listoj"
 about: "Informoj"
 aboutMisskey: "Pri Misskey"
 administrator: "Administranto"
+twoStepAuthentication: "Dua-faktora aŭtentiko"
 moderator: "Kontrolisto"
 nUsersMentioned: "{n} uzanto(j) menciis"
 securityKey: "Sekureca ŝlosilo"
@@ -296,12 +323,14 @@ newPasswordIs: "La nova pasvorto estas {password}."
 share: "Diskonigi"
 notFound: "Ne trovita"
 cacheClear: "Malplenigi staplon"
+markAsReadAllNotifications: "Marki ĉiujn sciigojn kiel legito"
 help: "Manlibro de uzado"
 inputMessageHere: "Entajpu masaĝo tie ĉi"
 close: "Fermi"
 group: "Grupo"
 groups: "Grupoj"
 createGroup: "Krei grupon"
+invites: "Inviti"
 groupName: "Grupa nomo"
 members: "Membroj"
 messagingWithUser: "Babili private"
@@ -310,21 +339,31 @@ title: "Titolo"
 text: "Teksto"
 enable: "Ebligi"
 next: "Sekve"
+retype: "Retajpu"
 noteOf: "Noto de {user}"
+quoteAttached: "Kun citaĵo"
+quoteQuestion: "Ĉu vi aldonas citaĵon?"
 noMessagesYet: "Ankoraŭ neniu mesaĝo"
 newMessageExists: "Vi ricevis novan mesaĝon."
-onlyOneFileCanBeAttached: "Vi povas aldoni nur unu dosieron po unu mesaĝo."
-invitationCode: "Kodo de invito"
+onlyOneFileCanBeAttached: "Oni povas aldoni nur unu dosieron po mesaĝo."
+signinRequired: "Bonvolu ensaluti"
+invitations: "Inviti"
+invitationCode: "Invita kodo"
+unavailable: "Ne disponebla"
+passwordMatched: "Konforma"
+passwordNotMatched: "Nekonforma"
 or: "Aŭ"
 language: "Lingvo"
-uiLanguage: "Lingvo de la fasado"
+uiLanguage: "Lingvo de fasado"
 aboutX: "Pri {x}"
 useOsNativeEmojis: "Oni uzas la emoĵioj de la denaska sistemo"
 youHaveNoGroups: "Neniuj grupoj"
+doing: "Traktado..."
 category: "Kategorio"
 tags: "Etikedoj"
 createAccount: "Krei konton"
 existingAccount: "Ekzista konto"
+regenerate: "Regeneri"
 fontSize: "Tipara grando"
 noFollowRequests: "Vi ne havas peto de sekvado"
 openImageInNewTab: "Fermi la bildon en nova tablo"
@@ -332,10 +371,11 @@ dashboard: "Stirpanelo"
 local: "Loka"
 remote: "Transa"
 total: "Entute"
+appearance: "Eksteraĵo"
 clientSettings: "Agordoj de kliento"
-accountSettings: "Agordoj de Konto"
+accountSettings: "Agordoj de konto"
 numberOfDays: "Nombro de tagoj"
-hideThisNote: "Kaŝi tiun noton"
+hideThisNote: "Kaŝi la noton"
 objectStorageBaseUrl: "Baza URL"
 objectStorageRegion: "Regiono"
 objectStorageUseSSL: "Oni uzas SSL"
@@ -346,11 +386,29 @@ sounds: "Sonoj"
 listen: "Aŭdi"
 none: "Neniu"
 showInPage: "Vidi en paĝo"
+popout: "Superigi"
+volume: "Laŭteco"
+masterVolume: "Baza laŭteco"
+chooseEmoji: "Elekti emoĵion"
+recentUsed: "Lastatempaj uzitaj"
+install: "Instali"
+uninstall: "Malinstali"
+installedApps: "Instalita programo"
+nothing: "Neniu"
+installedDate: "Dato de instalado"
+lastUsedDate: "Lastfoje uzita je"
+state: "Stato"
+sort: "Ordigado"
+output: "Elmeto"
+script: "Skripto"
+disablePagesScript: "Malebligi AiScripto en la paĝoj"
 deleteAllFiles: "Forviŝi ĉiujn dosierojn"
-deleteAllFilesConfirm: "Ĉu vi certas, ke vi volas forviŝi ĉiujn viajn dosierojn?"
+deleteAllFilesConfirm: "Ĉu vi certas, ke vi volas forviŝi ĉiujn dosierojn?"
 userSuspended: "Ĉi tiu uzanto estas flostigita."
 userSilenced: "Ĉi tiu uzanto estas mutigita."
 menu: "Menuo"
+addItem: "Aldoni novaĵon"
+rooms: "Ĉambro"
 deletedNote: "Forviŝita noto"
 invisibleNote: "Malpublika noto"
 visibility: "Videbleco"
@@ -358,20 +416,25 @@ poll: "Balotujo"
 useCw: "Kaŝi enhavo"
 enablePlayer: "Vidi videon"
 disablePlayer: "Fermi videon"
+expandTweet: "Disvolvi pepon"
 themeEditor: "Redaktilo de koloraroj"
-description: "Priskribe"
+description: "Priskribo"
 describeFile: "Priskribi la bildon"
+enterFileDescription: "Priskribu"
 author: "Aŭtoro"
 manage: "Administro"
 plugins: "Kromaĵoj"
 deck: "Kartaro"
+width: "Larĝeco"
+height: "Alteco"
 medium: "Meza"
 small: "Malgranda"
 edit: "Redakti"
 emailServer: "Retpoŝta servilo"
 email: "Retpoŝto"
 emailAddress: "Retpoŝta adreso"
-smtpConfig: "Agordoj de la servilo SMTP"
+smtpConfig: "Agordoj de SMTP servilo"
+smtpHost: "Gastigo"
 smtpPort: "Pordo"
 smtpUser: "Uzantnomo"
 smtpPass: "Pasvorto"
@@ -380,35 +443,46 @@ userSaysSomething: "{name} parolis ion"
 makeActive: "Aktivigi"
 display: "Vidi"
 copy: "Kopii"
+overview: "Resumo"
 database: "Datumbazo"
 channel: "Kanalo"
 create: "Krei"
 notificationSetting: "Agordoj de sciigoj"
 useGlobalSetting: "Oni uzas malloka agordo"
 fileIdOrUrl: "Dosiera identigilo aŭ URL"
+sample: "Ekzemplo"
 abuseReports: "Signaloj"
 reportAbuse: "Signalo"
 reportAbuseOf: "Signali kontraŭ {name}'(o)"
 send: "Sendi"
 openInNewTab: "Malfermi en nova langeto"
-editTheseSettingsMayBreakAccount: "Redakti tiujn agordojn estas eble damaĝi konton."
+editTheseSettingsMayBreakAccount: "Redakti ĉi tiujn agordojn povas damaĝi vian konton."
+instanceTicker: "Informoj pri la nodo kiu dissendas la noton"
+random: "Hazarde"
+system: "Sistemo"
+desktop: "Labortablo"
+createNew: "Krei novan"
+optional: "Opciaj"
 public: "Publika"
 i18nInfo: "Misskey estas tradukata en diversaj lingvoj far volontuloj. Oni povas kontribui por la tradukado ĉe {link}."
 accountInfo: "Kontaj Informoj"
-notesCount: "Numero de notoj"
-repliesCount: "Numero de respondoj senditaj"
-renotesCount: "Numero de renotoj kiun vi sendis"
-repliedCount: "Numero de respondoj ricevitaj"
-renotedCount: "Numero de renotoj kiun vi ricevis"
-followingCount: "Numero de sekvatoj"
-followersCount: "Numero de sekvantoj"
-sentReactionsCount: "Numero de sentitaj reagoj"
-receivedReactionsCount: "Numero de ricevitaj reagoj"
+notesCount: "La nombro de notoj"
+repliesCount: "La nombro de respondoj senditaj"
+renotesCount: "La nombro de notoj kiujn la uzanto plusendis"
+repliedCount: "La nombro de respondoj ricevitaj"
+renotedCount: "La nombro de uzantulaj notoj plusenditaj"
+followingCount: "La nombro de sekvatoj"
+followersCount: "La nombro de sekvantoj"
+sentReactionsCount: "La nombro de la reagoj senditaj"
+receivedReactionsCount: "La nombro de la reagoj ricevitaj"
 yes: "Jes"
 no: "Ne"
-driveFilesCount: "Numero de dosieroj sur la disko"
+driveFilesCount: "La nombro de la dosieroj ĉe la disko"
 notSet: "Ne elektita"
-noteFavoritesCount: "Numero de la preferataj notoj"
+emailVerified: "Via retpoŝto estis kontrolita."
+noteFavoritesCount: "La nombro de notoj preferataj"
+pageLikesCount: "La nombro de paĝoj kiun la uzanto preferas"
+pageLikedCount: "La nombro de uzantoj, kiuj preferas paĝon de ĉi tiu uzanto"
 contact: "Kontakto"
 makeExplorable: "Videbligi konton sur la paĝo \"Esplori\""
 duplicate: "Duobligi"
@@ -435,21 +509,25 @@ newVersionOfClientAvailable: "Nova versio de via kliento estas disponebla."
 inUse: "Uzata"
 editCode: "Redakti kodon"
 emailNotification: "Sciigoj per retpoŝto"
-publish: "Publikigi"
 inChannelSearch: "Serĉi en kanalo"
-useReactionPickerForContextMenu: "Oni malfermas reago-elektilon per dekstro-kliki"
-typingUsers: "{users} estas entajpanta(j)..."
+useReactionPickerForContextMenu: "Malfermi reago-elektilon per dekstro-klaki"
+typingUsers: "{users} nun entajpas…"
+clear: "Vakigi"
+goBack: "Reiri antaŭ"
 addDescription: "Priskribi"
 info: "Informoj"
-userInfo: "Informoj de uzanto"
+userInfo: "La informoj de uzanto"
 unknown: "Nekonata"
 online: "Surkonektita"
 offline: "Forkonektita"
-instanceBlocking: "Blokado de nodoj"
+instanceBlocking: "Bloki specifajn nodojn"
 selectAccount: "Elekti konton"
 user: "Uzantoj"
 administration: "Administro"
 accounts: "Kontoj"
+shareWithNote: "Kundividi en noto"
+ads: "Reklamaĵo"
+memo: "Memorigilo"
 high: "Alta"
 middle: "Meza"
 low: "Malalta"
@@ -459,13 +537,17 @@ sent: "Sendi"
 received: "Ricevita"
 searchResult: "Serĉorezultoj"
 hashtags: "Kradvorto"
+troubleshooting: "Problemsolvi"
 learnMore: "Lernu pli"
 translate: "Traduki"
 translatedFrom: "Tradukita el {x}"
+controllPanel: "Ŝaltpodio"
 _docs:
  continueReading: "Legi plu"
  features: "Funkcioj"
  admin: "Administro"
+_ad:
+  back: "Nuligi"
 _gallery:
  liked: "Ŝatitaj notoj"
  like: "Ŝati"
@@ -485,7 +567,7 @@ _registry:
 _aboutMisskey:
  about: "Misskey estas malfermitkoda programo evoluigata de syuilo ekde la 2014."
  contributors: "Precipaj kontribuantoj"
-  allContributors: "Ĉiuj kontribuintoj"
+  allContributors: "Ĉiuj kontribuantoj"
  source: "Fontkodo"
  translation: "Traduki Misskey'on"
  patrons: "Mecenatoj"
@@ -509,6 +591,7 @@ _mfm:
  x2: "Granda"
  x3: "Grandega"
  x4: "Pli grandega"
+  font: "Presliteraro"
 _reversi:
  total: "Entute"
 _instanceTicker:
@@ -518,26 +601,34 @@ _instanceTicker:
 _channel:
  create: "Krei kanalon"
  edit: "Redakti kanalon"
+  setBanner: "Apliki standardan bildon"
+  removeBanner: "Forviŝi la standardan bildon"
  owned: "Posedaĵo"
  following: "Sekvante"
  usersCount: "{n} partoprenanto(j)"
 _menuDisplay:
+  top: "Supro"
  hide: "Kaŝi"
 _wordMute:
  muteWords: "Silentigitaj vortoj"
+  soft: "En kliento"
+  hard: "En servilo"
  mutedNotes: "Silentigitaj notoj"
 _theme:
  manage: "Administri kolorarojn"
-  code: "Kodo de koloraro"
-  description: "Priskribe"
+  code: "Kolorara kodo"
+  description: "Priskribo"
+  color: "Koloro"
  darken: "Malbrileco"
  lighten: "Brileco"
  keys:
    bg: "Fono"
    navBg: "Fono de flanka stango"
+    link: "Ligilo"
    hashtag: "Kradvorto"
    mention: "Mencioj"
-    renote: "Renoto"
+    mentionMe: "Mencio al vi"
+    renote: "Noto plusendita"
    buttonBg: "Fono de butono"
    driveFolderBg: "Fono de dosierujo de la disko"
    messageBg: "Fono de retbabilejo"
@@ -569,29 +660,33 @@ _tutorial:
  step1_1: "Bonvenon."
  step7_2: "Se vi volas scii pli pri Misskey, rigardu la fakon {help}."
  step7_3: "Do, bonvolu amuziĝi Misskey'on🚀"
+_2fa:
+  registerKey: "Nove registri ŝlosilon"
 _permissions:
-  "write:account": "Redakti Informojn de via konto"
+  "read:account": "Legado de la informoj pri via konto"
+  "write:account": "Redatado de la informoj de via konto"
  "read:blocks": "Vidi vian liston de uzantoj blokitaj"
-  "write:blocks": "Redakti vian liston de uzantoj blokitaj"
-  "read:drive": "Operacio por legi la informon de dosiero en via disko de Misskey"
+  "write:blocks": "Redakti vian liston de blokitoj"
+  "read:drive": "Legi vian diskon"
  "write:drive": "Ĉia operacio por skribi, forviŝi, aŭ alimaniere ŝanĝi la informon de dosiero en via disko de Misskey"
-  "read:favorites": "Vidi vian liston de preferataĵoj"
-  "write:favorites": "Redakti vian liston de preferataĵoj."
-  "read:following": "Vidi tiun kiun vi sekvas"
+  "read:favorites": "Vidi vian liston de preferaĵoj"
+  "write:favorites": "Redakti vian liston de preferaĵoj"
+  "read:following": "Vidi la infomaciojn pri tio, kion vi sekvas"
  "write:following": "Sekvi aŭ malsekvi alian uzanton"
  "read:messaging": "Vidi vian retbabiladon"
-  "read:mutes": "Vidi vian liston de silentigoj"
-  "write:mutes": "Redakti vian liston de silentigoj"
+  "write:messaging": "Retbabilejo"
+  "read:mutes": "Vidi vian liston de silentigitoj"
+  "write:mutes": "Redakti vian liston de silentigitoj"
  "write:notes": "Krei / Forviŝi noton"
  "read:notifications": "Vidi sciigojn"
+  "write:notifications": "Manipulado por viaj sciigoj"
  "read:reactions": "Vidi reagojn"
  "write:reactions": "Redakti viajn reagojn"
-  "read:pages": "Vidi via paĝojn"
  "read:page-likes": "Vidi ŝatojn de paĝo"
  "read:channels": "Vidi kanalojn"
 _antennaSources:
  all: "Ĉiuj notoj"
-  homeTimeline: "Notoj far uzantoj, kiujn vi sekvas"
+  homeTimeline: "Notoj far uzantoj kiujn vi sekvas"
 _weekday:
  sunday: "dimanĉo"
  monday: "lundo"
@@ -622,21 +717,25 @@ _poll:
  vote: "Baloti"
  closed: "Oni jam balotis ĝin"
 _visibility:
-  publicDescription: "Via noto aperiĝos sur la templinio Malloka"
+  public: "Publika"
+  publicDescription: "Via noto estos videbla de ĉiuj uzantoj"
  home: "Hejma"
-  homeDescription: "Elsendi nur sur la templinio Hejmo"
-  followers: "Sekvantoj"
-  followersDescription: "Nur al sekvantoj al mi"
-  specified: "Rekta"
+  homeDescription: "Dissendi nur sur hejma templinio"
+  followers: "Nur al sekvantoj"
+  followersDescription: "Publiki nur al viaj sekvantoj"
+  specified: "Rekte"
+  specifiedDescription: "Montri nur al specifaj uzantoj"
  localOnly: "Nur loka"
  localOnlyDescription: "Ne montri al transaj uzantoj"
 _postForm:
-  replyPlaceholder: "Respondi al tiu noto..."
-  quotePlaceholder: "Citado tiun noton..."
-  channelPlaceholder: "Sendi sur la kanalo"
+  replyPlaceholder: "Respondi la noton…"
+  quotePlaceholder: "Citi la noton…"
+  channelPlaceholder: "Mencii en kanalo…"
 _profile:
  name: "Nomo"
  username: "Uzantnomo"
+  description: "Sinprezento"
+  metadata: "Kromaj informoj"
  metadataEdit: "Redakti kromaj informoj"
  changeAvatar: "Ŝanĝi profilbildon"
  changeBanner: "Ŝanĝi standardon"
@@ -644,14 +743,14 @@ _exportOrImport:
  allNotes: "Ĉiuj notoj"
  followingList: "Sekvataj uzantoj"
  muteList: "Silentigoj"
-  blockingList: "Blokitaj uzantoj"
+  blockingList: "Blokitoj"
  userLists: "Listoj"
 _charts:
-  federationInstancesTotal: "Tuta numero de nodoj kunfederantaj"
-  usersTotal: "Tuta numero de uzantoj"
-  activeUsers: "Numero de aktivaj uzantoj"
-  notesTotal: "Tuta numero de notoj"
-  filesTotal: "Tuta numero de dosieroj"
+  federationInstancesTotal: "La totala nombro de nodoj kunfederantaj"
+  usersTotal: "La totala nombro de la uzantoj"
+  activeUsers: "La nombro de la uzantoj aktivaj"
+  notesTotal: "La totala nombro de notoj"
+  filesTotal: "La totala nombro de la dosieroj"
 _timelines:
  home: "Hejma"
  local: "Loka"
@@ -661,17 +760,34 @@ _rooms:
  translate: "Movi"
  chooseImage: "Elekti bildon"
  _furnitures:
+    bed: "Lito"
+    low-table: "Malaltotablo"
+    desk: "Skribotablo"
+    chair: "Seĝo"
+    chair2: "Seĝo 2"
+    pc: "Komputilo"
+    eraser: "Skrapileto"
+    pencil: "Krajono"
+    pudding: "Flaŭno"
+    book: "Libro"
+    book2: "Libro 2"
+    piano: "Piano"
+    facial-tissue: "Tualetpaperejo"
    server: "Servilo"
-    moon: "La luno"
+    moon: "Luno"
+    monitor: "Monitoro"
+    keyboard: "Klavaro"
+    doll-ai: "Pupa Ai"
 _pages:
+  newPage: "Krei novan paĝon"
  editPage: "Redakti paĝon"
-  deleted: "La paĝo estas forigita."
+  deleted: "Oni forviŝis la paĝon."
  editThisPage: "Redakti la paĝon"
-  viewPage: "Vidi via paĝojn"
+  viewPage: "Vidi viajn paĝojn"
  my: "Miaj paĝoj"
  featured: "Ravaĵoj"
  contents: "Enhavo"
-  content: "Blokado de paĝo"
+  content: "Paĝo en bloko"
  url: "URL de paĝo"
  alignCenter: "Centrigi"
  chooseBlock: "Aldoni blokon"
@@ -683,8 +799,9 @@ _pages:
    button: "Butono"
    _post:
      canvasId: "Kanvasa identigilo"
-    textInput: "Enigo el teksto"
-    textareaInput: "Enigo el teksto en multaj linioj"
+    textInput: "Enmeto el teksto"
+    textareaInput: "Enmeto el teksto en multaj linioj"
+    numberInput: "Nombra enmeto"
    _numberInput:
      text: "Titolo"
    _canvas:
@@ -733,23 +850,34 @@ _pages:
        arg1: "Teksto"
      _splitStrByLine:
        arg1: "Teksto"
+      _fn:
+        slots: "Juntoj"
+        arg1: "Elmeto"
+    thereIsEmptySlot: "La junto {slot} estas malplena!"
    types:
      string: "Teksto"
      array: "Listoj"
      stringArray: "List de teksto"
+    emptySlot: "Malplena junto"
+    argVariables: "Eniga junto"
 _notification:
  fileUploaded: "La dosiero sukcese alŝutiĝis."
-  youRenoted: "Renoto farita de {name}"
+  youGotMention: "{name} mencis"
+  youGotReply: "{name} respondis"
+  youGotQuote: "{name} citis"
+  youRenoted: "{name} plusendis"
  youGotPoll: "{name} balotis"
  youGotMessagingMessageFromUser: "{name} sentis mesaĝon al vi."
  youGotMessagingMessageFromGroup: "Retbabilan mesaĝon oni sendis al la grupo {name}"
-  youWereFollowed: "sksekvis vin"
+  youWereFollowed: "eksekvis vin"
  youReceivedFollowRequest: "Vi ricevis peton de sekvado"
-  yourFollowRequestAccepted: "Via peto por sekvado estis akceptita."
+  yourFollowRequestAccepted: "Via peto de sekvado estis akceptita."
  _types:
-    follow: "Sekvatoj"
+    all: "Ĉio"
+    follow: "Nova sekvatoj"
    mention: "Mencioj"
-    renote: "Fari renoton"
+    reply: "Respondoj"
+    renote: "Notoj plusenditaj"
    quote: "Citi"
    reaction: "Reagoj"
    receiveFollowRequest: "Ricevita peton de sekvado"
@@ -762,4 +890,4 @@ _deck:
    antenna: "Antenoj"
    list: "Listoj"
    mentions: "Al vi"
-    direct: "Notoj rektaj"
+    direct: "Rekte"
--- a/locales/es-ES.yml
+++ b/locales/es-ES.yml
@@ -7,6 +7,7 @@ search: "Buscar"
 notifications: "Notificaciones"
 username: "Nombre de usuario"
 password: "Contraseña"
+forgotPassword: "Olvidé mi Contraseña"
 fetchingAsApObject: "Buscando en el fediverso"
 ok: "OK"
 gotIt: "Entendido"
@@ -279,6 +280,7 @@ emptyDrive: "El drive está vacío"
 emptyFolder: "La carpeta está vacía"
 unableToDelete: "No se puede borrar"
 inputNewFileName: "Ingrese un nuevo nombre de archivo"
+inputNewDescription: "Ingrese nueva descripción"
 inputNewFolderName: "Ingrese un nuevo nombre de la carpeta"
 circularReferenceFolder: "La carpeta de destino es una sub-carpeta de la carpeta que quieres mover."
 hasChildFilesOrFolders: "No se puede borrar esta carpeta. No está vacía."
@@ -310,6 +312,8 @@ monthX: "Mes {month}"
 yearX: "Año {year}"
 pages: "Páginas"
 integration: "Integración"
+connectService: "Conectar"
+disconnectService: "Desconectar"
 enableLocalTimeline: "Habilitar linea de tiempo local"
 enableGlobalTimeline: "Habilitar linea de tiempo global"
 disablingTimelinesInfo: "Aunque se desactiven estas lineas de tiempo, por conveniencia el administrador y los moderadores pueden seguir usándolos"
@@ -323,6 +327,7 @@ driveCapacityPerRemoteAccount: "Capacidad del drive por usuario remoto"
 inMb: "En megabytes"
 iconUrl: "URL de la imagen del avatar"
 bannerUrl: "URL de la imagen del banner"
+backgroundImageUrl: "URL de la imagen de fondo"
 basicInfo: "Información básica"
 pinnedUsers: "Usuarios fijados"
 pinnedUsersDescription: "Describir los usuarios que quiere fijar en la página \"Descubrir\" separados por una linea nueva"
@@ -524,6 +529,9 @@ removeAllFollowing: "Retener todos los siguientes"
 removeAllFollowingDescription: "Cancelar todos los siguientes del servidor {host}. Ejecutar en caso de que esta instancia haya dejado de existir"
 userSuspended: "Este usuario ha sido suspendido."
 userSilenced: "Este usuario ha sido silenciado."
+yourAccountSuspendedTitle: "Esta cuenta ha sido suspendida"
+yourAccountSuspendedDescription: "Esta cuenta ha sido suspendida debido a violaciones de los términos de servicio del servidor y otras razones. Para más información, póngase en contacto con el administrador. Por favor, no cree una nueva cuenta."
+menu: "Menú"
 divider: "Divisor"
 addItem: "Agregar elemento"
 rooms: "Cuartos"
@@ -543,6 +551,8 @@ disablePlayer: "Cerrar reproductor"
 expandTweet: "Expandir tweet"
 themeEditor: "Editor de temas"
 description: "Descripción"
+describeFile: "Añade una descripción"
+enterFileDescription: "Introducir un título"
 author: "Autor"
 leaveConfirm: "Hay modificaciones sin guardar. ¿Desea descartarlas?"
 manage: "Administrar"
@@ -645,29 +655,90 @@ driveFilesCount: "Cantidad de archivos en el drive"
 driveUsage: "Uso del drive"
 noCrawle: "Rechazar indexación del crawler"
 noCrawleDescription: "Pedir a los motores de búsqueda que no indexen tu perfil, notas, páginas, etc."
+lockedAccountInfo: "A menos que configures la visibilidad de tus notas como \"Sólo seguidores\", tus notas serán visibles para cualquiera, incluso si requieres que los seguidores sean aprobados manualmente."
 alwaysMarkSensitive: "Marcar los medios de comunicación como contenido sensible por defecto"
+loadRawImages: "Cargar las imágenes originales en lugar de mostrar las miniaturas"
+disableShowingAnimatedImages: "No reproducir imágenes animadas"
 verificationEmailSent: "Se le ha enviado un correo electrónico de confirmación. Por favor, acceda al enlace proporcionado en el correo electrónico para completar la configuración."
 notSet: "Sin especificar"
 emailVerified: "Su dirección de correo electrónico ha sido verificada."
 noteFavoritesCount: "Número de notas favoritas"
 pageLikesCount: "Número de favoritos en la página"
 pageLikedCount: "Número de favoritos de su página"
+reversiCount: "Numero de partidas Reversi"
 contact: "Contacto"
+useSystemFont: "Utilizar la tipografía por defecto del sistema"
 clips: "Clip"
+experimentalFeatures: "Características experimentales"
+developer: "Desarrolladores"
+makeExplorable: "Hacer visible la cuenta en \"Explorar\""
+makeExplorableDescription: "Si desactiva esta opción, su cuenta no aparecerá en la sección \"Explorar\"."
+showGapBetweenNotesInTimeline: "Mostrar un intervalo entre notas en la línea de tiempo"
+duplicate: "Duplicar"
+left: "Izquierda"
+center: "Centrar"
+wide: "Ancho"
+narrow: "Estrecho"
+reloadToApplySetting: "Esta configuración sólo se aplicará después de recargar la página. ¿Recargar ahora?"
+showTitlebar: "Mostrar la barra de título"
 clearCache: "Limpiar caché"
+onlineUsersCount: "{n} usuarios en línea"
+nUsers: "{n} Usuarios"
+nNotes: "{n} Notas"
+sendErrorReports: "Envíar informe de errores"
+sendErrorReportsDescription: "Si habilita esta opción, ayudará a mejorar la calidad de Misskey compartiendo información detallada sobre los errores cuando se produzca un problema.\nEsto incluye información como la versión de su sistema operativo, el tipo de navegador que utiliza, su historial de actividad, etc."
+myTheme: "Mi Tema"
 backgroundColor: "Fondo"
 accentColor: "Acento"
 textColor: "Texto"
+saveAs: "Guardar como…"
+advanced: "Avanzado"
 value: "Valores"
+createdAt: "Fecha de creación"
+updatedAt: "Actualizado"
+saveConfirm: "¿Guardar cambios?"
+deleteConfirm: "¿Desea eliminarlo?"
+invalidValue: "Este no es un valor válido."
+registry: "Registro"
+closeAccount: "Cerrar cuenta"
+currentVersion: "Versión actual"
+latestVersion: "Última versión"
+youAreRunningUpToDateClient: "Está utilizando la versión más reciente de su cliente."
+newVersionOfClientAvailable: "Hay una versión más nueva de su cliente disponible."
+usageAmount: "Uso"
+capacity: "Capacidad"
+inUse: "Usado"
+editCode: "Editar código"
 goBack: "Deseleccionar"
 info: "Información"
 user: "Usuarios"
 administration: "Administrar"
 expiration: "Termina el"
 middle: "Mediano"
+customCssWarn: "Este ajuste sólo debe utilizarse si se sabe lo que hace. Introducir valores inadecuados puede hacer que el cliente deje de funcionar con normalidad."
 global: "Global"
+squareAvatars: "Mostrar iconos cuadrados"
 sent: "Enviar"
+received: "Recibido"
+searchResult: "Resultados de búsqueda"
 hashtags: "Hashtag"
+troubleshooting: "Solución de problemas"
+useBlurEffect: "Utilizar efecto de desenfoque en la interfaz de usuario"
+learnMore: "Ver más"
+misskeyUpdated: "¡Misskey ha sido actualizado!"
+whatIsNew: "Mostrar cambios"
+translate: "Traducir"
+translatedFrom: "Traducido de {x}"
+accountDeletionInProgress: "La eliminación de la cuenta está en curso"
+usernameInfo: "Un nombre que identifique su cuenta de otras en este servidor.  Puede utilizar el alfabeto (a~z, A~Z), dígitos (0~9) o guiones bajos (_). Los nombres de usuario no se pueden cambiar posteriormente."
+aiChanMode: "Modo Ai"
+keepCw: "Mantener la advertencia de contenido"
+pubSub: "Cuentas Pub/Sub"
+lastCommunication: "Última comunicación"
+resolved: "Resuelto"
+unresolved: "Sin resolver"
+_accountDelete:
+  accountDelete: "Eliminar Cuenta"
 _docs:
  admin: "Administrar"
 _ad:
--- a/locales/fr-FR.yml
+++ b/locales/fr-FR.yml
@@ -81,6 +81,8 @@ somethingHappened: "Une erreur est survenue"
 retry: "Réessayer"
 pageLoadError: "Le chargement de la page a échoué"
 pageLoadErrorDescription: "Cela est généralement causé par le cache du navigateur ou par un problème réseau. Veuillez vider votre cache ou attendre un peu et réessayer."
+serverIsDead: "Le serveur ne répond pas. Patientez quelques instants puis essayez à nouveau."
+youShouldUpgradeClient: "Si la page ne s'affiche pas correctement, rechargez-la pour mettre votre client à jour."
 enterListName: "Nom de la liste"
 privacy: "Confidentialité"
 makeFollowManuallyApprove: "Accepter manuellement les demandes d’abonnement"
@@ -136,7 +138,7 @@ settingGuide: "Configuration proposée"
 cacheRemoteFiles: "Mise en cache des fichiers distants"
 cacheRemoteFilesDescription: "Lorsque cette option est désactivée, les fichiers distants sont chargés directement depuis l’instance distante. La désactiver diminuera certes l’utilisation de l’espace de stockage local mais augmentera le trafic réseau puisque les miniatures ne seront plus générées."
 flagAsBot: "Ce compte est un robot"
-flagAsBotDescription: "Si ce compte est géré de manière automatisée , définissez cette option. Si elle est activée, elle agira comme un marqueur pour les autres développeurs afin d'éviter des chaînes d'interaction sans fin avec d'autres robots et d'ajuster les systèmes internes de Misskey pour traiter ce compte comme un robot."
+flagAsBotDescription: "Si ce compte est géré de manière automatisée, choisissez cette option. Si elle est activée, elle agira comme un marqueur pour les autres développeurs afin d'éviter des chaînes d'interaction sans fin avec d'autres robots et d'ajuster les systèmes internes de Misskey pour traiter ce compte comme un robot."
 flagAsCat: "Ce compte est un chat"
 flagAsCatDescription: "Activer l'option \" Je suis un chat \" pour ce compte."
 autoAcceptFollowed: "Accepter automatiquement les demandes d’abonnement venant d’utilisateur·rice·s que vous suivez"
@@ -377,7 +379,7 @@ aboutMisskey: "À propos de Misskey"
 administrator: "Administrateur"
 token: "Jeton"
 twoStepAuthentication: "Authentification à deux facteurs"
-moderator: "Modérateurs"
+moderator: "Modérateur·rice·s"
 nUsersMentioned: "{n} utilisateur·rice·s mentionné·e·s"
 securityKey: "Clé de sécurité"
 securityKeyName: "Nom de la clé"
@@ -495,7 +497,7 @@ objectStorageSetPublicRead: "Régler sur « public » lors de l'envoi"
 serverLogs: "Journal du serveur"
 deleteAll: "Supprimer tout"
 showFixedPostForm: "Afficher le formulaire de publication en haut du fil d'actualité"
-newNoteRecived: "Vous avez reçu une nouvelle note"
+newNoteRecived: "Voir les nouvelles notes"
 sounds: "Sons"
 listen: "Écouter"
 none: "Rien"
@@ -529,6 +531,8 @@ removeAllFollowing: "Retenir tous les abonnements"
 removeAllFollowingDescription: "Se désabonner de tous les comptes de {host}. Veuillez lancer cette action uniquement si l’instance n’existe plus."
 userSuspended: "Cet·te utilisateur·rice a été suspendu·e."
 userSilenced: "Cette utilisateur·trice a été mis·e en sourdine."
+yourAccountSuspendedTitle: "Ce compte est suspendu"
+yourAccountSuspendedDescription: "Ce compte est suspendu car vous avez enfreint les conditions d'utilisation de l'instance, ou pour un motif similaire. Si vous souhaitez connaître en détail les raisons de cette suspension, renseignez-vous auprès de l'administrateur·rice de votre instance. Merci de ne pas créer de nouveau compte."
 menu: "Menu"
 divider: "Séparateur"
 addItem: "Ajouter un élément"
@@ -767,6 +771,7 @@ customCssWarn: "Utilisez cette fonctionnalité uniquement si vous savez exacteme
 global: "Global"
 squareAvatars: "Avatars carrés"
 sent: "Envoyer"
+received: "Reçu"
 searchResult: "Résultats de la recherche"
 hashtags: "Hashtags"
 troubleshooting: "Résolution de problèmes"
@@ -778,7 +783,21 @@ translate: "Traduire"
 translatedFrom: "Traduit depuis {x}"
 accountDeletionInProgress: "La suppression de votre compte est en cours"
 usernameInfo: "C'est un nom qui identifie votre compte sur l'instance de manière unique. Vous pouvez utiliser des lettres de l'alphabet (minuscules et majuscules), des chiffres (de 0 à 9), ou bien le tiret « _ ». Vous ne pourrez pas modifier votre nom d'utilisateur·rice par la suite."
+aiChanMode: "Mode Ai"
 keepCw: "Garder le CW"
+pubSub: "Comptes Pub/Sub"
+lastCommunication: "Dernière communication"
+resolved: "Résolu"
+unresolved: "En attente"
+emailRequiredForSignup: "Une adresse e-mail est nécessaire pour créer un compte"
+unread: "Non lu"
+filter: "Filtre"
+controllPanel: "Panneau de contrôle"
+manageAccounts: "Gérer les comptes"
+_signup:
+  almostThere: "Bientôt fini"
+  emailAddressInfo: "Insérez votre adresse e-mail."
+  emailSent: "Un courriel de confirmation vient d'être envoyé à l'adresse que vous avez renseignée ({email}). Cliquez sur le lien contenu dans le message pour terminer la création de votre compte."
 _accountDelete:
  accountDelete: "Supprimer le compte"
  mayTakeTime: "La suppression de compte nécessitant beaucoup de ressources, l'exécution du processus peut prendre du temps, en fonction de la quantité de contenus que vous avez créés et du nombre de fichiers que vous avez téléversés."
@@ -893,6 +912,8 @@ _mfm:
  fontDescription: "Il est possible de choisir la police."
  rainbow: "Arc-en-ciel"
  rainbowDescription: "Permet d'afficher le contenu en couleurs arc-en-ciel."
+  sparkle: "Paillettes"
+  sparkleDescription: "Ajoute un effet scintillant au contenu."
 _reversi:
  reversi: "Reversi"
  gameSettings: "Réglages de la partie"
@@ -1119,6 +1140,10 @@ _permissions:
  "write:user-groups": "Éditer les groupes des utilisateur·rice·s"
  "read:channels": "Lire les canaux"
  "write:channels": "Gérer les canaux"
+  "read:gallery": "Voir la galerie"
+  "write:gallery": "Éditer la galerie"
+  "read:gallery-likes": "Voir les mentions « J'aime » dans la galerie"
+  "write:gallery-likes": "Gérer les mentions « J'aime » dans la galerie"
 _auth:
  shareAccess: "Autoriser \"{name}\" à accéder à votre compte ?"
  shareAccessAsk: "Voulez-vous vraiment autoriser cette application à accéder à votre compte?"
@@ -1159,6 +1184,7 @@ _widgets:
  jobQueue: "File d’attente"
  serverMetric: "Statistiques du serveur"
  aiscript: "Console AiScript"
+  aichan: "Ai"
 _cw:
  hide: "Masquer"
  show: "Afficher plus …"
@@ -1231,7 +1257,7 @@ _charts:
  federationInstancesTotal: "Nombre total d'instances fédérées"
  usersIncDec: "Variation du nombre d'utilisateur·rice·s"
  usersTotal: "Nombre des utilisateur·rice·s au total"
-  activeUsers: "Utilisateur·rice·s actif·ve·s"
+  activeUsers: "Nombre d'utilisateurices actif·ve·s"
  notesIncDec: "Variation du nombre des notes"
  localNotesIncDec: "Variation du nombre de notes locales"
  remoteNotesIncDec: "Variation du nombre de notes distantes"
--- a/locales/id-ID.yml
+++ b/locales/id-ID.yml
@@ -780,6 +780,7 @@ translatedFrom: "Terjemahkan dari {x}"
 accountDeletionInProgress: "Penghapusan akun sedang dalam proses"
 usernameInfo: "Nama yang mengidentifikasikan akun kamu dari yang lain pada server ini. Kamu dapat menggunakan alfabet (a~z, A~Z), digit (0~9) atau garis bawah (_). Username tidak dapat diubah setelahnya."
 keepCw: "Biarkan Peringatan Konten"
+controllPanel: "Panel kontrol"
 _accountDelete:
  accountDelete: "Hapus akun"
  mayTakeTime: "Karena penghapusan akun merupakan proses yang berat dan intensif, kemungkinan dapat membutuhkan waktu untuk menyelesaikan tergantung daripada berapa banyak konten yang kamu buat dan berapa banyak berkas yang telah kamu unggah."
--- a/locales/it-IT.yml
+++ b/locales/it-IT.yml
@@ -482,7 +482,7 @@ objectStorageSetPublicRead: "Imposta \"visibilità pubblica\" al momento di cari
 serverLogs: "Log del server"
 deleteAll: "Cancella cronologia"
 showFixedPostForm: "Visualizzare la finestra di pubblicazione in cima alla timeline"
-newNoteRecived: "Nuova nota ricevuta"
+newNoteRecived: "Vedi le nuove note"
 sounds: "Impostazioni suoni"
 listen: "Ascolta"
 none: "Niente"
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -81,6 +81,8 @@ somethingHappened: "問題が発生しました"
 retry: "再試行"
 pageLoadError: "ページの読み込みに失敗しました。"
 pageLoadErrorDescription: "これは通常、ネットワークまたはブラウザキャッシュが原因です。キャッシュをクリアするか、しばらく待ってから再度試してください。"
+serverIsDead: "サーバーの応答がありません。しばらく待ってから再度試してください。"
+youShouldUpgradeClient: "このページを表示するためには、リロードして新しいバージョンのクライアントをご利用ください。"
 enterListName: "リスト名を入力"
 privacy: "プライバシー"
 makeFollowManuallyApprove: "フォローを承認制にする"
@@ -529,6 +531,8 @@ removeAllFollowing: "フォローを全解除"
 removeAllFollowingDescription: "{host}からのフォローをすべて解除します。そのインスタンスがもう存在しなくなった場合などに実行してください。"
 userSuspended: "このユーザーは凍結されています。"
 userSilenced: "このユーザーはサイレンスされています。"
+yourAccountSuspendedTitle: "アカウントが凍結されています"
+yourAccountSuspendedDescription: "このアカウントは、サーバーの利用規約に違反したなどの理由により、凍結されています。詳細については管理者までお問い合わせください。新しいアカウントを作らないでください。"
 menu: "メニュー"
 divider: "分割線"
 addItem: "項目を追加"
@@ -762,6 +766,7 @@ middle: "中"
 low: "低"
 emailNotConfiguredWarning: "メールアドレスの設定がされていません。"
 ratio: "比率"
+previewNoteText: "本文をプレビュー"
 customCss: "カスタムCSS"
 customCssWarn: "この設定は必ず知識のある方が行ってください。不適切な設定を行うとクライアントが正常に使用できなくなる恐れがあります。"
 global: "グローバル"
@@ -785,6 +790,18 @@ pubSub: "Pub/Subのアカウント"
 lastCommunication: "直近の通信"
 resolved: "解決済み"
 unresolved: "未解決"
+itsOn: "オンになっています"
+itsOff: "オフになっています"
+emailRequiredForSignup: "アカウント登録にメールアドレスを必須にする"
+unread: "未読"
+filter: "フィルタ"
+controllPanel: "コントロールパネル"
+manageAccounts: "アカウントを管理"
+
+_signup:
+  almostThere: "ほとんど完了です"
+  emailAddressInfo: "あなたが使っているメールアドレスを入力してください。"
+  emailSent: "入力されたメールアドレス({email})宛に確認のメールが送信されました。メールに記載されたリンクにアクセスすると、アカウントの作成が完了します。"

 _accountDelete:
  accountDelete: "アカウントの削除"
@@ -910,6 +927,8 @@ _mfm:
  fontDescription: "内容のフォントを指定することができます。"
  rainbow: "レインボー"
  rainbowDescription: "内容をレインボーにします。"
+  sparkle: "キラキラ"
+  sparkleDescription: "キラキラしたパーティクルのエフェクトを追加します。"

 _reversi:
  reversi: "リバーシ"
@@ -1150,6 +1169,10 @@ _permissions:
  "write:user-groups": "ユーザーグループを操作する"
  "read:channels": "チャンネルを見る"
  "write:channels": "チャンネルを操作する"
+  "read:gallery": "ギャラリーを見る"
+  "write:gallery": "ギャラリーを操作する"
+  "read:gallery-likes": "ギャラリーのいいねを見る"
+  "write:gallery-likes": "ギャラリーのいいねを操作する"

 _auth:
  shareAccess: "「{name}」がアカウントにアクセスすることを許可しますか？"
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@@ -245,7 +245,7 @@ messageRead: "もう読んだ"
 noMoreHistory: "これより過去の履歴はあらへんで"
 startMessaging: "チャットやるで"
 nUsersRead: "{n}人が読んでもうた"
-agreeTo: "{0}はええで"
+agreeTo: "{0}に同意したで"
 tos: "利用規約"
 start: "始める"
 home: "ホーム"
@@ -346,7 +346,7 @@ antennaSource: "受信ソース(このソースは食われへん)"
 antennaKeywords: "受信キーワード"
 antennaExcludeKeywords: "除外キーワード"
 antennaKeywordsDescription: "スペースで区切ったるとAND指定で、改行で区切ったるとOR指定や"
-notifyAntenna: "新しいノートを追加すんで"
+notifyAntenna: "新しいノートを通知すんで"
 withFileAntenna: "なんか添付されたノートだけ"
 enableServiceworker: "ServiceWorkerをつこて"
 antennaUsersDescription: "ユーザー名を改行で区切ったってな"
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -529,6 +529,8 @@ removeAllFollowing: "모든 팔로잉 해제"
 removeAllFollowingDescription: "{host}(으)로부터 모든 팔로잉을 해제합니다. 해당 인스턴스가 더 이상 존재하지 않게 된 경우 등에 실행해 주세요."
 userSuspended: "이 계정은 정지된 상태입니다."
 userSilenced: "이 계정은 사일런스된 상태입니다."
+yourAccountSuspendedTitle: "계정이 정지되었습니다"
+yourAccountSuspendedDescription: "이 계정은 서버의 이용 약관을 위반하거나, 기타 다른 이유로 인해 정지되었습니다. 자세한 사항은 관리자에게 문의해 주십시오. 계정을 새로 생성하지 마십시오."
 menu: "메뉴"
 divider: "구분선"
 addItem: "항목 추가"
@@ -779,6 +781,13 @@ translate: "번역"
 translatedFrom: "{x}에서 번역"
 accountDeletionInProgress: "계정 삭제 작업을 진행하고 있습니다"
 usernameInfo: "서버상에서 계정을 식별하기 위한 이름. 알파벳(a~z, A~Z), 숫자(0~9) 및 언더바(_)를 사용할 수 있습니다. 사용자명은 나중에 변경할 수 없습니다."
+aiChanMode: "아이 모드"
+keepCw: "CW 유지하기"
+pubSub: "Pub/Sub 계정"
+lastCommunication: "마지막 통신"
+resolved: "해결됨"
+unresolved: "해결되지 않음"
+controllPanel: "제어판"
 _accountDelete:
  accountDelete: "계정 삭제"
  mayTakeTime: "계정 삭제는 서버에 부하를 가하기 때문에, 작성한 콘텐츠나 업로드한 파일의 수가 많으면 완료까지 시간이 걸릴 수 있습니다."
@@ -893,6 +902,8 @@ _mfm:
  fontDescription: "내용의 글꼴을 지정할 수 있습니다."
  rainbow: "무지개"
  rainbowDescription: "내용을 무지개로 표시합니다."
+  sparkle: "반짝반짝"
+  sparkleDescription: "반짝이는 파티클 효과를 추가합니다."
 _reversi:
  reversi: "리버시"
  gameSettings: "대국 설정"
@@ -1114,11 +1125,15 @@ _permissions:
  "read:pages": "페이지를 봅니다"
  "write:pages": "페이지를 수정합니다"
  "read:page-likes": "페이지의 좋아요를 확인합니다"
-  "write:page-likes": "페이지의 좋아요를 추가하거나 삭제합니다"
+  "write:page-likes": "페이지에 좋아요를 추가하거나 취소합니다"
  "read:user-groups": "유저 그룹을 조회합니다"
  "write:user-groups": "유저 그룹을 만들거나, 초대하거나, 이름을 변경하거나, 양도하거나, 삭제합니다"
  "read:channels": "채널을 보기"
-  "write:channels": "채널을 변경하기"
+  "write:channels": "채널을 추가하거나 삭제합니다"
+  "read:gallery": "갤러리를 봅니다"
+  "write:gallery": "갤러리를 추가하거나 삭제합니다"
+  "read:gallery-likes": "갤러리의 좋아요를 확인합니다"
+  "write:gallery-likes": "갤러리에 좋아요를 추가하거나 취소합니다"
 _auth:
  shareAccess: "\"{name}\" 이 계정에 접근하는 것을 허용하시겠습니까?"
  shareAccessAsk: "이 애플리케이션이 계정에 접근하는 것을 허용하시겠습니까?"
@@ -1159,6 +1174,7 @@ _widgets:
  jobQueue: "작업 대기열"
  serverMetric: "서버 통계"
  aiscript: "AiScript 콘솔"
+  aichan: "아이"
 _cw:
  hide: "숨기기"
  show: "더 보기"
--- a/locales/ru-RU.yml
+++ b/locales/ru-RU.yml
@@ -81,6 +81,8 @@ somethingHappened: "Что-то пошло не так"
 retry: "Повторить попытку"
 pageLoadError: "Не удалось загрузить страницу"
 pageLoadErrorDescription: "Обычно это случается из-за сбоев в сети или кэша браузера. Попробуйте очистить кэш, или подождать пару минут, а потом попытаться загрузить страницу снова."
+serverIsDead: "Ответа от сервера нет. Пожалуйста, подождите немного и повторите попытку."
+youShouldUpgradeClient: "Чтобы просмотреть эту страницу, пожалуйста, обновите ее."
 enterListName: "Название списка"
 privacy: "Конфиденциальность"
 makeFollowManuallyApprove: "Принимать подписчиков вручную"
@@ -529,6 +531,8 @@ removeAllFollowing: "Удалить всех подписчиков"
 removeAllFollowingDescription: "Отменить все подписки с домена {host}? Пожалуйста, применяйте это действие, если инстанс больше не существует."
 userSuspended: "Эта учётная запись заморожена"
 userSilenced: "Этот пользователь был заглушен"
+yourAccountSuspendedTitle: "Эта учетная запись заблокирована"
+yourAccountSuspendedDescription: "Эта учетная запись была заблокирована из-за нарушения условий предоставления услуг сервера. Свяжитесь с администратором, если вы хотите узнать более подробную причину. Пожалуйста, не создавайте новую учетную запись."
 menu: "Меню"
 divider: "Линия-разделитель"
 addItem: "Добавить элемент"
@@ -775,6 +779,13 @@ useBlurEffect: "Размытие в интерфейсе"
 learnMore: "Подробнее"
 misskeyUpdated: "Misskey обновился!"
 whatIsNew: "Что новенького?"
+translate: "Перевод"
+accountDeletionInProgress: "В настоящее время выполняется удаление учетной записи"
+usernameInfo: "Имя, которое отличает вашу учетную запись от других на этом сервере. Вы можете использовать алфавит (a~z, A~Z), цифры (0~9) или символы подчеркивания (_). Имена пользователей не могут быть изменены позже."
+aiChanMode: "ИИ режим"
+keepCw: "Сохраняйте Предупреждения о содержимом"
+controllPanel: "Панель управления"
+manageAccounts: "Управление аккаунтом"
 _docs:
  continueReading: "Читать подробнее"
  features: "Возможности"
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@@ -81,6 +81,8 @@ somethingHappened: "出现了一些问题！"
 retry: "重试"
 pageLoadError: "页面加载失败。"
 pageLoadErrorDescription: "这通常是由于网络或浏览器缓存的原因。请清除缓存或等待片刻后重试。"
+serverIsDead: "服务器没有响应。 请稍等片刻，然后重试。"
+youShouldUpgradeClient: "请重新加载并使用新版本的客户端查看此页面。"
 enterListName: "输入列表名称"
 privacy: "隐私"
 makeFollowManuallyApprove: "关注者的关注请求需要批准"
@@ -529,6 +531,8 @@ removeAllFollowing: "取消所有关注"
 removeAllFollowingDescription: "取消{host}的所有关注者。当实例不存在时执行。"
 userSuspended: "该用户已被冻结。"
 userSilenced: "该用户已被禁言。"
+yourAccountSuspendedTitle: "账户已被冻结"
+yourAccountSuspendedDescription: "由于违反了服务器的服务条款或其他原因，该账户已被冻结。 您可以与管理员联系以了解更多信息。 请不要创建一个新的帐户。"
 menu: "菜单"
 divider: "分割线"
 addItem: "添加项目"
@@ -762,6 +766,7 @@ middle: "中"
 low: "低"
 emailNotConfiguredWarning: "电子邮件地址未设置。"
 ratio: "比率"
+previewNoteText: "预览文本"
 customCss: "自定义 CSS"
 customCssWarn: "这些设置必须有相关的基础知识，不当的配置可能导致客户端无法正常使用！"
 global: "全局"
@@ -779,10 +784,23 @@ translate: "翻译"
 translatedFrom: "从 {x} 翻译"
 accountDeletionInProgress: "正在删除账户"
 usernameInfo: "在服务器上唯一标识您的帐户的名称。您可以使用字母 (a ~ z, A ~ Z)、数字 (0 ~ 9) 和下划线 (_)。用户名以后不能更改。"
+aiChanMode: "小蓝模式"
 keepCw: "保留CW"
 pubSub: "Pub/Sub账户"
+lastCommunication: "最近通信"
 resolved: "已解决"
 unresolved: "未解决"
+itsOn: "已开启"
+itsOff: "已关闭"
+emailRequiredForSignup: "注册账户需要电子邮件地址"
+unread: "未读"
+filter: "筛选"
+controllPanel: "控制面板"
+manageAccounts: "管理账户"
+_signup:
+  almostThere: "即将完成"
+  emailAddressInfo: "请输入您所使用的电子邮件地址"
+  emailSent: "已将确认邮件发送至您输入的电子邮件地址 ({email})。请访问电子邮件中的链接以完成帐户创建。"
 _accountDelete:
  accountDelete: "删除帐户"
  mayTakeTime: "删除账号是一个性能损耗较大的处理，如果账号持有的内容数量和上传的文件数量较多的话，完成需要花费一段时间。"
@@ -897,6 +915,8 @@ _mfm:
  fontDescription: "可以设置内容所使用的字体。"
  rainbow: "彩虹"
  rainbowDescription: "用彩虹色来显示内容。"
+  sparkle: "闪光"
+  sparkleDescription: "添加发光粒子效果。"
 _reversi:
  reversi: "黑白棋"
  gameSettings: "对局设置"
@@ -1123,6 +1143,10 @@ _permissions:
  "write:user-groups": "操作用户组"
  "read:channels": "查看频道"
  "write:channels": "管理频道"
+  "read:gallery": "浏览图库"
+  "write:gallery": "操作图库"
+  "read:gallery-likes": "读取喜欢的图片"
+  "write:gallery-likes": "操作喜欢的图片"
 _auth:
  shareAccess: "您要授权允许“{name}”访问您的帐户吗？"
  shareAccessAsk: "您确定要授权此应用程序访问您的帐户吗？"
@@ -1163,7 +1187,7 @@ _widgets:
  jobQueue: "作业队列"
  serverMetric: "服务器监控"
  aiscript: "AiScript控制台"
-  aichan: "蓝"
+  aichan: "小蓝"
 _cw:
  hide: "隐藏"
  show: "查看更多"
--- a/migration/1633068642000-email-required-for-signup.ts
+++ b/migration/1633068642000-email-required-for-signup.ts
@@ -0,0 +1,14 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class emailRequiredForSignup1633068642000 implements MigrationInterface {
+    name = 'emailRequiredForSignup1633068642000'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "meta" ADD "emailRequiredForSignup" boolean NOT NULL DEFAULT false`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "emailRequiredForSignup"`);
+    }
+
+}
--- a/migration/1633071909016-user-pending.ts
+++ b/migration/1633071909016-user-pending.ts
@@ -0,0 +1,16 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class userPending1633071909016 implements MigrationInterface {
+    name = 'userPending1633071909016'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`CREATE TABLE "user_pending" ("id" character varying(32) NOT NULL, "createdAt" TIMESTAMP WITH TIME ZONE NOT NULL, "code" character varying(128) NOT NULL, "username" character varying(128) NOT NULL, "email" character varying(128) NOT NULL, "password" character varying(128) NOT NULL, CONSTRAINT "PK_d4c84e013c98ec02d19b8fbbafa" PRIMARY KEY ("id"))`);
+        await queryRunner.query(`CREATE UNIQUE INDEX "IDX_4e5c4c99175638ec0761714ab0" ON "user_pending" ("code") `);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`DROP INDEX "IDX_4e5c4c99175638ec0761714ab0"`);
+        await queryRunner.query(`DROP TABLE "user_pending"`);
+    }
+
+}
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.90.1",
+	"version": "12.92.0",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
@@ -47,7 +47,7 @@
 		"@sinonjs/fake-timers": "7.1.2",
 		"@syuilo/aiscript": "0.11.1",
 		"@types/bcryptjs": "2.4.2",
-		"@types/bull": "3.15.3",
+		"@types/bull": "3.15.5",
 		"@types/cbor": "6.0.0",
 		"@types/dateformat": "3.0.1",
 		"@types/escape-regexp": "0.0.0",
@@ -55,7 +55,7 @@
 		"@types/gulp": "4.0.9",
 		"@types/gulp-rename": "2.0.1",
 		"@types/is-url": "1.2.30",
-		"@types/js-yaml": "4.0.2",
+		"@types/js-yaml": "4.0.3",
 		"@types/jsdom": "16.2.13",
 		"@types/jsonld": "1.5.6",
 		"@types/katex": "0.11.1",
@@ -63,17 +63,17 @@
 		"@types/koa-bodyparser": "4.3.3",
 		"@types/koa-cors": "0.0.2",
 		"@types/koa-favicon": "2.0.21",
-		"@types/koa-logger": "3.1.1",
-		"@types/koa-mount": "4.0.0",
+		"@types/koa-logger": "3.1.2",
+		"@types/koa-mount": "4.0.1",
 		"@types/koa-send": "4.1.3",
 		"@types/koa-views": "7.0.0",
 		"@types/koa__cors": "3.0.3",
 		"@types/koa__multer": "2.0.3",
-		"@types/koa__router": "8.0.7",
-		"@types/markdown-it": "12.0.3",
+		"@types/koa__router": "8.0.8",
+		"@types/markdown-it": "12.2.3",
 		"@types/matter-js": "0.17.5",
 		"@types/mocha": "8.2.3",
-		"@types/node": "16.6.2",
+		"@types/node": "16.10.3",
 		"@types/node-fetch": "2.5.12",
 		"@types/nodemailer": "6.4.4",
 		"@types/nprogress": "0.2.0",
@@ -86,13 +86,13 @@
 		"@types/qrcode": "1.4.1",
 		"@types/random-seed": "0.3.3",
 		"@types/ratelimiter": "3.4.2",
-		"@types/redis": "2.8.31",
+		"@types/redis": "2.8.32",
 		"@types/rename": "1.0.4",
 		"@types/request-stats": "3.0.0",
 		"@types/rimraf": "3.0.2",
 		"@types/seedrandom": "2.4.28",
-		"@types/sharp": "0.28.5",
-		"@types/sinonjs__fake-timers": "6.0.3",
+		"@types/sharp": "0.29.2",
+		"@types/sinonjs__fake-timers": "6.0.4",
 		"@types/speakeasy": "2.0.6",
 		"@types/throttle-debounce": "2.1.0",
 		"@types/tinycolor2": "1.4.3",
@@ -102,47 +102,46 @@
 		"@types/webpack": "5.28.0",
 		"@types/webpack-stream": "3.2.12",
 		"@types/websocket": "1.0.4",
-		"@types/ws": "7.4.7",
-		"@typescript-eslint/parser": "4.29.2",
-		"@vue/compiler-sfc": "3.2.4",
+		"@types/ws": "8.2.0",
+		"@typescript-eslint/parser": "5.0.0",
+		"@vue/compiler-sfc": "3.2.20",
 		"abort-controller": "3.0.0",
-		"apexcharts": "3.27.3",
+		"apexcharts": "3.28.3",
 		"autobind-decorator": "2.4.0",
 		"autosize": "4.0.4",
 		"autwh": "0.1.0",
-		"aws-sdk": "2.966.0",
+		"aws-sdk": "2.1003.0",
 		"bcryptjs": "2.4.3",
 		"blurhash": "1.1.4",
 		"broadcast-channel": "4.2.0",
-		"bull": "3.28.1",
-		"cacheable-lookup": "6.0.0",
+		"bull": "3.29.3",
+		"cacheable-lookup": "6.0.3",
 		"cafy": "15.2.1",
-		"cbor": "8.0.0",
+		"cbor": "8.0.2",
 		"chalk": "4.1.2",
 		"chart.js": "2.9.4",
 		"cli-highlight": "2.1.11",
-		"commander": "8.1.0",
 		"compare-versions": "3.6.0",
-		"concurrently": "6.2.1",
+		"concurrently": "6.3.0",
 		"content-disposition": "0.5.3",
 		"crc-32": "1.2.0",
-		"css-loader": "6.2.0",
+		"css-loader": "6.4.0",
 		"cssnano": "5.0.8",
 		"dateformat": "4.5.1",
 		"escape-regexp": "0.0.1",
-		"eslint": "7.32.0",
-		"eslint-plugin-vue": "7.16.0",
+		"eslint": "8.0.1",
+		"eslint-plugin-vue": "7.19.1",
 		"eventemitter3": "4.0.7",
 		"feed": "4.2.2",
 		"file-type": "16.5.3",
 		"fluent-ffmpeg": "2.1.2",
-		"glob": "7.1.7",
+		"glob": "7.2.0",
 		"got": "11.8.2",
 		"gulp": "4.0.2",
 		"gulp-cssnano": "2.1.3",
 		"gulp-rename": "2.0.0",
 		"gulp-replace": "1.1.3",
-		"gulp-terser": "2.0.1",
+		"gulp-terser": "2.1.0",
 		"gulp-tslint": "8.1.4",
 		"hpagent": "0.1.2",
 		"http-signature": "1.3.5",
@@ -156,8 +155,8 @@
 		"json5-loader": "4.0.1",
 		"jsonld": "5.2.0",
 		"jsrsasign": "8.0.20",
-		"katex": "0.13.13",
-		"koa": "2.13.1",
+		"katex": "0.13.18",
+		"koa": "2.13.3",
 		"koa-bodyparser": "4.3.0",
 		"koa-favicon": "2.1.0",
 		"koa-json-body": "5.3.0",
@@ -170,27 +169,27 @@
 		"markdown-it": "12.2.0",
 		"markdown-it-anchor": "7.1.0",
 		"matter-js": "0.17.1",
-		"mfm-js": "0.19.0",
+		"mfm-js": "0.20.0",
 		"misskey-js": "0.0.6",
 		"mocha": "8.4.0",
 		"ms": "2.1.3",
 		"multer": "1.4.3",
 		"nested-property": "4.0.0",
 		"node-fetch": "2.6.1",
-		"nodemailer": "6.6.3",
+		"nodemailer": "6.7.0",
 		"os-utils": "0.0.14",
 		"parse5": "6.0.1",
 		"pg": "8.7.1",
 		"portscanner": "2.2.0",
-		"postcss": "8.3.6",
-		"postcss-loader": "6.1.1",
-		"prismjs": "1.24.1",
-		"private-ip": "2.2.1",
+		"postcss": "8.3.9",
+		"postcss-loader": "6.2.0",
+		"prismjs": "1.25.0",
+		"private-ip": "2.3.0",
 		"probe-image-size": "7.2.1",
 		"promise-limit": "2.7.0",
 		"pug": "3.0.2",
 		"punycode": "2.1.1",
-		"pureimage": "0.3.2",
+		"pureimage": "0.3.5",
 		"qrcode": "1.4.4",
 		"random-seed": "0.3.0",
 		"ratelimiter": "3.4.1",
@@ -204,53 +203,54 @@
 		"rimraf": "3.0.2",
 		"rndstr": "1.0.0",
 		"s-age": "1.1.2",
-		"sass": "1.38.0",
-		"sass-loader": "12.1.0",
+		"sass": "1.43.2",
+		"sass-loader": "12.2.0",
 		"seedrandom": "3.0.5",
-		"sharp": "0.29.0",
+		"sharp": "0.29.1",
 		"speakeasy": "2.0.0",
 		"stringz": "2.1.0",
-		"style-loader": "3.2.1",
+		"style-loader": "3.3.0",
 		"summaly": "2.4.1",
 		"syslog-pro": "1.0.0",
-		"systeminformation": "5.8.0",
+		"systeminformation": "5.9.7",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
 		"three": "0.117.1",
 		"throttle-debounce": "3.0.1",
 		"tinycolor2": "1.4.2",
 		"tmp": "0.2.1",
-		"ts-loader": "9.2.5",
-		"ts-node": "10.2.1",
-		"tsc-alias": "1.3.9",
-		"tsconfig-paths": "3.10.1",
+		"ts-loader": "9.2.6",
+		"ts-node": "10.3.0",
+		"tsc-alias": "1.3.10",
+		"tsconfig-paths": "3.11.0",
 		"tslint": "6.1.3",
 		"tslint-sonarts": "1.9.0",
 		"twemoji-parser": "13.1.0",
-		"typeorm": "0.2.37",
-		"typescript": "4.3.5",
+		"typeorm": "0.2.38",
+		"typescript": "4.4.4",
 		"ulid": "2.3.0",
 		"uuid": "8.3.2",
 		"v-debounce": "0.1.2",
-		"vue": "3.2.4",
-		"vue-loader": "16.5.0",
+		"vanilla-tilt": "1.7.2",
+		"vue": "3.2.20",
+		"vue-loader": "16.7.0",
 		"vue-prism-editor": "2.0.0-alpha.2",
 		"vue-router": "4.0.5",
 		"vue-style-loader": "4.1.3",
 		"vue-svg-loader": "0.17.0-beta.2",
 		"vuedraggable": "4.0.1",
 		"web-push": "3.4.5",
-		"webpack": "5.51.0",
-		"webpack-cli": "4.8.0",
+		"webpack": "5.58.2",
+		"webpack-cli": "4.9.0",
 		"websocket": "1.0.34",
-		"ws": "8.2.0",
+		"ws": "8.2.3",
 		"xev": "2.0.1"
 	},
 	"devDependencies": {
 		"@redocly/openapi-core": "1.0.0-beta.54",
 		"@types/fluent-ffmpeg": "2.1.17",
 		"cross-env": "7.0.3",
-		"cypress": "8.3.0",
-		"start-server-and-test": "1.13.1"
+		"cypress": "8.5.0",
+		"start-server-and-test": "1.14.0"
 	}
 }
--- a/src/argv.ts
+++ b/src/argv.ts
@@ -1,23 +0,0 @@
-import { Command } from 'commander';
-import config from '@/config/index';
-
-const program = new Command();
-
-program.version(config.version);
-program.option('--no-daemons', 'Disable daemon processes (for debbuging)');
-program.option('--disable-clustering', 'Disable clustering');
-program.option('--only-server', 'Run server only (without job queue processing)');
-program.option('--only-queue', 'Pocessing job queue only (without server)');
-program.option('--quiet', 'Suppress all logs');
-program.option('--verbose', 'Enable all logs');
-program.option('--with-log-time', 'Include timestamp for each logs');
-program.option('--slow', 'Delay all requests (for debbuging)');
-program.option('--color', 'This option is a dummy for some external program\'s (e.g. forever) issue.');
-program.parse(process.argv);
-
-if (process.env.MK_ONLY_QUEUE) program.onlyQueue = true;
-if (process.env.NODE_ENV === 'test') program.disableClustering = true;
-//if (process.env.NODE_ENV === 'test') program.quiet = true;
-if (process.env.NODE_ENV === 'test') program.noDaemons = true;
-
-export { program };
--- a/src/boot/index.ts
+++ b/src/boot/index.ts
@@ -3,7 +3,7 @@ import * as chalk from 'chalk';
 import Xev from 'xev';

 import Logger from '@/services/logger';
-import { program } from '../argv';
+import { envOption } from '../env';

 // for typeorm
 import 'reflect-metadata';
@@ -20,7 +20,7 @@ const ev = new Xev();
 export default async function() {
 	process.title = `Misskey (${cluster.isMaster ? 'master' : 'worker'})`;

-	if (cluster.isMaster || program.disableClustering) {
+	if (cluster.isMaster || envOption.disableClustering) {
 		await masterMain();

 		if (cluster.isMaster) {
@@ -28,7 +28,7 @@ export default async function() {
 		}
 	}

-	if (cluster.isWorker || program.disableClustering) {
+	if (cluster.isWorker || envOption.disableClustering) {
 		await workerMain();
 	}

@@ -60,7 +60,7 @@ cluster.on('exit', worker => {
 });

 // Display detail of unhandled promise rejection
-if (!program.quiet) {
+if (!envOption.quiet) {
 	process.on('unhandledRejection', console.dir);
 }

--- a/src/boot/master.ts
+++ b/src/boot/master.ts
@@ -11,7 +11,7 @@ import Logger from '@/services/logger';
 import loadConfig from '@/config/load';
 import { Config } from '@/config/types';
 import { lessThan } from '@/prelude/array';
-import { program } from '../argv';
+import { envOption } from '../env';
 import { showMachineInfo } from '@/misc/show-machine-info';
 import { initDb } from '../db/postgre';

@@ -25,7 +25,7 @@ const logger = new Logger('core', 'cyan');
 const bootLogger = logger.createSubLogger('boot', 'magenta', false);

 function greet() {
-	if (!program.quiet) {
+	if (!envOption.quiet) {
 		//#region Misskey logo
 		const v = `v${meta.version}`;
 		console.log('  _____ _         _           ');
@@ -73,13 +73,13 @@ export async function masterMain() {

 	bootLogger.succ('Misskey initialized');

-	if (!program.disableClustering) {
+	if (!envOption.disableClustering) {
 		await spawnWorkers(config.clusterLimit);
 	}

 	bootLogger.succ(`Now listening on port ${config.port} on ${config.url}`, null, true);

-	if (!program.noDaemons) {
+	if (!envOption.noDaemons) {
 		require('../daemons/server-stats').default();
 		require('../daemons/queue-stats').default();
 		require('../daemons/janitor').default();
--- a/src/client/account.ts
+++ b/src/client/account.ts
@@ -1,8 +1,10 @@
 import { del, get, set } from '@client/scripts/idb-proxy';
 import { reactive } from 'vue';
 import { apiUrl } from '@client/config';
-import { waiting } from '@client/os';
+import { waiting, api, popup, popupMenu, success } from '@client/os';
 import { unisonReload, reloadChannel } from '@client/scripts/unison-reload';
+import { showSuspendedDialog } from './scripts/show-suspended-dialog';
+import { i18n } from './i18n';

 // TODO: 他のタブと永続化されたstateを同期

@@ -82,17 +84,20 @@ function fetchAccount(token): Promise<Account> {
 				i: token
 			})
 		})
+		.then(res => res.json())
 		.then(res => {
-			// When failed to authenticate user
-			if (res.status !== 200 && res.status < 500) {
-				return signout();
+			if (res.error) {
+				if (res.error.id === 'a8c724b3-6e9c-4b46-b1a8-bc3ed6258370') {
+					showSuspendedDialog().then(() => {
+						signout();
+					});
+				} else {
+					signout();
+				}
+			} else {
+				res.token = token;
+				done(res);
 			}
-
-			// Parse response
-			res.json().then(i => {
-				i.token = token;
-				done(i);
-			});
 		})
 		.catch(fail);
 	});
@@ -125,6 +130,77 @@ export async function login(token: Account['token'], redirect?: string) {
 	unisonReload();
 }

+export async function openAccountMenu(ev: MouseEvent) {
+	function showSigninDialog() {
+		popup(import('@client/components/signin-dialog.vue'), {}, {
+			done: res => {
+				addAccount(res.id, res.i);
+				success();
+			},
+		}, 'closed');
+	}
+
+	function createAccount() {
+		popup(import('@client/components/signup-dialog.vue'), {}, {
+			done: res => {
+				addAccount(res.id, res.i);
+				switchAccountWithToken(res.i);
+			},
+		}, 'closed');
+	}
+
+	async function switchAccount(account: any) {
+		const storedAccounts = await getAccounts();
+		const token = storedAccounts.find(x => x.id === account.id).token;
+		switchAccountWithToken(token);
+	}
+
+	function switchAccountWithToken(token: string) {
+		login(token);
+	}
+
+	const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== $i.id));
+	const accountsPromise = api('users/show', { userIds: storedAccounts.map(x => x.id) });
+
+	const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+		accountsPromise.then(accounts => {
+			const account = accounts.find(x => x.id === a.id);
+			if (account == null) return res(null);
+			res({
+				type: 'user',
+				user: account,
+				action: () => { switchAccount(account); }
+			});
+		});
+	}));
+
+	popupMenu([...[{
+		type: 'link',
+		text: i18n.locale.profile,
+		to: `/@${ $i.username }`,
+		avatar: $i,
+	}, null, ...accountItemPromises, {
+		icon: 'fas fa-plus',
+		text: i18n.locale.addAccount,
+		action: () => {
+			popupMenu([{
+				text: i18n.locale.existingAccount,
+				action: () => { showSigninDialog(); },
+			}, {
+				text: i18n.locale.createAccount,
+				action: () => { createAccount(); },
+			}], ev.currentTarget || ev.target);
+		},
+	}, {
+		type: 'link',
+		icon: 'fas fa-users',
+		text: i18n.locale.manageAccounts,
+		to: `/settings/accounts`,
+	}]], ev.currentTarget || ev.target, {
+		align: 'left'
+	});
+}
+
 // このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
 declare module '@vue/runtime-core' {
 	interface ComponentCustomProperties {
--- a/src/client/components/abuse-report-window.vue
+++ b/src/client/components/abuse-report-window.vue
@@ -25,7 +25,7 @@
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
 import XWindow from '@client/components/ui/window.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
 import MkButton from '@client/components/ui/button.vue';
 import * as os from '@client/os';

--- a/src/client/components/autocomplete.vue
+++ b/src/client/components/autocomplete.vue
@@ -10,12 +10,12 @@
 		</li>
 		<li @click="chooseUser()" @keydown="onKeydown" tabindex="-1" class="choose">{{ $ts.selectUser }}</li>
 	</ol>
-	<ol class="hashtags" ref="suggests" v-if="hashtags.length > 0">
+	<ol class="hashtags" ref="suggests" v-else-if="hashtags.length > 0">
 		<li v-for="hashtag in hashtags" @click="complete(type, hashtag)" @keydown="onKeydown" tabindex="-1">
 			<span class="name">{{ hashtag }}</span>
 		</li>
 	</ol>
-	<ol class="emojis" ref="suggests" v-if="emojis.length > 0">
+	<ol class="emojis" ref="suggests" v-else-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.isCustomEmoji"><img :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
 			<span class="emoji" v-else-if="!$store.state.useOsNativeEmojis"><img :src="emoji.url" :alt="emoji.emoji"/></span>
@@ -24,6 +24,11 @@
 			<span class="alias" v-if="emoji.aliasOf">({{ emoji.aliasOf }})</span>
 		</li>
 	</ol>
+	<ol class="mfmTags" ref="suggests" v-else-if="mfmTags.length > 0">
+		<li v-for="tag in mfmTags" @click="complete(type, tag)" @keydown="onKeydown" tabindex="-1">
+			<span class="tag">{{ tag }}</span>
+		</li>
+	</ol>
 </div>
 </template>

@@ -106,6 +111,8 @@ emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
 const emojiDb = markRaw(emojiDefinitions.concat(emjdb));
 //#endregion

+const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle'];
+
 export default defineComponent({
 	props: {
 		type: {
@@ -137,11 +144,6 @@ export default defineComponent({
 			type: Number,
 			required: true,
 		},
-
-		showing: {
-			type: Boolean,
-			required: true
-		},
 	},

 	emits: ['done', 'closed'],
@@ -154,18 +156,11 @@ export default defineComponent({
 			hashtags: [],
 			emojis: [],
 			items: [],
+			mfmTags: [],
 			select: -1,
 		}
 	},

-	watch: {
-		showing() {
-			if (!this.showing) {
-				this.$emit('closed');
-			}
-		}
-	},
-
 	updated() {
 		this.setPosition();
 		this.items = (this.$refs.suggests as Element | undefined)?.children || [];
@@ -236,7 +231,7 @@ export default defineComponent({
 				}
 			}

-			if (this.type == 'user') {
+			if (this.type === 'user') {
 				if (this.q == null) {
 					this.users = [];
 					this.fetching = false;
@@ -262,7 +257,7 @@ export default defineComponent({
 						sessionStorage.setItem(cacheKey, JSON.stringify(users));
 					});
 				}
-			} else if (this.type == 'hashtag') {
+			} else if (this.type === 'hashtag') {
 				if (this.q == null || this.q == '') {
 					this.hashtags = JSON.parse(localStorage.getItem('hashtags') || '[]');
 					this.fetching = false;
@@ -286,7 +281,7 @@ export default defineComponent({
 						});
 					}
 				}
-			} else if (this.type == 'emoji') {
+			} else if (this.type === 'emoji') {
 				if (this.q == null || this.q == '') {
 					// 最近使った絵文字をサジェスト
 					this.emojis = this.$store.state.recentlyUsedEmojis.map(emoji => emojiDb.find(e => e.emoji == emoji)).filter(x => x != null);
@@ -314,6 +309,13 @@ export default defineComponent({
 				}

 				this.emojis = matched;
+			} else if (this.type === 'mfmTag') {
+				if (this.q == null || this.q == '') {
+					this.mfmTags = MFM_TAGS;
+					return;
+				}
+
+				this.mfmTags = MFM_TAGS.filter(tag => tag.startsWith(this.q));
 			}
 		},

@@ -490,5 +492,11 @@ export default defineComponent({
 			margin: 0 0 0 8px;
 		}
 	}
+
+	> .mfmTags > li {
+
+		.name {
+		}
+	}
 }
 </style>
--- a/src/client/components/captcha.vue
+++ b/src/client/components/captcha.vue
@@ -39,7 +39,7 @@ export default defineComponent({
 			type: String,
 			required: true,
 		},
-		value: {
+		modelValue: {
 			type: String,
 		},
 	},
@@ -116,7 +116,7 @@ export default defineComponent({
 			}
 		},
 		callback(response?: string) {
-			this.$emit('update:value', typeof response == 'string' ? response : null);
+			this.$emit('update:modelValue', typeof response == 'string' ? response : null);
 		},
 	},
 });
--- a/src/client/components/channel-follow-button.vue
+++ b/src/client/components/channel-follow-button.vue
@@ -91,7 +91,7 @@ export default defineComponent({
 		width: 31px;
 	}

-	&:focus {
+	&:focus-visible {
 		&:after {
 			content: "";
 			pointer-events: none;
--- a/src/client/components/cw-button.vue
+++ b/src/client/components/cw-button.vue
@@ -1,7 +1,7 @@
 <template>
 <button class="nrvgflfu _button" @click="toggle">
-	<b>{{ value ? $ts._cw.hide : $ts._cw.show }}</b>
-	<span v-if="!value">{{ label }}</span>
+	<b>{{ modelValue ? $ts._cw.hide : $ts._cw.show }}</b>
+	<span v-if="!modelValue">{{ label }}</span>
 </button>
 </template>

@@ -12,7 +12,7 @@ import { concat } from '../../prelude/array';

 export default defineComponent({
 	props: {
-		value: {
+		modelValue: {
 			type: Boolean,
 			required: true
 		},
@@ -36,7 +36,7 @@ export default defineComponent({
 		length,

 		toggle() {
-			this.$emit('update:value', !this.value);
+			this.$emit('update:modelValue', !this.modelValue);
 		}
 	}
 });
--- a/src/client/components/debobigego/base.vue
+++ b/src/client/components/debobigego/base.vue
@@ -21,39 +21,39 @@ export default defineComponent({
 <style lang="scss" scoped>
 .rbusrurv {
 	// 他のCSSからも参照されるので消さないように
-	--formXPadding: 32px;
-	--formYPadding: 32px;
+	--debobigegoXPadding: 32px;
+	--debobigegoYPadding: 32px;

-	--formContentHMargin: 16px;
+	--debobigegoContentHMargin: 16px;

 	font-size: 95%;
 	line-height: 1.3em;
 	background: var(--bg);
-	padding: var(--formYPadding) var(--formXPadding);
+	padding: var(--debobigegoYPadding) var(--debobigegoXPadding);
 	max-width: 750px;
 	margin: 0 auto;

 	&:not(.wide).max-width_400px {
-		--formXPadding: 0px;
+		--debobigegoXPadding: 0px;

 		> ::v-deep(*) {
-			._formPanel {
+			._debobigegoPanel {
 				border: solid 0.5px var(--divider);
 				border-radius: 0;
 				border-left: none;
 				border-right: none;
 			}

-			._form_group {
-				> *:not(._formNoConcat) {
-					&:not(:last-child):not(._formNoConcatPrev) {
-						&._formPanel, ._formPanel {
+			._debobigego_group {
+				> *:not(._debobigegoNoConcat) {
+					&:not(:last-child):not(._debobigegoNoConcatPrev) {
+						&._debobigegoPanel, ._debobigegoPanel {
 							border-bottom: solid 0.5px var(--divider);
 						}
 					}

-					&:not(:first-child):not(._formNoConcatNext) {
-						&._formPanel, ._formPanel {
+					&:not(:first-child):not(._debobigegoNoConcatNext) {
+						&._debobigegoPanel, ._debobigegoPanel {
 							border-top: none;
 						}
 					}
--- a/src/client/components/debobigego/button.vue
+++ b/src/client/components/debobigego/button.vue
@@ -1,7 +1,7 @@
 <template>
-<div class="yzpgjkxe _formItem">
-	<div class="_formLabel"><slot name="label"></slot></div>
-	<button class="main _button _formPanel _formClickable" :class="{ center, primary, danger }">
+<div class="yzpgjkxe _debobigegoItem">
+	<div class="_debobigegoLabel"><slot name="label"></slot></div>
+	<button class="main _button _debobigegoPanel _debobigegoClickable" :class="{ center, primary, danger }">
 		<slot></slot>
 		<div class="suffix">
 			<slot name="suffix"></slot>
@@ -10,13 +10,13 @@
 			</div>
 		</div>
 	</button>
-	<div class="_formCaption"><slot name="desc"></slot></div>
+	<div class="_debobigegoCaption"><slot name="desc"></slot></div>
 </div>
 </template>

 <script lang="ts">
 import { defineComponent } from 'vue';
-import './form.scss';
+import './debobigego.scss';

 export default defineComponent({
 	props: {
--- a/src/client/components/debobigego/debobigego.scss
+++ b/src/client/components/debobigego/debobigego.scss
@@ -1,9 +1,9 @@
-._formPanel {
+._debobigegoPanel {
 	background: var(--panel);
 	border-radius: var(--radius);
 	transition: background 0.2s ease;

-	&._formClickable {
+	&._debobigegoClickable {
 		&:hover {
 			//background: var(--panelHighlight);
 		}
@@ -15,8 +15,8 @@
 	}
 }

-._formLabel,
-._formCaption {
+._debobigegoLabel,
+._debobigegoCaption {
 	font-size: 80%;
 	color: var(--fgTransparentWeak);

@@ -25,28 +25,28 @@
 	}
 }

-._formLabel {
+._debobigegoLabel {
 	position: sticky;
 	top: var(--stickyTop, 0px);
 	z-index: 2;
-	margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
-	padding: 8px calc(var(--formContentHMargin) + var(--formXPadding)) 8px calc(var(--formContentHMargin) + var(--formXPadding));
+	margin: -8px calc(var(--debobigegoXPadding) * -1) 0 calc(var(--debobigegoXPadding) * -1);
+	padding: 8px calc(var(--debobigegoContentHMargin) + var(--debobigegoXPadding)) 8px calc(var(--debobigegoContentHMargin) + var(--debobigegoXPadding));
 	background: var(--X17);
 	-webkit-backdrop-filter: var(--blur, blur(10px));
 	backdrop-filter: var(--blur, blur(10px));
 }

-._themeChanging_ ._formLabel {
+._themeChanging_ ._debobigegoLabel {
 	transition: none !important;
 	background: transparent;
 }

-._formCaption {
-	padding: 8px var(--formContentHMargin) 0 var(--formContentHMargin);
+._debobigegoCaption {
+	padding: 8px var(--debobigegoContentHMargin) 0 var(--debobigegoContentHMargin);
 }

-._formItem {
-	& + ._formItem {
+._debobigegoItem {
+	& + ._debobigegoItem {
 		margin-top: 24px;
 	}
 }
--- a/src/client/components/debobigego/group.vue
+++ b/src/client/components/debobigego/group.vue
@@ -1,10 +1,10 @@
 <template>
-<div class="vrtktovg _formItem _formNoConcat" v-size="{ max: [500] }" v-sticky-container>
-	<div class="_formLabel"><slot name="label"></slot></div>
-	<div class="main _form_group" ref="child">
+<div class="vrtktovg _debobigegoItem _debobigegoNoConcat" v-size="{ max: [500] }" v-sticky-container>
+	<div class="_debobigegoLabel"><slot name="label"></slot></div>
+	<div class="main _debobigego_group" ref="child">
 		<slot></slot>
 	</div>
-	<div class="_formCaption"><slot name="caption"></slot></div>
+	<div class="_debobigegoCaption"><slot name="caption"></slot></div>
 </div>
 </template>

@@ -20,9 +20,9 @@ export default defineComponent({
 			const els = Array.from(child.value.children);
 			for (let i = 0; i < els.length; i++) {
 				const el = els[i];
-				if (el.classList.contains('_formNoConcat')) {
-					if (els[i - 1]) els[i - 1].classList.add('_formNoConcatPrev');
-					if (els[i + 1]) els[i + 1].classList.add('_formNoConcatNext');
+				if (el.classList.contains('_debobigegoNoConcat')) {
+					if (els[i - 1]) els[i - 1].classList.add('_debobigegoNoConcatPrev');
+					if (els[i + 1]) els[i + 1].classList.add('_debobigegoNoConcatNext');
 				}
 			}
 		};
@@ -52,21 +52,21 @@ export default defineComponent({
 <style lang="scss" scoped>
 .vrtktovg {
 	> .main {
-		> ::v-deep(*):not(._formNoConcat) {
-			&:not(._formNoConcatNext) {
+		> ::v-deep(*):not(._debobigegoNoConcat) {
+			&:not(._debobigegoNoConcatNext) {
 				margin: 0;
 			}

-			&:not(:last-child):not(._formNoConcatPrev) {
-				&._formPanel, ._formPanel {
+			&:not(:last-child):not(._debobigegoNoConcatPrev) {
+				&._debobigegoPanel, ._debobigegoPanel {
 					border-bottom: solid 0.5px var(--divider);
 					border-bottom-left-radius: 0;
 					border-bottom-right-radius: 0;
 				}
 			}

-			&:not(:first-child):not(._formNoConcatNext) {
-				&._formPanel, ._formPanel {
+			&:not(:first-child):not(._debobigegoNoConcatNext) {
+				&._debobigegoPanel, ._debobigegoPanel {
 					border-top: none;
 					border-top-left-radius: 0;
 					border-top-right-radius: 0;
--- a/src/client/components/debobigego/info.vue
+++ b/src/client/components/debobigego/info.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="fzenkabp _formItem">
-	<div class="_formPanel" :class="{ warn }">
+<div class="fzenkabp _debobigegoItem">
+	<div class="_debobigegoPanel" :class="{ warn }">
 		<i v-if="warn" class="fas fa-exclamation-triangle"></i>
 		<i v-else class="fas fa-info-circle"></i>
 		<slot></slot>
--- a/src/client/components/debobigego/input.vue
+++ b/src/client/components/debobigego/input.vue
@@ -1,49 +1,53 @@
 <template>
-<div class="matxzzsk">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="input" :class="{ inline, disabled, focused }">
-		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
-		<input ref="inputEl"
-			:type="type"
-			v-model="v"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			:pattern="pattern"
-			:autocomplete="autocomplete"
-			:spellcheck="spellcheck"
-			:step="step"
-			@focus="focused = true"
-			@blur="focused = false"
-			@keydown="onKeydown($event)"
-			@input="onInput"
-			:list="id"
-		>
-		<datalist :id="id" v-if="datalist">
-			<option v-for="data in datalist" :value="data"/>
-		</datalist>
-		<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
+<FormGroup class="_debobigegoItem">
+	<template #label><slot></slot></template>
+	<div class="ztzhwixg _debobigegoItem" :class="{ inline, disabled }">
+		<div class="icon" ref="icon"><slot name="icon"></slot></div>
+		<div class="input _debobigegoPanel">
+			<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+			<input ref="inputEl"
+				:type="type"
+				v-model="v"
+				:disabled="disabled"
+				:required="required"
+				:readonly="readonly"
+				:placeholder="placeholder"
+				:pattern="pattern"
+				:autocomplete="autocomplete"
+				:spellcheck="spellcheck"
+				:step="step"
+				@focus="focused = true"
+				@blur="focused = false"
+				@keydown="onKeydown($event)"
+				@input="onInput"
+				:list="id"
+			>
+			<datalist :id="id" v-if="datalist">
+				<option v-for="data in datalist" :value="data"/>
+			</datalist>
+			<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
+		</div>
 	</div>
-	<div class="caption"><slot name="caption"></slot></div>
+	<template #caption><slot name="desc"></slot></template>

-	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
-</div>
+	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+</FormGroup>
 </template>

 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import MkButton from './button.vue';
-import { debounce } from 'throttle-debounce';
+import './debobigego.scss';
+import FormButton from './button.vue';
+import FormGroup from './group.vue';

 export default defineComponent({
 	components: {
-		MkButton,
+		FormGroup,
+		FormButton,
 	},
-
 	props: {
 		modelValue: {
-			required: true
+			required: false
 		},
 		type: {
 			type: String,
@@ -92,20 +96,13 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
-		debounce: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
 		manualSave: {
 			type: Boolean,
 			required: false,
 			default: false
 		},
 	},
-
 	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
-
 	setup(props, context) {
 		const { modelValue, type, autofocus } = toRefs(props);
 		const v = ref(modelValue.value);
@@ -140,19 +137,13 @@ export default defineComponent({
 			}
 		};

-		const debouncedUpdated = debounce(1000, updated);
-
-		watch(modelValue, newValue => {
+		watch(modelValue.value, newValue => {
 			v.value = newValue;
 		});

 		watch(v, newValue => {
 			if (!props.manualSave) {
-				if (props.debounce) {
-					debouncedUpdated();
-				} else {
-					updated();
-				}
+				updated();
 			}

 			invalid.value = inputEl.value.validity.badInput;
@@ -205,68 +196,59 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-.matxzzsk {
-	margin: 1.5em 0;
+.ztzhwixg {
+	position: relative;

-	> .label {
-		font-size: 0.85em;
-		padding: 0 0 8px 12px;
-		user-select: none;
+	> .icon {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 24px;
+		text-align: center;
+		line-height: 32px;

-		&:empty {
-			display: none;
-		}
-	}
-
-	> .caption {
-		font-size: 0.8em;
-		padding: 8px 0 0 12px;
-		color: var(--fgTransparentWeak);
-
-		&:empty {
-			display: none;
+		&:not(:empty) + .input {
+			margin-left: 28px;
 		}
 	}

 	> .input {
-		$height: 42px;
+		$height: 48px;
 		position: relative;

 		> input {
-			appearance: none;
-			-webkit-appearance: none;
 			display: block;
 			height: $height;
 			width: 100%;
 			margin: 0;
-			padding: 0 12px;
+			padding: 0 16px;
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			color: var(--fg);
-			background: var(--panel);
-			border: solid 1px var(--inputBorder);
-			border-radius: 6px;
+			line-height: $height;
+			color: var(--inputText);
+			background: transparent;
+			border: none;
+			border-radius: 0;
 			outline: none;
 			box-shadow: none;
 			box-sizing: border-box;
-			transition: border-color 0.1s ease-out;

-			&:hover {
-				border-color: var(--inputBorderHover);
+			&[type='file'] {
+				display: none;
 			}
 		}

 		> .prefix,
 		> .suffix {
-			display: flex;
-			align-items: center;
+			display: block;
 			position: absolute;
 			z-index: 1;
 			top: 0;
-			padding: 0 12px;
+			padding: 0 16px;
 			font-size: 1em;
-			height: $height;
+			line-height: $height;
+			color: var(--inputLabel);
 			pointer-events: none;

 			&:empty {
@@ -285,32 +267,25 @@ export default defineComponent({

 		> .prefix {
 			left: 0;
-			padding-right: 6px;
+			padding-right: 8px;
 		}

 		> .suffix {
 			right: 0;
-			padding-left: 6px;
+			padding-left: 8px;
 		}
+	}

-		&.inline {
-			display: inline-block;
-			margin: 0;
-		}
+	&.inline {
+		display: inline-block;
+		margin: 0;
+	}

-		&.focused {
-			> input {
-				border-color: var(--accent);
-				//box-shadow: 0 0 0 4px var(--focus);
-			}
-		}
+	&.disabled {
+		opacity: 0.7;

-		&.disabled {
-			opacity: 0.7;
-
-			&, * {
-				cursor: not-allowed !important;
-			}
+		&, * {
+			cursor: not-allowed !important;
 		}
 	}
 }
--- a/src/client/components/debobigego/key-value-view.vue
+++ b/src/client/components/debobigego/key-value-view.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="_formItem">
-	<div class="_formPanel anocepby">
+<div class="_debobigegoItem">
+	<div class="_debobigegoPanel anocepby">
 		<span class="key"><slot name="key"></slot></span>
 		<span class="value"><slot name="value"></slot></span>
 	</div>
@@ -9,7 +9,7 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
-import './form.scss';
+import './debobigego.scss';

 export default defineComponent({

@@ -20,7 +20,7 @@ export default defineComponent({
 .anocepby {
 	display: flex;
 	align-items: center;
-	padding: 14px var(--formContentHMargin);
+	padding: 14px var(--debobigegoContentHMargin);

 	> .key {
 		margin-right: 12px;
--- a/src/client/components/debobigego/link.vue
+++ b/src/client/components/debobigego/link.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="qmfkfnzi _formItem">
-	<a class="main _button _formPanel _formClickable" :href="to" target="_blank" v-if="external">
+<div class="qmfkfnzi _debobigegoItem">
+	<a class="main _button _debobigegoPanel _debobigegoClickable" :href="to" target="_blank" v-if="external">
 		<span class="icon"><slot name="icon"></slot></span>
 		<span class="text"><slot></slot></span>
 		<span class="right">
@@ -8,7 +8,7 @@
 			<i class="fas fa-external-link-alt icon"></i>
 		</span>
 	</a>
-	<MkA class="main _button _formPanel _formClickable" :class="{ active }" :to="to" :behavior="behavior" v-else>
+	<MkA class="main _button _debobigegoPanel _debobigegoClickable" :class="{ active }" :to="to" :behavior="behavior" v-else>
 		<span class="icon"><slot name="icon"></slot></span>
 		<span class="text"><slot></slot></span>
 		<span class="right">
@@ -21,7 +21,7 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
-import './form.scss';
+import './debobigego.scss';

 export default defineComponent({
 	props: {
--- a/src/client/components/debobigego/object-view.vue
+++ b/src/client/components/debobigego/object-view.vue
@@ -1,8 +1,8 @@
 <template>
-<FormGroup class="_formItem">
+<FormGroup class="_debobigegoItem">
 	<template #label><slot></slot></template>
-	<div class="drooglns _formItem" :class="{ tall }">
-		<div class="input _formPanel">
+	<div class="drooglns _debobigegoItem" :class="{ tall }">
+		<div class="input _debobigegoPanel">
 			<textarea class="_monospace"
 				v-model="v"
 				readonly
@@ -17,7 +17,7 @@
 <script lang="ts">
 import { defineComponent, ref, toRefs, watch } from 'vue';
 import * as JSON5 from 'json5';
-import './form.scss';
+import './debobigego.scss';
 import FormGroup from './group.vue';

 export default defineComponent({
@@ -75,7 +75,7 @@ export default defineComponent({
 			max-width: 100%;
 			min-height: 130px;
 			margin: 0;
-			padding: 16px var(--formContentHMargin);
+			padding: 16px var(--debobigegoContentHMargin);
 			box-sizing: border-box;
 			font: inherit;
 			font-weight: normal;
--- a/src/client/components/debobigego/pagination.vue
+++ b/src/client/components/debobigego/pagination.vue
@@ -1,5 +1,5 @@
 <template>
-<FormGroup class="uljviswt _formItem">
+<FormGroup class="uljviswt _debobigegoItem">
 	<template #label><slot name="label"></slot></template>
 	<slot :items="items"></slot>
 	<div class="empty" v-if="empty" key="_empty_">
--- a/src/client/components/debobigego/radios.vue
+++ b/src/client/components/debobigego/radios.vue
@@ -0,0 +1,112 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue';
+import MkRadio from '@client/components/form/radio.vue';
+import './debobigego.scss';
+
+export default defineComponent({
+	components: {
+		MkRadio
+	},
+	props: {
+		modelValue: {
+			required: false
+		},
+	},
+	data() {
+		return {
+			value: this.modelValue,
+		}
+	},
+	watch: {
+		modelValue() {
+			this.value = this.modelValue;
+		},
+		value() {
+			this.$emit('update:modelValue', this.value);
+		}
+	},
+	render() {
+		const label = this.$slots.desc();
+		let options = this.$slots.default();
+
+		// なぜかFragmentになることがあるため
+		if (options.length === 1 && options[0].props == null) options = options[0].children;
+
+		return h('div', {
+			class: 'cnklmpwm _debobigegoItem'
+		}, [
+			h('div', {
+				class: '_debobigegoLabel',
+			}, label),
+			...options.map(option => h('button', {
+				class: '_button _debobigegoPanel _debobigegoClickable',
+				key: option.key,
+				onClick: () => this.value = option.props.value,
+			}, [h('span', {
+				class: ['check', { checked: this.value === option.props.value }],
+			}), option.children]))
+		]);
+	}
+});
+</script>
+
+<style lang="scss">
+.cnklmpwm {
+	> button {
+		display: block;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 14px 18px;
+		text-align: left;
+
+		&:not(:first-of-type) {
+			border-top: none !important;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		&:not(:last-of-type) {
+			border-bottom: solid 0.5px var(--divider);
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		> .check {
+			display: inline-block;
+			vertical-align: bottom;
+			position: relative;
+			width: 16px;
+			height: 16px;
+			margin-right: 8px;
+			background: none;
+			border: 2px solid var(--inputBorder);
+			border-radius: 100%;
+			transition: inherit;
+
+			&:after {
+				content: "";
+				display: block;
+				position: absolute;
+				top: 3px;
+				right: 3px;
+				bottom: 3px;
+				left: 3px;
+				border-radius: 100%;
+				opacity: 0;
+				transform: scale(0);
+				transition: .4s cubic-bezier(.25,.8,.25,1);
+			}
+
+			&.checked {
+				border-color: var(--accent);
+
+				&:after {
+					background-color: var(--accent);
+					transform: scale(1);
+					opacity: 1;
+				}
+			}
+		}
+	}
+}
+</style>
--- a/src/client/components/debobigego/range.vue
+++ b/src/client/components/debobigego/range.vue
@@ -0,0 +1,122 @@
+<template>
+<div class="ifitouly _debobigegoItem" :class="{ focused, disabled }">
+	<div class="_debobigegoLabel"><slot name="label"></slot></div>
+	<div class="_debobigegoPanel main">
+		<input
+			type="range"
+			ref="input"
+			v-model="v"
+			:disabled="disabled"
+			:min="min"
+			:max="max"
+			:step="step"
+			@focus="focused = true"
+			@blur="focused = false"
+			@input="$emit('update:value', $event.target.value)"
+		/>
+	</div>
+	<div class="_debobigegoCaption"><slot name="caption"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		min: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		max: {
+			type: Number,
+			required: false,
+			default: 100
+		},
+		step: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+	},
+	data() {
+		return {
+			v: this.value,
+			focused: false
+		};
+	},
+	watch: {
+		value(v) {
+			this.v = parseFloat(v);
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.ifitouly {
+	position: relative;
+
+	> .main {
+		padding: 22px 16px;
+
+		> input {
+			display: block;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			appearance: none;
+			background: var(--X10);
+			height: 4px;
+			width: 100%;
+			box-sizing: border-box;
+			margin: 0;
+			outline: 0;
+			border: 0;
+			border-radius: 7px;
+
+			&.disabled {
+				opacity: 0.6;
+				cursor: not-allowed;
+			}
+
+			&::-webkit-slider-thumb {
+				-webkit-appearance: none;
+				appearance: none;
+				cursor: pointer;
+				width: 20px;
+				height: 20px;
+				display: block;
+				border-radius: 50%;
+				border: none;
+				background: var(--accent);
+				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+				box-sizing: content-box;
+			}
+
+			&::-moz-range-thumb {
+				-moz-appearance: none;
+				appearance: none;
+				cursor: pointer;
+				width: 20px;
+				height: 20px;
+				display: block;
+				border-radius: 50%;
+				border: none;
+				background: var(--accent);
+				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+			}
+		}
+	}
+}
+</style>
--- a/src/client/components/debobigego/select.vue
+++ b/src/client/components/debobigego/select.vue
@@ -0,0 +1,145 @@
+<template>
+<div class="yrtfrpux _debobigegoItem" :class="{ disabled, inline }">
+	<div class="_debobigegoLabel"><slot name="label"></slot></div>
+	<div class="icon" ref="icon"><slot name="icon"></slot></div>
+	<div class="input _debobigegoPanel _debobigegoClickable" @click="focus">
+		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
+		<select ref="input"
+			v-model="v"
+			:required="required"
+			:disabled="disabled"
+			@focus="focused = true"
+			@blur="focused = false"
+		>
+			<slot></slot>
+		</select>
+		<div class="suffix">
+			<i class="fas fa-chevron-down"></i>
+		</div>
+	</div>
+	<div class="_debobigegoCaption"><slot name="caption"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import './debobigego.scss';
+
+export default defineComponent({
+	props: {
+		modelValue: {
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		inline: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+	data() {
+		return {
+		};
+	},
+	computed: {
+		v: {
+			get() {
+				return this.modelValue;
+			},
+			set(v) {
+				this.$emit('update:modelValue', v);
+			}
+		},
+	},
+	methods: {
+		focus() {
+			this.$refs.input.focus();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.yrtfrpux {
+	position: relative;
+
+	> .icon {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 24px;
+		text-align: center;
+		line-height: 32px;
+
+		&:not(:empty) + .input {
+			margin-left: 28px;
+		}
+	}
+
+	> .input {
+		display: flex;
+		position: relative;
+
+		> select {
+			display: block;
+			flex: 1;
+			width: 100%;
+			padding: 0 16px;
+			font: inherit;
+			font-weight: normal;
+			font-size: 1em;
+			height: 48px;
+			background: none;
+			border: none;
+			border-radius: 0;
+			outline: none;
+			box-shadow: none;
+			appearance: none;
+			-webkit-appearance: none;
+			color: var(--fg);
+
+			option,
+			optgroup {
+				color: var(--fg);
+				background: var(--bg);
+			}
+		}
+
+		> .prefix,
+		> .suffix {
+			display: block;
+			align-self: center;
+			justify-self: center;
+			font-size: 1em;
+			line-height: 32px;
+			color: var(--inputLabel);
+			pointer-events: none;
+
+			&:empty {
+				display: none;
+			}
+
+			> * {
+				display: block;
+				min-width: 16px;
+			}
+		}
+
+		> .prefix {
+			padding-right: 4px;
+		}
+
+		> .suffix {
+			padding: 0 16px 0 0;
+			opacity: 0.7;
+		}
+	}
+}
+</style>
--- a/src/client/components/debobigego/suspense.vue
+++ b/src/client/components/debobigego/suspense.vue
@@ -1,15 +1,15 @@
 <template>
 <transition name="fade" mode="out-in">
-	<div class="_formItem" v-if="pending">
-		<div class="_formPanel">
+	<div class="_debobigegoItem" v-if="pending">
+		<div class="_debobigegoPanel">
 			<MkLoading/>
 		</div>
 	</div>
-	<div v-else-if="resolved" class="_formItem">
+	<div v-else-if="resolved" class="_debobigegoItem">
 		<slot :result="result"></slot>
 	</div>
-	<div class="_formItem" v-else>
-		<div class="_formPanel eiurkvay">
+	<div class="_debobigegoItem" v-else>
+		<div class="_debobigegoPanel eiurkvay">
 			<div><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</div>
 			<MkButton inline @click="retry" class="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
 		</div>
@@ -19,7 +19,7 @@

 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from 'vue';
-import './form.scss';
+import './debobigego.scss';
 import MkButton from '@client/components/ui/button.vue';

 export default defineComponent({
--- a/src/client/components/debobigego/switch.vue
+++ b/src/client/components/debobigego/switch.vue
@@ -0,0 +1,132 @@
+<template>
+<div class="ijnpvmgr _debobigegoItem">
+	<div class="main _debobigegoPanel _debobigegoClickable"
+		:class="{ disabled, checked }"
+		:aria-checked="checked"
+		:aria-disabled="disabled"
+		@click.prevent="toggle"
+	>
+		<input
+			type="checkbox"
+			ref="input"
+			:disabled="disabled"
+			@keydown.enter="toggle"
+		>
+		<span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff">
+			<span class="handle"></span>
+		</span>
+		<span class="label">
+			<span><slot></slot></span>
+		</span>
+	</div>
+	<div class="_debobigegoCaption"><slot name="desc"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import './debobigego.scss';
+
+export default defineComponent({
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		checked(): boolean {
+			return this.modelValue;
+		}
+	},
+	methods: {
+		toggle() {
+			if (this.disabled) return;
+			this.$emit('update:modelValue', !this.checked);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ijnpvmgr {
+	> .main {
+		position: relative;
+		display: flex;
+		padding: 14px 16px;
+		cursor: pointer;
+
+		> * {
+			user-select: none;
+		}
+
+		> input {
+			position: absolute;
+			width: 0;
+			height: 0;
+			opacity: 0;
+			margin: 0;
+		}
+
+		> .button {
+			position: relative;
+			display: inline-block;
+			flex-shrink: 0;
+			margin: 0;
+			width: 34px;
+			height: 22px;
+			background: var(--switchBg);
+			outline: none;
+			border-radius: 999px;
+			transition: all 0.3s;
+			cursor: pointer;
+
+			> .handle {
+				position: absolute;
+				top: 0;
+				left: 3px;
+				bottom: 0;
+				margin: auto 0;
+				border-radius: 100%;
+				transition: background-color 0.3s, transform 0.3s;
+				width: 16px;
+				height: 16px;
+				background-color: #fff;
+				pointer-events: none;
+			}
+		}
+
+		> .label {
+			margin-left: 12px;
+			display: block;
+			transition: inherit;
+			color: var(--fg);
+
+			> span {
+				display: block;
+				line-height: 20px;
+				transition: inherit;
+			}
+		}
+
+		&.disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		&.checked {
+			> .button {
+				background-color: var(--accent);
+
+				> .handle {
+					transform: translateX(12px);
+				}
+			}
+		}
+	}
+}
+</style>
--- a/src/client/components/debobigego/textarea.vue
+++ b/src/client/components/debobigego/textarea.vue
@@ -0,0 +1,161 @@
+<template>
+<FormGroup class="_debobigegoItem">
+	<template #label><slot></slot></template>
+	<div class="rivhosbp _debobigegoItem" :class="{ tall, pre }">
+		<div class="input _debobigegoPanel">
+			<textarea ref="input" :class="{ code, _monospace: code }"
+				v-model="v"
+				:required="required"
+				:readonly="readonly"
+				:pattern="pattern"
+				:autocomplete="autocomplete"
+				:spellcheck="!code"
+				@input="onInput"
+				@focus="focused = true"
+				@blur="focused = false"
+			></textarea>
+		</div>
+	</div>
+	<template #caption><slot name="desc"></slot></template>
+
+	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+</FormGroup>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, toRefs, watch } from 'vue';
+import './debobigego.scss';
+import FormButton from './button.vue';
+import FormGroup from './group.vue';
+
+export default defineComponent({
+	components: {
+		FormGroup,
+		FormButton,
+	},
+	props: {
+		modelValue: {
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false
+		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
+		pattern: {
+			type: String,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		code: {
+			type: Boolean,
+			required: false
+		},
+		tall: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		pre: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		manualSave: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+	setup(props, context) {
+		const { modelValue } = toRefs(props);
+		const v = ref(modelValue.value);
+		const changed = ref(false);
+		const inputEl = ref(null);
+		const focus = () => inputEl.value.focus();
+		const onInput = (ev) => {
+			changed.value = true;
+			context.emit('change', ev);
+		};
+
+		const updated = () => {
+			changed.value = false;
+			context.emit('update:modelValue', v.value);
+		};
+
+		watch(modelValue.value, newValue => {
+			v.value = newValue;
+		});
+
+		watch(v, newValue => {
+			if (!props.manualSave) {
+				updated();
+			}
+		});
+		
+		return {
+			v,
+			updated,
+			changed,
+			focus,
+			onInput,
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.rivhosbp {
+	position: relative;
+
+	> .input {
+		position: relative;
+	
+		> textarea {
+			display: block;
+			width: 100%;
+			min-width: 100%;
+			max-width: 100%;
+			min-height: 130px;
+			margin: 0;
+			padding: 16px;
+			box-sizing: border-box;
+			font: inherit;
+			font-weight: normal;
+			font-size: 1em;
+			background: transparent;
+			border: none;
+			border-radius: 0;
+			outline: none;
+			box-shadow: none;
+			color: var(--fg);
+
+			&.code {
+				tab-size: 2;
+			}
+		}
+	}
+
+	&.tall {
+		> .input {
+			> textarea {
+				min-height: 200px;
+			}
+		}
+	}
+
+	&.pre {
+		> .input {
+			> textarea {
+				white-space: pre;
+			}
+		}
+	}
+}
+</style>
--- a/src/client/components/debobigego/tuple.vue
+++ b/src/client/components/debobigego/tuple.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="wthhikgt _formItem" v-size="{ max: [500] }">
+<div class="wthhikgt _debobigegoItem" v-size="{ max: [500] }">
 	<slot></slot>
 </div>
 </template>
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -40,8 +40,8 @@
 import { defineComponent } from 'vue';
 import MkModal from '@client/components/ui/modal.vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
-import MkSelect from '@client/components/ui/select.vue';
+import MkInput from '@client/components/form/input.vue';
+import MkSelect from '@client/components/form/select.vue';

 export default defineComponent({
 	components: {
--- a/src/client/components/emoji-picker-window.vue
+++ b/src/client/components/emoji-picker-window.vue
@@ -153,7 +153,7 @@ export default defineComponent({
 					height: var(--eachSize);
 					border-radius: 4px;

-					&:focus {
+					&:focus-visible {
 						outline: solid 2px var(--focus);
 						z-index: 1;
 					}
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -465,7 +465,7 @@ export default defineComponent({
 					height: var(--eachSize);
 					border-radius: 4px;

-					&:focus {
+					&:focus-visible {
 						outline: solid 2px var(--focus);
 						z-index: 1;
 					}
--- a/src/client/components/follow-button.vue
+++ b/src/client/components/follow-button.vue
@@ -161,7 +161,7 @@ export default defineComponent({
 		width: 31px;
 	}

-	&:focus {
+	&:focus-visible {
 		&:after {
 			content: "";
 			pointer-events: none;
--- a/src/client/components/forgot-password.vue
+++ b/src/client/components/forgot-password.vue
@@ -35,7 +35,7 @@
 import { defineComponent } from 'vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import * as os from '@client/os';

 export default defineComponent({
--- a/src/client/components/form-dialog.vue
+++ b/src/client/components/form-dialog.vue
@@ -14,23 +14,23 @@
 	</template>
 	<FormBase class="xkpnjxcv">
 		<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
-			<FormInput v-if="form[item].type === 'number'" v-model:value="values[item]" type="number" :step="form[item].step || 1">
+			<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1">
 				<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
 			</FormInput>
-			<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model:value="values[item]" type="text">
+			<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text">
 				<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
 			</FormInput>
-			<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model:value="values[item]">
+			<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]">
 				<span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
 			</FormTextarea>
-			<FormSwitch v-else-if="form[item].type === 'boolean'" v-model:value="values[item]">
+			<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
 			</FormSwitch>
-			<FormSelect v-else-if="form[item].type === 'enum'" v-model:value="values[item]">
+			<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]">
 				<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
 				<option v-for="item in form[item].enum" :value="item.value" :key="item.value">{{ item.label }}</option>
 			</FormSelect>
@@ -38,7 +38,7 @@
 				<template #desc><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
 				<option v-for="item in form[item].options" :value="item.value" :key="item.value">{{ item.label }}</option>
 			</FormRadios>
-			<FormRange v-else-if="form[item].type === 'range'" v-model:value="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step">
+			<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].mim" :max="form[item].max" :step="form[item].step">
 				<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
 			</FormRange>
@@ -53,14 +53,14 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
-import FormBase from './form/base.vue';
-import FormInput from './form/input.vue';
-import FormTextarea from './form/textarea.vue';
-import FormSwitch from './form/switch.vue';
-import FormSelect from './form/select.vue';
-import FormRange from './form/range.vue';
-import FormButton from './form/button.vue';
-import FormRadios from './form/radios.vue';
+import FormBase from './debobigego/base.vue';
+import FormInput from './debobigego/input.vue';
+import FormTextarea from './debobigego/textarea.vue';
+import FormSwitch from './debobigego/switch.vue';
+import FormSelect from './debobigego/select.vue';
+import FormRange from './debobigego/range.vue';
+import FormButton from './debobigego/button.vue';
+import FormRadios from './debobigego/radios.vue';

 export default defineComponent({
 	components: {
--- a/src/client/components/form/input.vue
+++ b/src/client/components/form/input.vue
@@ -1,53 +1,49 @@
 <template>
-<FormGroup class="_formItem">
-	<template #label><slot></slot></template>
-	<div class="ztzhwixg _formItem" :class="{ inline, disabled }">
-		<div class="icon" ref="icon"><slot name="icon"></slot></div>
-		<div class="input _formPanel">
-			<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
-			<input ref="inputEl"
-				:type="type"
-				v-model="v"
-				:disabled="disabled"
-				:required="required"
-				:readonly="readonly"
-				:placeholder="placeholder"
-				:pattern="pattern"
-				:autocomplete="autocomplete"
-				:spellcheck="spellcheck"
-				:step="step"
-				@focus="focused = true"
-				@blur="focused = false"
-				@keydown="onKeydown($event)"
-				@input="onInput"
-				:list="id"
-			>
-			<datalist :id="id" v-if="datalist">
-				<option v-for="data in datalist" :value="data"/>
-			</datalist>
-			<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
-		</div>
+<div class="matxzzsk">
+	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<div class="input" :class="{ inline, disabled, focused }">
+		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+		<input ref="inputEl"
+			:type="type"
+			v-model="v"
+			:disabled="disabled"
+			:required="required"
+			:readonly="readonly"
+			:placeholder="placeholder"
+			:pattern="pattern"
+			:autocomplete="autocomplete"
+			:spellcheck="spellcheck"
+			:step="step"
+			@focus="focused = true"
+			@blur="focused = false"
+			@keydown="onKeydown($event)"
+			@input="onInput"
+			:list="id"
+		>
+		<datalist :id="id" v-if="datalist">
+			<option v-for="data in datalist" :value="data"/>
+		</datalist>
+		<div class="suffix" ref="suffixEl"><slot name="suffix"></slot></div>
 	</div>
-	<template #caption><slot name="desc"></slot></template>
+	<div class="caption"><slot name="caption"></slot></div>

-	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
-</FormGroup>
+	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+</div>
 </template>

 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import './form.scss';
-import FormButton from './button.vue';
-import FormGroup from './group.vue';
+import MkButton from '../ui/button.vue';
+import { debounce } from 'throttle-debounce';

 export default defineComponent({
 	components: {
-		FormGroup,
-		FormButton,
+		MkButton,
 	},
+
 	props: {
-		value: {
-			required: false
+		modelValue: {
+			required: true
 		},
 		type: {
 			type: String,
@@ -96,16 +92,23 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		debounce: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		manualSave: {
 			type: Boolean,
 			required: false,
 			default: false
 		},
 	},
-	emits: ['change', 'keydown', 'enter'],
+
+	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
+
 	setup(props, context) {
-		const { value, type, autofocus } = toRefs(props);
-		const v = ref(value.value);
+		const { modelValue, type, autofocus } = toRefs(props);
+		const v = ref(modelValue.value);
 		const id = Math.random().toString(); // TODO: uuid?
 		const focused = ref(false);
 		const changed = ref(false);
@@ -131,19 +134,25 @@ export default defineComponent({
 		const updated = () => {
 			changed.value = false;
 			if (type?.value === 'number') {
-				context.emit('update:value', parseFloat(v.value));
+				context.emit('update:modelValue', parseFloat(v.value));
 			} else {
-				context.emit('update:value', v.value);
+				context.emit('update:modelValue', v.value);
 			}
 		};

-		watch(value, newValue => {
+		const debouncedUpdated = debounce(1000, updated);
+
+		watch(modelValue, newValue => {
 			v.value = newValue;
 		});

 		watch(v, newValue => {
 			if (!props.manualSave) {
-				updated();
+				if (props.debounce) {
+					debouncedUpdated();
+				} else {
+					updated();
+				}
 			}

 			invalid.value = inputEl.value.validity.badInput;
@@ -196,59 +205,66 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-.ztzhwixg {
-	position: relative;
+.matxzzsk {
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 12px;
+		user-select: none;

-	> .icon {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 24px;
-		text-align: center;
-		line-height: 32px;
+		&:empty {
+			display: none;
+		}
+	}

-		&:not(:empty) + .input {
-			margin-left: 28px;
+	> .caption {
+		font-size: 0.8em;
+		padding: 8px 0 0 12px;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
 		}
 	}

 	> .input {
-		$height: 48px;
+		$height: 42px;
 		position: relative;

 		> input {
+			appearance: none;
+			-webkit-appearance: none;
 			display: block;
 			height: $height;
 			width: 100%;
 			margin: 0;
-			padding: 0 16px;
+			padding: 0 12px;
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			line-height: $height;
-			color: var(--inputText);
-			background: transparent;
-			border: none;
-			border-radius: 0;
+			color: var(--fg);
+			background: var(--panel);
+			border: solid 0.5px var(--inputBorder);
+			border-radius: 6px;
 			outline: none;
 			box-shadow: none;
 			box-sizing: border-box;
+			transition: border-color 0.1s ease-out;

-			&[type='file'] {
-				display: none;
+			&:hover {
+				border-color: var(--inputBorderHover);
 			}
 		}

 		> .prefix,
 		> .suffix {
-			display: block;
+			display: flex;
+			align-items: center;
 			position: absolute;
 			z-index: 1;
 			top: 0;
-			padding: 0 16px;
+			padding: 0 12px;
 			font-size: 1em;
-			line-height: $height;
-			color: var(--inputLabel);
+			height: $height;
 			pointer-events: none;

 			&:empty {
@@ -267,25 +283,32 @@ export default defineComponent({

 		> .prefix {
 			left: 0;
-			padding-right: 8px;
+			padding-right: 6px;
 		}

 		> .suffix {
 			right: 0;
-			padding-left: 8px;
+			padding-left: 6px;
 		}
-	}

-	&.inline {
-		display: inline-block;
-		margin: 0;
-	}
+		&.inline {
+			display: inline-block;
+			margin: 0;
+		}

-	&.disabled {
-		opacity: 0.7;
+		&.focused {
+			> input {
+				border-color: var(--accent);
+				//box-shadow: 0 0 0 4px var(--focus);
+			}
+		}

-		&, * {
-			cursor: not-allowed !important;
+		&.disabled {
+			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
+			}
 		}
 	}
 }
--- a/src/client/components/form/radio.vue
+++ b/src/client/components/form/radio.vue
--- a/src/client/components/form/radios.vue
+++ b/src/client/components/form/radios.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
 import { defineComponent, h } from 'vue';
-import MkRadio from '@client/components/ui/radio.vue';
-import './form.scss';
+import MkRadio from './radio.vue';

 export default defineComponent({
 	components: {
@@ -18,9 +17,6 @@ export default defineComponent({
 		}
 	},
 	watch: {
-		modelValue() {
-			this.value = this.modelValue;
-		},
 		value() {
 			this.$emit('update:modelValue', this.value);
 		}
@@ -33,80 +29,38 @@ export default defineComponent({
 		if (options.length === 1 && options[0].props == null) options = options[0].children;

 		return h('div', {
-			class: 'cnklmpwm _formItem'
+			class: 'novjtcto'
 		}, [
-			h('div', {
-				class: '_formLabel',
-			}, label),
-			...options.map(option => h('button', {
-				class: '_button _formPanel _formClickable',
+			h('div', { class: 'label' }, label),
+			...options.map(option => h(MkRadio, {
 				key: option.key,
-				onClick: () => this.value = option.props.value,
-			}, [h('span', {
-				class: ['check', { checked: this.value === option.props.value }],
-			}), option.children]))
+				value: option.props.value,
+				modelValue: this.value,
+				'onUpdate:modelValue': value => this.value = value,
+			}, option.children))
 		]);
 	}
 });
 </script>

 <style lang="scss">
-.cnklmpwm {
-	> button {
-		display: block;
-		width: 100%;
-		box-sizing: border-box;
-		padding: 14px 18px;
-		text-align: left;
+.novjtcto {
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 12px;
+		user-select: none;

-		&:not(:first-of-type) {
-			border-top: none !important;
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
+		&:empty {
+			display: none;
 		}
+	}

-		&:not(:last-of-type) {
-			border-bottom: solid 0.5px var(--divider);
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
+	&:first-child {
+		margin-top: 0;
+	}

-		> .check {
-			display: inline-block;
-			vertical-align: bottom;
-			position: relative;
-			width: 16px;
-			height: 16px;
-			margin-right: 8px;
-			background: none;
-			border: 2px solid var(--inputBorder);
-			border-radius: 100%;
-			transition: inherit;
-
-			&:after {
-				content: "";
-				display: block;
-				position: absolute;
-				top: 3px;
-				right: 3px;
-				bottom: 3px;
-				left: 3px;
-				border-radius: 100%;
-				opacity: 0;
-				transform: scale(0);
-				transition: .4s cubic-bezier(.25,.8,.25,1);
-			}
-
-			&.checked {
-				border-color: var(--accent);
-
-				&:after {
-					background-color: var(--accent);
-					transform: scale(1);
-					opacity: 1;
-				}
-			}
-		}
+	&:last-child {
+		margin-bottom: 0;
 	}
 }
 </style>
--- a/src/client/components/form/range.vue
+++ b/src/client/components/form/range.vue
@@ -1,21 +1,20 @@
 <template>
-<div class="ifitouly _formItem" :class="{ focused, disabled }">
-	<div class="_formLabel"><slot name="label"></slot></div>
-	<div class="_formPanel main">
-		<input
-			type="range"
-			ref="input"
-			v-model="v"
-			:disabled="disabled"
-			:min="min"
-			:max="max"
-			:step="step"
-			@focus="focused = true"
-			@blur="focused = false"
-			@input="$emit('update:value', $event.target.value)"
-		/>
-	</div>
-	<div class="_formCaption"><slot name="caption"></slot></div>
+<div class="timctyfi" :class="{ focused, disabled }">
+	<div class="icon"><slot name="icon"></slot></div>
+	<span class="label"><slot name="label"></slot></span>
+	<input
+		type="range"
+		ref="input"
+		v-model="v"
+		:disabled="disabled"
+		:min="min"
+		:max="max"
+		:step="step"
+		:autofocus="autofocus"
+		@focus="focused = true"
+		@blur="focused = false"
+		@input="$emit('update:value', $event.target.value)"
+	/>
 </div>
 </template>

@@ -49,6 +48,10 @@ export default defineComponent({
 			required: false,
 			default: 1
 		},
+		autofocus: {
+			type: Boolean,
+			required: false
+		}
 	},
 	data() {
 		return {
@@ -61,61 +64,75 @@ export default defineComponent({
 			this.v = parseFloat(v);
 		}
 	},
+	mounted() {
+		if (this.autofocus) {
+			this.$nextTick(() => {
+				this.$refs.input.focus();
+			});
+		}
+	}
 });
 </script>

 <style lang="scss" scoped>
-.ifitouly {
+.timctyfi {
 	position: relative;
+	margin: 8px;

-	> .main {
-		padding: 22px 16px;
+	> .icon {
+		display: inline-block;
+		width: 24px;
+		text-align: center;
+	}

-		> input {
-			display: block;
+	> .title {
+		pointer-events: none;
+		font-size: 16px;
+		color: var(--inputLabel);
+		overflow: hidden;
+	}
+
+	> input {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		background: var(--X10);
+		height: 7px;
+		margin: 0 8px;
+		outline: 0;
+		border: 0;
+		border-radius: 7px;
+
+		&.disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		&::-webkit-slider-thumb {
 			-webkit-appearance: none;
+			appearance: none;
+			cursor: pointer;
+			width: 20px;
+			height: 20px;
+			display: block;
+			border-radius: 50%;
+			border: none;
+			background: var(--accent);
+			box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+			box-sizing: content-box;
+		}
+
+		&::-moz-range-thumb {
 			-moz-appearance: none;
 			appearance: none;
-			background: var(--X10);
-			height: 4px;
-			width: 100%;
-			box-sizing: border-box;
-			margin: 0;
-			outline: 0;
-			border: 0;
-			border-radius: 7px;
-
-			&.disabled {
-				opacity: 0.6;
-				cursor: not-allowed;
-			}
-
-			&::-webkit-slider-thumb {
-				-webkit-appearance: none;
-				appearance: none;
-				cursor: pointer;
-				width: 20px;
-				height: 20px;
-				display: block;
-				border-radius: 50%;
-				border: none;
-				background: var(--accent);
-				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-				box-sizing: content-box;
-			}
-
-			&::-moz-range-thumb {
-				-moz-appearance: none;
-				appearance: none;
-				cursor: pointer;
-				width: 20px;
-				height: 20px;
-				display: block;
-				border-radius: 50%;
-				border: none;
-				background: var(--accent);
-				box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-			}
+			cursor: pointer;
+			width: 20px;
+			height: 20px;
+			display: block;
+			border-radius: 50%;
+			border: none;
+			background: var(--accent);
+			box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
 		}
 	}
 }
--- a/src/client/components/form/section.vue
+++ b/src/client/components/form/section.vue
@@ -0,0 +1,31 @@
+<template>
+<div class="vrtktovh" v-size="{ max: [500] }" v-sticky-container>
+	<div class="label"><slot name="label"></slot></div>
+	<div class="main">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+
+});
+</script>
+
+<style lang="scss" scoped>
+.vrtktovh {
+	border-top: solid 0.5px var(--divider);
+
+	> .label {
+		font-weight: bold;
+		padding: 24px 0 16px 0;
+	}
+
+	> .main {
+		margin-bottom: 32px;
+	}
+}
+</style>
--- a/src/client/components/form/select.vue
+++ b/src/client/components/form/select.vue
@@ -1,125 +1,216 @@
 <template>
-<div class="yrtfrpux _formItem" :class="{ disabled, inline }">
-	<div class="_formLabel"><slot name="label"></slot></div>
-	<div class="icon" ref="icon"><slot name="icon"></slot></div>
-	<div class="input _formPanel _formClickable" @click="focus">
-		<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
-		<select ref="input"
+<div class="vblkjoeq">
+	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<div class="input" :class="{ inline, disabled, focused }">
+		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
+		<select ref="inputEl"
 			v-model="v"
-			:required="required"
 			:disabled="disabled"
+			:required="required"
+			:readonly="readonly"
+			:placeholder="placeholder"
 			@focus="focused = true"
 			@blur="focused = false"
+			@input="onInput"
 		>
 			<slot></slot>
 		</select>
-		<div class="suffix">
-			<i class="fas fa-chevron-down"></i>
-		</div>
+		<div class="suffix" ref="suffixEl"><i class="fas fa-chevron-down"></i></div>
 	</div>
-	<div class="_formCaption"><slot name="caption"></slot></div>
+	<div class="caption"><slot name="caption"></slot></div>
+
+	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
 </div>
 </template>

 <script lang="ts">
-import { defineComponent } from 'vue';
-import './form.scss';
+import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
+import MkButton from '../ui/button.vue';

 export default defineComponent({
+	components: {
+		MkButton,
+	},
+
 	props: {
-		value: {
-			required: false
+		modelValue: {
+			required: true
 		},
 		required: {
 			type: Boolean,
 			required: false
 		},
+		readonly: {
+			type: Boolean,
+			required: false
+		},
 		disabled: {
 			type: Boolean,
 			required: false
 		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		autofocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		inline: {
 			type: Boolean,
 			required: false,
 			default: false
 		},
-	},
-	data() {
-		return {
-		};
-	},
-	computed: {
-		v: {
-			get() {
-				return this.value;
-			},
-			set(v) {
-				this.$emit('update:value', v);
-			}
+		manualSave: {
+			type: Boolean,
+			required: false,
+			default: false
 		},
 	},
-	methods: {
-		focus() {
-			this.$refs.input.focus();
-		}
-	}
+
+	emits: ['change', 'update:modelValue'],
+
+	setup(props, context) {
+		const { modelValue, autofocus } = toRefs(props);
+		const v = ref(modelValue.value);
+		const focused = ref(false);
+		const changed = ref(false);
+		const invalid = ref(false);
+		const filled = computed(() => v.value !== '' && v.value != null);
+		const inputEl = ref(null);
+		const prefixEl = ref(null);
+		const suffixEl = ref(null);
+
+		const focus = () => inputEl.value.focus();
+		const onInput = (ev) => {
+			changed.value = true;
+			context.emit('change', ev);
+		};
+
+		const updated = () => {
+			changed.value = false;
+			context.emit('update:modelValue', v.value);
+		};
+
+		watch(modelValue, newValue => {
+			v.value = newValue;
+		});
+
+		watch(v, newValue => {
+			if (!props.manualSave) {
+				updated();
+			}
+
+			invalid.value = inputEl.value.validity.badInput;
+		});
+
+		onMounted(() => {
+			nextTick(() => {
+				if (autofocus.value) {
+					focus();
+				}
+
+				// このコンポーネントが作成された時、非表示状態である場合がある
+				// 非表示状態だと要素の幅などは0になってしまうので、定期的に計算する
+				const clock = setInterval(() => {
+					if (prefixEl.value) {
+						if (prefixEl.value.offsetWidth) {
+							inputEl.value.style.paddingLeft = prefixEl.value.offsetWidth + 'px';
+						}
+					}
+					if (suffixEl.value) {
+						if (suffixEl.value.offsetWidth) {
+							inputEl.value.style.paddingRight = suffixEl.value.offsetWidth + 'px';
+						}
+					}
+				}, 100);
+
+				onUnmounted(() => {
+					clearInterval(clock);
+				});
+			});
+		});
+
+		return {
+			v,
+			focused,
+			invalid,
+			changed,
+			filled,
+			inputEl,
+			prefixEl,
+			suffixEl,
+			focus,
+			onInput,
+			updated,
+		};
+	},
 });
 </script>

 <style lang="scss" scoped>
-.yrtfrpux {
-	position: relative;
+.vblkjoeq {
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 12px;
+		user-select: none;

-	> .icon {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 24px;
-		text-align: center;
-		line-height: 32px;
+		&:empty {
+			display: none;
+		}
+	}

-		&:not(:empty) + .input {
-			margin-left: 28px;
+	> .caption {
+		font-size: 0.8em;
+		padding: 8px 0 0 12px;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
 		}
 	}

 	> .input {
-		display: flex;
+		$height: 42px;
 		position: relative;

 		> select {
+			appearance: none;
+			-webkit-appearance: none;
 			display: block;
-			flex: 1;
+			height: $height;
 			width: 100%;
-			padding: 0 16px;
+			margin: 0;
+			padding: 0 12px;
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			height: 48px;
-			background: none;
-			border: none;
-			border-radius: 0;
+			color: var(--fg);
+			background: var(--panel);
+			border: solid 1px var(--inputBorder);
+			border-radius: 6px;
 			outline: none;
 			box-shadow: none;
-			appearance: none;
-			-webkit-appearance: none;
-			color: var(--fg);
+			box-sizing: border-box;
+			cursor: pointer;
+			transition: border-color 0.1s ease-out;

-			option,
-			optgroup {
-				color: var(--fg);
-				background: var(--bg);
+			&:hover {
+				border-color: var(--inputBorderHover);
 			}
 		}

 		> .prefix,
 		> .suffix {
-			display: block;
-			align-self: center;
-			justify-self: center;
+			display: flex;
+			align-items: center;
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			padding: 0 12px;
 			font-size: 1em;
-			line-height: 32px;
-			color: var(--inputLabel);
+			height: $height;
 			pointer-events: none;

 			&:empty {
@@ -127,18 +218,42 @@ export default defineComponent({
 			}

 			> * {
-				display: block;
+				display: inline-block;
 				min-width: 16px;
+				max-width: 150px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
 			}
 		}

 		> .prefix {
-			padding-right: 4px;
+			left: 0;
+			padding-right: 6px;
 		}

 		> .suffix {
-			padding: 0 16px 0 0;
+			right: 0;
+			padding-left: 6px;
+		}
+
+		&.inline {
+			display: inline-block;
+			margin: 0;
+		}
+
+		&.focused {
+			> select {
+				border-color: var(--accent);
+			}
+		}
+
+		&.disabled {
 			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
+			}
 		}
 	}
 }
--- a/src/client/components/form/slot.vue
+++ b/src/client/components/form/slot.vue
@@ -0,0 +1,50 @@
+<template>
+<div class="adhpbeou">
+	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<div class="content">
+		<slot></slot>
+	</div>
+	<div class="caption"><slot name="caption"></slot></div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+
+});
+</script>
+
+<style lang="scss" scoped>
+.adhpbeou {
+	margin: 1.5em 0;
+
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 12px;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .caption {
+		font-size: 0.8em;
+		padding: 8px 0 0 12px;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .content {
+		position: relative;
+		background: var(--panel);
+		border: solid 0.5px var(--inputBorder);
+		border-radius: 6px;
+	}
+}
+</style>
--- a/src/client/components/form/switch.vue
+++ b/src/client/components/form/switch.vue
@@ -1,35 +1,34 @@
 <template>
-<div class="ijnpvmgr _formItem">
-	<div class="main _formPanel _formClickable"
-		:class="{ disabled, checked }"
-		:aria-checked="checked"
-		:aria-disabled="disabled"
-		@click.prevent="toggle"
+<div
+	class="ziffeoms"
+	:class="{ disabled, checked }"
+	role="switch"
+	:aria-checked="checked"
+	:aria-disabled="disabled"
+	@click.prevent="toggle"
+>
+	<input
+		type="checkbox"
+		ref="input"
+		:disabled="disabled"
+		@keydown.enter="toggle"
 	>
-		<input
-			type="checkbox"
-			ref="input"
-			:disabled="disabled"
-			@keydown.enter="toggle"
-		>
-		<span class="button">
-			<span></span>
-		</span>
-		<span class="label">
-			<span><slot></slot></span>
-		</span>
-	</div>
-	<div class="_formCaption"><slot name="desc"></slot></div>
+	<span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff">
+		<span class="handle"></span>
+	</span>
+	<span class="label">
+		<span><slot></slot></span>
+		<p><slot name="caption"></slot></p>
+	</span>
 </div>
 </template>

 <script lang="ts">
 import { defineComponent } from 'vue';
-import './form.scss';

 export default defineComponent({
 	props: {
-		value: {
+		modelValue: {
 			type: Boolean,
 			default: false
 		},
@@ -40,91 +39,110 @@ export default defineComponent({
 	},
 	computed: {
 		checked(): boolean {
-			return this.value;
+			return this.modelValue;
 		}
 	},
 	methods: {
 		toggle() {
 			if (this.disabled) return;
-			this.$emit('update:value', !this.checked);
+			this.$emit('update:modelValue', !this.checked);
 		}
 	}
 });
 </script>

 <style lang="scss" scoped>
-.ijnpvmgr {
-	> .main {
+.ziffeoms {
+	position: relative;
+	display: flex;
+	cursor: pointer;
+	transition: all 0.3s;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	> * {
+		user-select: none;
+	}
+
+	> input {
+		position: absolute;
+		width: 0;
+		height: 0;
+		opacity: 0;
+		margin: 0;
+	}
+
+	> .button {
 		position: relative;
-		display: flex;
-		padding: 14px 16px;
-		cursor: pointer;
+		display: inline-block;
+		flex-shrink: 0;
+		margin: 0;
+		width: 36px;
+		height: 26px;
+		background: var(--switchBg);
+		outline: none;
+		border-radius: 999px;
+		transition: inherit;

-		> * {
-			user-select: none;
-		}
-
-		&.disabled {
-			opacity: 0.6;
-			cursor: not-allowed;
-		}
-
-		&.checked {
-			> .button {
-				background-color: var(--X10);
-				border-color: var(--X10);
-
-				> * {
-					background-color: var(--accent);
-					transform: translateX(14px);
-				}
-			}
-		}
-
-		> input {
+		> .handle {
 			position: absolute;
-			width: 0;
-			height: 0;
-			opacity: 0;
-			margin: 0;
+			top: 0;
+			bottom: 0;
+			left: 5px;
+			margin: auto 0;
+			border-radius: 100%;
+			transition: background-color 0.3s, transform 0.3s;
+			width: 16px;
+			height: 16px;
+			background-color: #fff;
 		}
+	}

-		> .button {
-			position: relative;
-			display: inline-block;
-			flex-shrink: 0;
-			margin: 3px 0 0 0;
-			width: 34px;
-			height: 14px;
-			background: var(--X6);
-			outline: none;
-			border-radius: 14px;
-			transition: all 0.3s;
-			cursor: pointer;
+	> .label {
+		margin-left: 16px;
+		margin-top: 2px;
+		display: block;
+		cursor: pointer;
+		transition: inherit;
+		color: var(--fg);

-			> * {
-				position: absolute;
-				top: -3px;
-				left: 0;
-				border-radius: 100%;
-				transition: background-color 0.3s, transform 0.3s;
-				width: 20px;
-				height: 20px;
-				background-color: #fff;
-				box-shadow: 0 2px 1px -1px rgba(#000, 0.2), 0 1px 1px 0 rgba(#000, 0.14), 0 1px 3px 0 rgba(#000, 0.12);
-			}
-		}
-
-		> .label {
-			margin-left: 12px;
+		> span {
 			display: block;
+			line-height: 20px;
 			transition: inherit;
-			color: var(--fg);
+		}

-			> span {
-				display: block;
-				line-height: 20px;
-				transition: inherit;
+		> p {
+			margin: 0;
+			color: var(--fgTransparentWeak);
+			font-size: 90%;
+		}
+	}
+
+	&:hover {
+		> .button {
+			background-color: var(--accentedBg);
+		}
+	}
+
+	&.disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	&.checked {
+		> .button {
+			background-color: var(--accent);
+			border-color: var(--accent);
+
+			> .handle {
+				transform: translateX(10px);
 			}
 		}
 	}
--- a/src/client/components/form/textarea.vue
+++ b/src/client/components/form/textarea.vue
@@ -1,40 +1,45 @@
 <template>
-<FormGroup class="_formItem">
-	<template #label><slot></slot></template>
-	<div class="rivhosbp _formItem" :class="{ tall, pre }">
-		<div class="input _formPanel">
-			<textarea ref="input" :class="{ code, _monospace: code }"
-				v-model="v"
-				:required="required"
-				:readonly="readonly"
-				:pattern="pattern"
-				:autocomplete="autocomplete"
-				:spellcheck="!code"
-				@input="onInput"
-				@focus="focused = true"
-				@blur="focused = false"
-			></textarea>
-		</div>
+<div class="adhpbeos">
+	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<div class="input" :class="{ disabled, focused, tall, pre }">
+		<textarea ref="inputEl"
+			:class="{ code, _monospace: code }"
+			v-model="v"
+			:disabled="disabled"
+			:required="required"
+			:readonly="readonly"
+			:placeholder="placeholder"
+			:pattern="pattern"
+			:autocomplete="autocomplete"
+			:spellcheck="spellcheck"
+			@focus="focused = true"
+			@blur="focused = false"
+			@keydown="onKeydown($event)"
+			@input="onInput"
+		></textarea>
 	</div>
-	<template #caption><slot name="desc"></slot></template>
+	<div class="caption"><slot name="caption"></slot></div>

-	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
-</FormGroup>
+	<MkButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
+</div>
 </template>

 <script lang="ts">
-import { defineComponent, ref, toRefs, watch } from 'vue';
-import './form.scss';
-import FormButton from './button.vue';
-import FormGroup from './group.vue';
+import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
+import MkButton from '../ui/button.vue';
+import { debounce } from 'throttle-debounce';

 export default defineComponent({
 	components: {
-		FormGroup,
-		FormButton,
+		MkButton,
 	},
+
 	props: {
-		value: {
+		modelValue: {
+			required: true
+		},
+		type: {
+			type: String,
 			required: false
 		},
 		required: {
@@ -45,14 +50,29 @@ export default defineComponent({
 			type: Boolean,
 			required: false
 		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
 		pattern: {
 			type: String,
 			required: false
 		},
-		autocomplete: {
+		placeholder: {
 			type: String,
 			required: false
 		},
+		autofocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		autocomplete: {
+			required: false
+		},
+		spellcheck: {
+			required: false
+		},
 		code: {
 			type: Boolean,
 			required: false
@@ -67,91 +87,162 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		debounce: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		manualSave: {
 			type: Boolean,
 			required: false,
 			default: false
 		},
 	},
+
+	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
+
 	setup(props, context) {
-		const { value } = toRefs(props);
-		const v = ref(value.value);
+		const { modelValue, autofocus } = toRefs(props);
+		const v = ref(modelValue.value);
+		const focused = ref(false);
 		const changed = ref(false);
+		const invalid = ref(false);
+		const filled = computed(() => v.value !== '' && v.value != null);
 		const inputEl = ref(null);
+
 		const focus = () => inputEl.value.focus();
 		const onInput = (ev) => {
 			changed.value = true;
 			context.emit('change', ev);
 		};
+		const onKeydown = (ev: KeyboardEvent) => {
+			context.emit('keydown', ev);
+
+			if (ev.code === 'Enter') {
+				context.emit('enter');
+			}
+		};

 		const updated = () => {
 			changed.value = false;
-			context.emit('update:value', v.value);
+			context.emit('update:modelValue', v.value);
 		};

-		watch(value, newValue => {
+		const debouncedUpdated = debounce(1000, updated);
+
+		watch(modelValue, newValue => {
 			v.value = newValue;
 		});

 		watch(v, newValue => {
 			if (!props.manualSave) {
-				updated();
+				if (props.debounce) {
+					debouncedUpdated();
+				} else {
+					updated();
+				}
 			}
+
+			invalid.value = inputEl.value.validity.badInput;
 		});
-		
+
+		onMounted(() => {
+			nextTick(() => {
+				if (autofocus.value) {
+					focus();
+				}
+			});
+		});
+
 		return {
 			v,
-			updated,
+			focused,
+			invalid,
 			changed,
+			filled,
+			inputEl,
 			focus,
 			onInput,
+			onKeydown,
+			updated,
 		};
-	}
+	},
 });
 </script>

 <style lang="scss" scoped>
-.rivhosbp {
-	position: relative;
+.adhpbeos {
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 12px;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .caption {
+		font-size: 0.8em;
+		padding: 8px 0 0 12px;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
+		}
+	}

 	> .input {
 		position: relative;
-	
+
 		> textarea {
+			appearance: none;
+			-webkit-appearance: none;
 			display: block;
 			width: 100%;
 			min-width: 100%;
 			max-width: 100%;
 			min-height: 130px;
 			margin: 0;
-			padding: 16px;
-			box-sizing: border-box;
+			padding: 12px;
 			font: inherit;
 			font-weight: normal;
 			font-size: 1em;
-			background: transparent;
-			border: none;
-			border-radius: 0;
+			color: var(--fg);
+			background: var(--panel);
+			border: solid 0.5px var(--inputBorder);
+			border-radius: 6px;
 			outline: none;
 			box-shadow: none;
-			color: var(--fg);
+			box-sizing: border-box;
+			transition: border-color 0.1s ease-out;

-			&.code {
-				tab-size: 2;
+			&:hover {
+				border-color: var(--inputBorderHover);
 			}
 		}
-	}

-	&.tall {
-		> .input {
+		&.focused {
+			> textarea {
+				border-color: var(--accent);
+			}
+		}
+
+		&.disabled {
+			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
+			}
+		}
+
+		&.tall {
 			> textarea {
 				min-height: 200px;
 			}
 		}
-	}

-	&.pre {
-		> .input {
+		&.pre {
 			> textarea {
 				white-space: pre;
 			}
--- a/src/client/components/global/avatar.vue
+++ b/src/client/components/global/avatar.vue
@@ -73,6 +73,22 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
+@keyframes earwiggleleft {
+	from { transform: rotate(37.6deg) skew(30deg); }
+	25% { transform: rotate(10deg) skew(30deg); }
+	50% { transform: rotate(20deg) skew(30deg); }
+	75% { transform: rotate(0deg) skew(30deg); }
+	to { transform: rotate(37.6deg) skew(30deg); }
+}
+
+@keyframes earwiggleright {
+	from { transform: rotate(-37.6deg) skew(-30deg); }
+	30% { transform: rotate(-10deg) skew(-30deg); }
+	55% { transform: rotate(-20deg) skew(-30deg); }
+	75% { transform: rotate(0deg) skew(-30deg); }
+	to { transform: rotate(-37.6deg) skew(-30deg); }
+}
+
 .eiwwqkts {
 	position: relative;
 	display: inline-block;
@@ -132,6 +148,16 @@ export default defineComponent({
 			border-radius: 75% 0 75% 75%;
 			transform: rotate(-37.5deg) skew(-30deg);
 		}
+
+		&:hover {
+			&:before {
+				animation: earwiggleleft 1s infinite;
+			}
+
+			&:after {
+				animation: earwiggleright 1s infinite;
+			}
+		}
 	}
 }
 </style>
--- a/src/client/components/global/header.vue
+++ b/src/client/components/global/header.vue
@@ -0,0 +1,359 @@
+<template>
+<div class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick" ref="el">
+	<template v-if="info">
+		<div class="titleContainer" @click="showTabsPopup" v-if="!hideTitle">
+			<i v-if="info.icon" class="icon" :class="info.icon"></i>
+			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
+
+			<div class="title">
+				<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
+				<div v-else-if="info.title" class="title">{{ info.title }}</div>
+				<div class="subtitle" v-if="!narrow && info.subtitle">
+					{{ info.subtitle }}
+				</div>
+				<div class="subtitle activeTab" v-if="narrow && hasTabs">
+					{{ info.tabs.find(tab => tab.active)?.title }}
+					<i class="chevron fas fa-chevron-down"></i>
+				</div>
+			</div>
+		</div>
+		<div class="tabs" v-if="!narrow || hideTitle">
+			<button class="tab _button" v-for="tab in info.tabs" :class="{ active: tab.active }" @click="tab.onClick" v-tooltip="tab.title">
+				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
+				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
+			</button>
+		</div>
+	</template>
+	<div class="buttons right">
+		<template v-if="info && info.actions && !narrow">
+			<template v-for="action in info.actions">
+				<MkButton class="fullButton" v-if="action.asFullButton" @click.stop="action.handler" primary><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
+				<button v-else class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag" v-tooltip="action.text"><i :class="action.icon"></i></button>
+			</template>
+		</template>
+		<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" @touchstart="preventDrag" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, onUnmounted, PropType, ref, inject } from 'vue';
+import * as tinycolor from 'tinycolor2';
+import { popupMenu } from '@client/os';
+import { url } from '@client/config';
+import { scrollToTop } from '@client/scripts/scroll';
+import MkButton from '@client/components/ui/button.vue';
+import { i18n } from '@client/i18n';
+import { globalEvents } from '@client/events';
+
+export default defineComponent({
+	components: {
+		MkButton
+	},
+
+	props: {
+		info: {
+			type: Object as PropType<{
+				actions?: {}[];
+				tabs?: {}[];
+			}>,
+			required: true
+		},
+		menu: {
+			required: false
+		},
+		thin: {
+			required: false,
+			default: false
+		},
+	},
+
+	setup(props) {
+		const el = ref<HTMLElement>(null);
+		const bg = ref(null);
+		const narrow = ref(false);
+		const height = ref(0);
+		const hasTabs = computed(() => {
+			return props.info.tabs && props.info.tabs.length > 0;
+		});
+		const shouldShowMenu = computed(() => {
+			if (props.info == null) return false;
+			if (props.info.actions != null && narrow.value) return true;
+			if (props.info.menu != null) return true;
+			if (props.info.share != null) return true;
+			if (props.menu != null) return true;
+			return false;
+		});
+
+		const share = () => {
+			navigator.share({
+				url: url + props.info.path,
+				...props.info.share,
+			});
+		};
+
+		const showMenu = (ev: MouseEvent) => {
+			let menu = props.info.menu ? props.info.menu() : [];
+			if (narrow.value && props.info.actions) {
+				menu = [...props.info.actions.map(x => ({
+					text: x.text,
+					icon: x.icon,
+					action: x.handler
+				})), menu.length > 0 ? null : undefined, ...menu];
+			}
+			if (props.info.share) {
+				if (menu.length > 0) menu.push(null);
+				menu.push({
+					text: i18n.locale.share,
+					icon: 'fas fa-share-alt',
+					action: share
+				});
+			}
+			if (props.menu) {
+				if (menu.length > 0) menu.push(null);
+				menu = menu.concat(props.menu);
+			}
+			popupMenu(menu, ev.currentTarget || ev.target);
+		};
+
+		const showTabsPopup = (ev: MouseEvent) => {
+			if (!hasTabs.value) return;
+			if (!narrow.value) return;
+			ev.preventDefault();
+			ev.stopPropagation();
+			const menu = props.info.tabs.map(tab => ({
+				text: tab.title,
+				icon: tab.icon,
+				action: tab.onClick,
+			}));
+			popupMenu(menu, ev.currentTarget || ev.target);
+		};
+
+		const preventDrag = (ev: TouchEvent) => {
+			ev.stopPropagation();
+		};
+
+		const onClick = () => {
+			scrollToTop(el.value, { behavior: 'smooth' });
+		};
+
+		const calcBg = () => {
+			const rawBg = props.info?.bg || 'var(--bg)';
+			const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+			tinyBg.setAlpha(0.85);
+			bg.value = tinyBg.toRgbString();
+		};
+
+		onMounted(() => {
+			calcBg();
+			globalEvents.on('themeChanged', calcBg);
+			onUnmounted(() => {
+				globalEvents.off('themeChanged', calcBg);
+			});
+		
+			if (el.value.parentElement) {
+				narrow.value = el.value.parentElement.offsetWidth < 500;
+				const ro = new ResizeObserver((entries, observer) => {
+					if (el.value) {
+						narrow.value = el.value.parentElement.offsetWidth < 500;
+					}
+				});
+				ro.observe(el.value.parentElement);
+				onUnmounted(() => {
+					ro.disconnect();
+				});
+				setTimeout(() => {
+					const currentStickyTop = getComputedStyle(el.value.parentElement).getPropertyValue('--stickyTop') || '0px';
+					el.value.style.setProperty('--stickyTop', currentStickyTop);
+					el.value.parentElement.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${el.value.offsetHeight}px)`);
+				}, 100); // レンダリング順序の関係で親のstickyTopの設定が少し遅れることがあるため
+			}
+		});
+
+		return {
+			el,
+			bg,
+			narrow,
+			height,
+			hasTabs,
+			shouldShowMenu,
+			share,
+			showMenu,
+			showTabsPopup,
+			preventDrag,
+			onClick,
+			hideTitle: inject('shouldOmitHeaderTitle', false),
+			thin_: props.thin || inject('shouldHeaderThin', false)
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.fdidabkb {
+	--height: 60px;
+	display: flex;
+	position: sticky;
+	top: var(--stickyTop, 0);
+	z-index: 1000;
+	width: 100%;
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	border-bottom: solid 0.5px var(--divider);
+
+	&.thin {
+		--height: 50px;
+	}
+
+	&.slim {
+		text-align: center;
+
+		> .titleContainer {
+			flex: 1;
+			margin: 0 auto;
+			margin-left: var(--height);
+
+			> *:first-child {
+				margin-left: auto;
+			}
+
+			> *:last-child {
+				margin-right: auto;
+			}
+		}
+	}
+
+	> .buttons {
+		--margin: 8px;
+		display: flex;
+    align-items: center;
+		height: var(--height);
+		margin: 0 var(--margin);
+
+		&.right {
+			margin-left: auto;
+		}
+
+		&:empty {
+			width: var(--height);
+		}
+
+		> .button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: calc(var(--height) - (var(--margin) * 2));
+			width: calc(var(--height) - (var(--margin) * 2));
+			box-sizing: border-box;
+			position: relative;
+			border-radius: 5px;
+
+			&:hover {
+				background: rgba(0, 0, 0, 0.05);
+			}
+
+			&.highlighted {
+				color: var(--accent);
+			}
+		}
+
+		> .fullButton {
+			& + .fullButton {
+				margin-left: 12px;
+			}
+		}
+	}
+
+	> .titleContainer {
+		display: flex;
+		align-items: center;
+		overflow: auto;
+		white-space: nowrap;
+		text-align: left;
+		font-weight: bold;
+		flex-shrink: 0;
+		margin-left: 24px;
+
+		> .avatar {
+			$size: 32px;
+			display: inline-block;
+			width: $size;
+			height: $size;
+			vertical-align: bottom;
+			margin: 0 8px;
+			pointer-events: none;
+		}
+
+		> .icon {
+			margin-right: 8px;
+		}
+
+		> .title {
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			line-height: 1.1;
+
+			> .subtitle {
+				opacity: 0.6;
+				font-size: 0.8em;
+				font-weight: normal;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+
+				&.activeTab {
+					text-align: center;
+
+					> .chevron {
+						display: inline-block;
+						margin-left: 6px;
+					}
+				}
+			}
+		}
+	}
+
+	> .tabs {
+		margin-left: 16px;
+		font-size: 0.8em;
+		overflow: auto;
+		white-space: nowrap;
+
+		> .tab {
+			display: inline-block;
+			position: relative;
+			padding: 0 10px;
+			height: 100%;
+			font-weight: normal;
+			opacity: 0.7;
+
+			&:hover {
+				opacity: 1;
+			}
+
+			&.active {
+				opacity: 1;
+
+				&:after {
+					content: "";
+					display: block;
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					right: 0;
+					margin: 0 auto;
+					width: 100%;
+					height: 3px;
+					background: var(--accent);
+				}
+			}
+
+			> .icon + .title {
+				margin-left: 8px;
+			}
+		}
+	}
+}
+</style>
--- a/src/client/components/global/spacer.vue
+++ b/src/client/components/global/spacer.vue
@@ -0,0 +1,76 @@
+<template>
+<div ref="root" :class="$style.root" :style="{ padding: margin + 'px' }">
+	<div ref="content" :class="$style.content">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+
+export default defineComponent({
+	props: {
+		contentMax: {
+			type: Number,
+			required: false,
+			default: null,
+		}
+	},
+
+	setup(props, context) {
+		let ro: ResizeObserver;
+		const root = ref<HTMLElement>(null);
+		const content = ref<HTMLElement>(null);
+		const margin = ref(0);
+		const adjust = (rect: { width: number; height: number; }) => {
+			if (rect.width > (props.contentMax || 500)) {
+				margin.value = 32;
+			} else {
+				margin.value = 12;
+			}
+		};
+
+		onMounted(() => {
+			ro = new ResizeObserver((entries) => {
+				/* iOSが対応していない
+				adjust({
+					width: entries[0].borderBoxSize[0].inlineSize,
+					height: entries[0].borderBoxSize[0].blockSize,
+				});
+				*/
+				adjust({
+					width: root.value.offsetWidth,
+					height: root.value.offsetHeight,
+				});
+			});
+			ro.observe(root.value);
+
+			if (props.contentMax) {
+				content.value.style.maxWidth = `${props.contentMax}px`;
+			}
+		});
+
+		onUnmounted(() => {
+			ro.disconnect();
+		});
+
+		return {
+			root,
+			content,
+			margin,
+		};
+	},
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	box-sizing: border-box;
+	width: 100%;
+}
+
+.content {
+	margin: 0 auto;
+}
+</style>
--- a/src/client/components/index.ts
+++ b/src/client/components/index.ts
@@ -13,6 +13,8 @@ import i18n from './global/i18n';
 import loading from './global/loading.vue';
 import error from './global/error.vue';
 import ad from './global/ad.vue';
+import header from './global/header.vue';
+import spacer from './global/spacer.vue';

 export default function(app: App) {
 	app.component('I18n', i18n);
@@ -28,4 +30,6 @@ export default function(app: App) {
 	app.component('MkLoading', loading);
 	app.component('MkError', error);
 	app.component('MkAd', ad);
+	app.component('MkHeader', header);
+	app.component('MkSpacer', spacer);
 }
--- a/src/client/components/instance-stats.vue
+++ b/src/client/components/instance-stats.vue
@@ -36,7 +36,7 @@
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
 import Chart from 'chart.js';
-import MkSelect from './ui/select.vue';
+import MkSelect from './form/select.vue';
 import number from '@client/filters/number';

 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
--- a/src/client/components/media-caption.vue
+++ b/src/client/components/media-caption.vue
@@ -3,10 +3,13 @@
 		<div class="container">
 			<div class="fullwidth top-caption">
 				<div class="mk-dialog">
-					<header v-if="title"><Mfm :text="title"/></header>
+					<header>
+						<Mfm v-if="title" class="title" :text="title"/>
+						<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
+					</header>
 					<textarea autofocus v-model="inputValue" :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
 					<div class="buttons" v-if="(showOkButton || showCancelButton)">
-						<MkButton inline @click="ok" primary>{{ $ts.ok }}</MkButton>
+						<MkButton inline @click="ok" primary :disabled="remainingLength < 0">{{ $ts.ok }}</MkButton>
 						<MkButton inline @click="cancel" >{{ $ts.cancel }}</MkButton>
 					</div>
 				</div>
@@ -26,10 +29,12 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
+import { length } from 'stringz';
 import MkModal from '@client/components/ui/modal.vue';
 import MkButton from '@client/components/ui/button.vue';
 import bytes from '@client/filters/bytes';
 import number from '@client/filters/number';
+import { DB_MAX_IMAGE_COMMENT_LENGTH } from '@/misc/hard-limits';

 export default defineComponent({
 	components: {
@@ -79,6 +84,13 @@ export default defineComponent({
 		document.removeEventListener('keydown', this.onKeydown);
 	},

+	computed: {
+		remainingLength(): number {
+			if (typeof this.inputValue != "string") return DB_MAX_IMAGE_COMMENT_LENGTH;
+			return DB_MAX_IMAGE_COMMENT_LENGTH - length(this.inputValue);
+		}
+	},
+
 	methods: {
 		bytes,
 		number,
@@ -156,8 +168,18 @@ export default defineComponent({

 	> header {
 		margin: 0 0 8px 0;
-		font-weight: bold;
-		font-size: 20px;
+		position: relative;
+
+		> .title {
+			font-weight: bold;
+			font-size: 20px;
+		}
+
+		> .text-count {
+			opacity: 0.7;
+			position: absolute;
+			right: 0;
+		}
 	}

 	> .buttons {
@@ -184,7 +206,7 @@ export default defineComponent({
 		min-width: 100%;
 		min-height: 90px;

-		&:focus {
+		&:focus-visible {
 			outline: none;
 		}

--- a/src/client/components/mfm.ts
+++ b/src/client/components/mfm.ts
@@ -8,6 +8,7 @@ import { concat } from '@client/../prelude/array';
 import MkFormula from '@client/components/formula.vue';
 import MkCode from '@client/components/code.vue';
 import MkGoogle from '@client/components/google.vue';
+import MkSparkle from '@client/components/sparkle.vue';
 import MkA from '@client/components/global/a.vue';
 import { host } from '@client/config';

@@ -169,9 +170,22 @@ export default defineComponent({
 							style = this.$store.state.animatedMfm ? 'animation: mfm-rainbow 1s linear infinite;' : '';
 							break;
 						}
+						case 'sparkle': {
+							if (!this.$store.state.animatedMfm) {
+								return genEl(token.children);
+							}
+							let count = token.props.args.count ? parseInt(token.props.args.count) : 10;
+							if (count > 100) {
+								count = 100;
+							}
+							const speed = token.props.args.speed ? parseFloat(token.props.args.speed) : 1;
+							return h(MkSparkle, {
+								count, speed,
+							}, genEl(token.children));
+						}
 					}
 					if (style == null) {
-						return h('span', {}, ['[', token.props.name, ...genEl(token.children), ']']);
+						return h('span', {}, ['[', token.props.name, ' ', ...genEl(token.children), ']']);
 					} else {
 						return h('span', {
 							style: 'display: inline-block;' + style,
--- a/src/client/components/modal-page-window.vue
+++ b/src/client/components/modal-page-window.vue
@@ -2,11 +2,15 @@
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
 	<div class="hrmcaedk _window _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header" @contextmenu="onContextmenu">
-			<span class="title">
-				<XHeader :info="pageInfo" :back-button="history.length > 0" @back="back()" :close-button="true" @close="$refs.modal.close()"/>
+			<button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
+			<span v-else style="display: inline-block; width: 20px"></span>
+			<span v-if="pageInfo" class="title">
+				<i v-if="pageInfo.icon" class="icon" :class="pageInfo.icon"></i>
+				<span>{{ pageInfo.title }}</span>
 			</span>
+			<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
 		</div>
-		<div class="body _flat_">
+		<div class="body _fitSide_">
 			<keep-alive>
 				<component :is="component" v-bind="props" :ref="changePage"/>
 			</keep-alive>
@@ -18,7 +22,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkModal from '@client/components/ui/modal.vue';
-import XHeader from '@client/ui/_common_/header.vue';
 import { popout } from '@client/scripts/popout';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';
@@ -29,7 +32,6 @@ import * as os from '@client/os';
 export default defineComponent({
 	components: {
 		MkModal,
-		XHeader,
 	},

 	inject: {
@@ -42,7 +44,8 @@ export default defineComponent({
 		return {
 			navHook: (path) => {
 				this.navigate(path);
-			}
+			},
+			shouldHeaderThin: true,
 		};
 	},

@@ -172,19 +175,39 @@ export default defineComponent({
 		$height-narrow: 42px;
 		display: flex;
 		flex-shrink: 0;
+		height: $height;
+		line-height: $height;
+		font-weight: bold;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 		box-shadow: 0px 1px var(--divider);

+		> button {
+			height: $height;
+			width: $height;
+
+			&:hover {
+				color: var(--fgHighlighted);
+			}
+		}
+
+		@media (max-width: 500px) {
+			height: $height-narrow;
+			line-height: $height-narrow;
+			padding-left: 16px;
+
+			> button {
+				height: $height-narrow;
+				width: $height-narrow;
+			}
+		}
+
 		> .title {
 			flex: 1;
-			height: $height;
-			font-weight: bold;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;

-			@media (max-width: 500px) {
-				height: $height-narrow;
-				padding-left: 16px;
+			> .icon {
+				margin-right: 0.5em;
 			}
 		}
 	}
--- a/src/client/components/note-detailed.vue
+++ b/src/client/components/note-detailed.vue
@@ -59,7 +59,7 @@
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
 					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-					<XCwButton v-model:value="showContent" :note="appearNote"/>
+					<XCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div class="content" v-show="appearNote.cw == null || showContent">
 					<div class="text">
@@ -80,7 +80,7 @@
 					</div>
 					<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
 					<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="true" class="url-preview"/>
-					<div class="renote" v-if="appearNote.renote"><XNotePreview :note="appearNote.renote"/></div>
+					<div class="renote" v-if="appearNote.renote"><XNoteSimple :note="appearNote.renote"/></div>
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
@@ -132,7 +132,7 @@ import * as mfm from 'mfm-js';
 import { sum } from '../../prelude/array';
 import XSub from './note.sub.vue';
 import XNoteHeader from './note-header.vue';
-import XNotePreview from './note-preview.vue';
+import XNoteSimple from './note-simple.vue';
 import XReactionsViewer from './reactions-viewer.vue';
 import XMediaList from './media-list.vue';
 import XCwButton from './cw-button.vue';
@@ -153,7 +153,7 @@ export default defineComponent({
 	components: {
 		XSub,
 		XNoteHeader,
-		XNotePreview,
+		XNoteSimple,
 		XReactionsViewer,
 		XMediaList,
 		XCwButton,
--- a/src/client/components/note-header.vue
+++ b/src/client/components/note-header.vue
@@ -3,10 +3,10 @@
 	<MkA class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
 		<MkUserName :user="note.user"/>
 	</MkA>
-	<span class="is-bot" v-if="note.user.isBot">bot</span>
-	<span class="username"><MkAcct :user="note.user"/></span>
-	<span class="admin" v-if="note.user.isAdmin"><i class="fas fa-bookmark"></i></span>
-	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><i class="far fa-bookmark"></i></span>
+	<div class="is-bot" v-if="note.user.isBot">bot</div>
+	<div class="username"><MkAcct :user="note.user"/></div>
+	<div class="admin" v-if="note.user.isAdmin"><i class="fas fa-bookmark"></i></div>
+	<div class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><i class="far fa-bookmark"></i></div>
 	<div class="info">
 		<span class="mobile" v-if="note.viaMobile"><i class="fas fa-mobile-alt"></i></span>
 		<MkA class="created-at" :to="notePage(note)">
@@ -55,6 +55,7 @@ export default defineComponent({
 	white-space: nowrap;

 	> .name {
+		flex-shrink: 1;
 		display: block;
 		margin: 0 .5em 0 0;
 		padding: 0;
@@ -81,17 +82,20 @@ export default defineComponent({

 	> .admin,
 	> .moderator {
+		flex-shrink: 0;
 		margin-right: 0.5em;
 		color: var(--badge);
 	}

 	> .username {
+		flex-shrink: 9999999;
 		margin: 0 .5em 0 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}

 	> .info {
+		flex-shrink: 0;
 		margin-left: auto;
 		font-size: 0.9em;

--- a/src/client/components/note-preview.vue
+++ b/src/client/components/note-preview.vue
@@ -1,15 +1,13 @@
 <template>
-<div class="yohlumlk" v-size="{ min: [350, 500] }">
-	<MkAvatar class="avatar" :user="note.user"/>
+<div class="fefdfafb" v-size="{ min: [350, 500] }">
+	<MkAvatar class="avatar" :user="$i"/>
 	<div class="main">
-		<XNoteHeader class="header" :note="note" :mini="true"/>
+		<div class="header">
+			<MkUserName :user="$i"/>
+		</div>
 		<div class="body">
-			<p v-if="note.cw != null" class="cw">
-				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
-				<XCwButton v-model:value="showContent" :note="note"/>
-			</p>
-			<div class="content" v-show="note.cw == null || showContent">
-				<XSubNote-content class="text" :note="note"/>
+			<div class="content">
+				<Mfm :text="text" :author="$i" :i="$i"/>
 			</div>
 		</div>
 	</div>
@@ -18,35 +16,22 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
-import XNoteHeader from './note-header.vue';
-import XSubNoteContent from './sub-note-content.vue';
-import XCwButton from './cw-button.vue';
-import * as os from '@client/os';

 export default defineComponent({
 	components: {
-		XNoteHeader,
-		XSubNoteContent,
-		XCwButton,
 	},

 	props: {
-		note: {
-			type: Object,
+		text: {
+			type: String,
 			required: true
 		}
 	},
-
-	data() {
-		return {
-			showContent: false
-		};
-	}
 });
 </script>

 <style lang="scss" scoped>
-.yohlumlk {
+.fefdfafb {
 	display: flex;
 	margin: 0;
 	padding: 0;
--- a/src/client/components/note-simple.vue
+++ b/src/client/components/note-simple.vue
@@ -0,0 +1,113 @@
+<template>
+<div class="yohlumlk" v-size="{ min: [350, 500] }">
+	<MkAvatar class="avatar" :user="note.user"/>
+	<div class="main">
+		<XNoteHeader class="header" :note="note" :mini="true"/>
+		<div class="body">
+			<p v-if="note.cw != null" class="cw">
+				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
+				<XCwButton v-model="showContent" :note="note"/>
+			</p>
+			<div class="content" v-show="note.cw == null || showContent">
+				<XSubNote-content class="text" :note="note"/>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XNoteHeader from './note-header.vue';
+import XSubNoteContent from './sub-note-content.vue';
+import XCwButton from './cw-button.vue';
+import * as os from '@client/os';
+
+export default defineComponent({
+	components: {
+		XNoteHeader,
+		XSubNoteContent,
+		XCwButton,
+	},
+
+	props: {
+		note: {
+			type: Object,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			showContent: false
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.yohlumlk {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	overflow: clip;
+	font-size: 0.95em;
+
+	&.min-width_350px {
+		> .avatar {
+			margin: 0 10px 0 0;
+			width: 44px;
+			height: 44px;
+		}
+	}
+
+	&.min-width_500px {
+		> .avatar {
+			margin: 0 12px 0 0;
+			width: 48px;
+			height: 48px;
+		}
+	}
+
+	> .avatar {
+		flex-shrink: 0;
+		display: block;
+		margin: 0 10px 0 0;
+		width: 40px;
+		height: 40px;
+		border-radius: 8px;
+	}
+
+	> .main {
+		flex: 1;
+		min-width: 0;
+
+		> .header {
+			margin-bottom: 2px;
+		}
+
+		> .body {
+
+			> .cw {
+				cursor: default;
+				display: block;
+				margin: 0;
+				padding: 0;
+				overflow-wrap: break-word;
+
+				> .text {
+					margin-right: 8px;
+				}
+			}
+
+			> .content {
+				> .text {
+					cursor: default;
+					margin: 0;
+					padding: 0;
+				}
+			}
+		}
+	}
+}
+</style>
--- a/src/client/components/note.sub.vue
+++ b/src/client/components/note.sub.vue
@@ -7,7 +7,7 @@
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
 					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis" />
-					<XCwButton v-model:value="showContent" :note="note"/>
+					<XCwButton v-model="showContent" :note="note"/>
 				</p>
 				<div class="content" v-show="note.cw == null || showContent">
 					<XSubNote-content class="text" :note="note"/>
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -43,7 +43,7 @@
 			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
 					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-					<XCwButton v-model:value="showContent" :note="appearNote"/>
+					<XCwButton v-model="showContent" :note="appearNote"/>
 				</p>
 				<div class="content" :class="{ collapsed }" v-show="appearNote.cw == null || showContent">
 					<div class="text">
@@ -64,7 +64,7 @@
 					</div>
 					<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
 					<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="false" class="url-preview"/>
-					<div class="renote" v-if="appearNote.renote"><XNotePreview :note="appearNote.renote"/></div>
+					<div class="renote" v-if="appearNote.renote"><XNoteSimple :note="appearNote.renote"/></div>
 					<button v-if="collapsed" class="fade _button" @click="collapsed = false">
 						<span>{{ $ts.showMore }}</span>
 					</button>
@@ -114,7 +114,7 @@ import * as mfm from 'mfm-js';
 import { sum } from '../../prelude/array';
 import XSub from './note.sub.vue';
 import XNoteHeader from './note-header.vue';
-import XNotePreview from './note-preview.vue';
+import XNoteSimple from './note-simple.vue';
 import XReactionsViewer from './reactions-viewer.vue';
 import XMediaList from './media-list.vue';
 import XCwButton from './cw-button.vue';
@@ -134,7 +134,7 @@ export default defineComponent({
 	components: {
 		XSub,
 		XNoteHeader,
-		XNotePreview,
+		XNoteSimple,
 		XReactionsViewer,
 		XMediaList,
 		XCwButton,
@@ -888,7 +888,7 @@ export default defineComponent({
 	//content-visibility: auto;
  //contain-intrinsic-size: 0 128px;

-	&:focus {
+	&:focus-visible {
 		outline: none;

 		&:after {
--- a/src/client/components/notification-setting-window.vue
+++ b/src/client/components/notification-setting-window.vue
@@ -29,10 +29,10 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
-import MkSwitch from './ui/switch.vue';
+import MkSwitch from './form/switch.vue';
 import MkInfo from './ui/info.vue';
 import MkButton from './ui/button.vue';
-import { notificationTypes } from '../../types';
+import { notificationTypes } from '@/types';

 export default defineComponent({
 	components: {
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -26,7 +26,7 @@ import paging from '@client/scripts/paging';
 import XNotification from './notification.vue';
 import XList from './date-separated-list.vue';
 import XNote from './note.vue';
-import { notificationTypes } from '../../types';
+import { notificationTypes } from '@/types';
 import * as os from '@client/os';
 import MkButton from '@client/components/ui/button.vue';

@@ -48,6 +48,11 @@ export default defineComponent({
 			required: false,
 			default: null,
 		},
+		unreadOnly: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
 	},

 	data() {
@@ -58,6 +63,7 @@ export default defineComponent({
 				limit: 10,
 				params: () => ({
 					includeTypes: this.allIncludeTypes || undefined,
+					unreadOnly: this.unreadOnly,
 				})
 			},
 		};
@@ -76,6 +82,11 @@ export default defineComponent({
 			},
 			deep: true
 		},
+		unreadOnly: {
+			handler() {
+				this.reload();
+			},
+		},
 		// TODO: vue/vuexのバグか仕様かは不明なものの、プロフィール更新するなどして $i が更新されると、
 		// mutingNotificationTypes に変化が無くてもこのハンドラーが呼び出され無駄なリロードが発生するのを直す
 		'$i.mutingNotificationTypes': {
--- a/src/client/components/page-window.vue
+++ b/src/client/components/page-window.vue
@@ -3,14 +3,20 @@
 	:initial-width="500"
 	:initial-height="500"
 	:can-resize="true"
-	:close-button="false"
+	:close-button="true"
 	:contextmenu="contextmenu"
 	@closed="$emit('closed')"
 >
 	<template #header>
-		<XHeader :info="pageInfo" :back-button="history.length > 0" @back="back()" :close-button="true" @close="close()"/>
+		<template v-if="pageInfo">
+			<i v-if="pageInfo.icon" class="icon" :class="pageInfo.icon" style="margin-right: 0.5em;"></i>
+			<span>{{ pageInfo.title }}</span>
+		</template>
 	</template>
-	<div class="yrolvcoq _flat_">
+	<template #headerLeft>
+		<button v-if="history.length > 0" class="_button" @click="back()" v-tooltip="$ts.goBack"><i class="fas fa-arrow-left"></i></button>
+	</template>
+	<div class="yrolvcoq _fitSide_">
 		<component :is="component" v-bind="props" :ref="changePage"/>
 	</div>
 </XWindow>
@@ -19,7 +25,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XWindow from '@client/components/ui/window.vue';
-import XHeader from '@client/ui/_common_/header.vue';
 import { popout } from '@client/scripts/popout';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';
@@ -29,7 +34,6 @@ import * as symbols from '@client/symbols';
 export default defineComponent({
 	components: {
 		XWindow,
-		XHeader,
 	},

 	inject: {
@@ -42,7 +46,8 @@ export default defineComponent({
 		return {
 			navHook: (path) => {
 				this.navigate(path);
-			}
+			},
+			shouldHeaderThin: true,
 		};
 	},

--- a/src/client/components/page/page.number-input.vue
+++ b/src/client/components/page/page.number-input.vue
@@ -8,7 +8,7 @@

 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../ui/input.vue';
+import MkInput from '../form/input.vue';
 import * as os from '@client/os';
 import { Hpml } from '@client/scripts/hpml/evaluator';
 import { NumberInputVarBlock } from '@client/scripts/hpml/block';
--- a/src/client/components/page/page.post.vue
+++ b/src/client/components/page/page.post.vue
@@ -10,7 +10,7 @@

 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../ui/textarea.vue';
+import MkTextarea from '../form/textarea.vue';
 import MkButton from '../ui/button.vue';
 import { apiUrl } from '@client/config';
 import * as os from '@client/os';
--- a/src/client/components/page/page.radio-button.vue
+++ b/src/client/components/page/page.radio-button.vue
@@ -7,7 +7,7 @@

 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import MkRadio from '../ui/radio.vue';
+import MkRadio from '../form/radio.vue';
 import * as os from '@client/os';
 import { Hpml } from '@client/scripts/hpml/evaluator';
 import { RadioButtonVarBlock } from '@client/scripts/hpml/block';
--- a/src/client/components/page/page.switch.vue
+++ b/src/client/components/page/page.switch.vue
@@ -6,7 +6,7 @@

 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import MkSwitch from '../ui/switch.vue';
+import MkSwitch from '../form/switch.vue';
 import * as os from '@client/os';
 import { Hpml } from '@client/scripts/hpml/evaluator';
 import { SwitchVarBlock } from '@client/scripts/hpml/block';
--- a/src/client/components/page/page.text-input.vue
+++ b/src/client/components/page/page.text-input.vue
@@ -8,7 +8,7 @@

 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../ui/input.vue';
+import MkInput from '../form/input.vue';
 import * as os from '@client/os';
 import { Hpml } from '@client/scripts/hpml/evaluator';
 import { TextInputVarBlock } from '@client/scripts/hpml/block';
--- a/src/client/components/page/page.textarea-input.vue
+++ b/src/client/components/page/page.textarea-input.vue
@@ -8,7 +8,7 @@

 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import MkTextarea from '../ui/textarea.vue';
+import MkTextarea from '../form/textarea.vue';
 import * as os from '@client/os';
 import { Hpml } from '@client/scripts/hpml/evaluator';
 import { HpmlTextInput } from '@client/scripts/hpml';
--- a/src/client/components/page/page.textarea.vue
+++ b/src/client/components/page/page.textarea.vue
@@ -6,7 +6,7 @@
 import { TextBlock } from '@client/scripts/hpml/block';
 import { Hpml } from '@client/scripts/hpml/evaluator';
 import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../ui/textarea.vue';
+import MkTextarea from '../form/textarea.vue';

 export default defineComponent({
 	components: {
--- a/src/client/components/poll-editor.vue
+++ b/src/client/components/poll-editor.vue
@@ -51,9 +51,9 @@
 import { defineComponent } from 'vue';
 import { addTime } from '../../prelude/time';
 import { formatDateTimeString } from '@/misc/format-time-string';
-import MkInput from './ui/input.vue';
-import MkSelect from './ui/select.vue';
-import MkSwitch from './ui/switch.vue';
+import MkInput from './form/input.vue';
+import MkSelect from './form/select.vue';
+import MkSwitch from './form/switch.vue';
 import MkButton from './ui/button.vue';

 export default defineComponent({
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="gafaadew" :class="{ modal, _popup: modal }"
-	v-size="{ max: [500] }"
+	v-size="{ max: [310, 500] }"
 	@dragover.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
@@ -17,12 +17,13 @@
 				<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
 				<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
 			</button>
-			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post" data-cy-open-post-form-submit>{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
+			<button class="_button preview" @click="showPreview = !showPreview" :class="{ active: showPreview }" v-tooltip="$ts.previewNoteText"><i class="fas fa-file-code"></i></button>
+			<button class="submit _buttonGradate" :disabled="!canPost" @click="post" data-cy-open-post-form-submit>{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
-		<XNotePreview class="preview" v-if="reply" :note="reply"/>
-		<XNotePreview class="preview" v-if="renote" :note="renote"/>
+		<XNoteSimple class="preview" v-if="reply" :note="reply"/>
+		<XNoteSimple class="preview" v-if="renote" :note="renote"/>
 		<div class="with-quote" v-if="quoteId"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
 		<div v-if="visibility === 'specified'" class="to-specified">
 			<span style="margin-right: 8px;">{{ $ts.recipient }}</span>
@@ -40,6 +41,7 @@
 		<input v-show="withHashtags" ref="hashtags" class="hashtags" v-model="hashtags" :placeholder="$ts.hashtags" list="hashtags">
 		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
+		<XNotePreview class="preview" v-if="showPreview" :text="text"/>
 		<footer>
 			<button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><i class="fas fa-photo-video"></i></button>
 			<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
@@ -61,6 +63,7 @@ import { defineComponent, defineAsyncComponent } from 'vue';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { length } from 'stringz';
 import { toASCII } from 'punycode/';
+import XNoteSimple from './note-simple.vue';
 import XNotePreview from './note-preview.vue';
 import * as mfm from 'mfm-js';
 import { host, url } from '@client/config';
@@ -80,6 +83,7 @@ import { defaultStore } from '@client/store';

 export default defineComponent({
 	components: {
+		XNoteSimple,
 		XNotePreview,
 		XPostFormAttaches: defineAsyncComponent(() => import('./post-form-attaches.vue')),
 		XPollEditor: defineAsyncComponent(() => import('./poll-editor.vue')),
@@ -143,6 +147,7 @@ export default defineComponent({
 			files: [],
 			poll: null,
 			useCw: false,
+			showPreview: false,
 			cw: null,
 			localOnly: this.$store.state.rememberNoteVisibility ? this.$store.state.localOnly : this.$store.state.defaultNoteLocalOnly,
 			visibility: this.$store.state.rememberNoteVisibility ? this.$store.state.visibility : this.$store.state.defaultNoteVisibility,
@@ -717,7 +722,7 @@ export default defineComponent({
 			> .visibility {
 				height: 34px;
 				width: 34px;
-				margin: 0 8px;
+				margin: 0 0 0 8px;

 				& + .localOnly {
 					margin-left: 0 !important;
@@ -729,6 +734,24 @@ export default defineComponent({
 				opacity: 0.7;
 			}

+			> .preview {
+				display: inline-block;
+				padding: 0;
+				margin: 0 8px 0 0;
+				font-size: 16px;
+				width: 34px;
+				height: 34px;
+				border-radius: 6px;
+
+				&:hover {
+					background: var(--X5);
+				}
+
+				&.active {
+					color: var(--accent);
+				}
+			}
+
 			> .submit {
 				margin: 16px 16px 16px 0;
 				padding: 0 12px;
@@ -736,6 +759,7 @@ export default defineComponent({
 				font-weight: bold;
 				vertical-align: bottom;
 				border-radius: 4px;
+				font-size: 0.9em;

 				&:disabled {
 					opacity: 0.7;
@@ -819,7 +843,7 @@ export default defineComponent({
 			color: var(--fg);
 			font-family: inherit;

-			&:focus {
+			&:focus-visible {
 				outline: none;
 			}

@@ -914,5 +938,17 @@ export default defineComponent({
 			}
 		}
 	}
+
+	&.max-width_310px {
+		> .form {
+			> footer {
+				> button {
+					font-size: 14px;
+					width: 44px;
+				height: 44px;
+				}
+			}
+		}
+	}
 }
 </style>
--- a/src/client/components/sample.vue
+++ b/src/client/components/sample.vue
@@ -30,10 +30,10 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
-import MkSwitch from '@client/components/ui/switch.vue';
-import MkTextarea from '@client/components/ui/textarea.vue';
-import MkRadio from '@client/components/ui/radio.vue';
+import MkInput from '@client/components/form/input.vue';
+import MkSwitch from '@client/components/form/switch.vue';
+import MkTextarea from '@client/components/form/textarea.vue';
+import MkRadio from '@client/components/form/radio.vue';
 import * as os from '@client/os';
 import * as config from '@client/config';

--- a/src/client/components/signin.vue
+++ b/src/client/components/signin.vue
@@ -1,17 +1,17 @@
 <template>
 <form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
-	<div class="auth _section">
+	<div class="auth _section _formRoot">
 		<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 		<div class="normal-signin" v-if="!totpLogin">
-			<MkInput v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange" data-cy-signin-username>
+			<MkInput class="_formBlock" v-model="username" :placeholder="$ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @update:modelValue="onUsernameChange" data-cy-signin-username>
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
 			</MkInput>
-			<MkInput v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required data-cy-signin-password>
+			<MkInput class="_formBlock" v-model="password" :placeholder="$ts.password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required data-cy-signin-password>
 				<template #prefix><i class="fas fa-lock"></i></template>
 				<template #caption><button class="_textButton" @click="resetPassword" type="button">{{ $ts.forgotPassword }}</button></template>
 			</MkInput>
-			<MkButton type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
+			<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
 		</div>
 		<div class="2fa-signin" v-if="totpLogin" :class="{ securityKeys: user && user.securityKeys }">
 			<div v-if="user && user.securityKeys" class="twofa-group tap-group">
@@ -49,11 +49,12 @@
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
 import MkButton from '@client/components/ui/button.vue';
-import MkInput from '@client/components/ui/input.vue';
+import MkInput from '@client/components/form/input.vue';
 import { apiUrl, host } from '@client/config';
 import { byteify, hexify } from '@client/scripts/2fa';
 import * as os from '@client/os';
 import { login } from '@client/account';
+import { showSuspendedDialog } from '../scripts/show-suspended-dialog';

 export default defineComponent({
 	components: {
@@ -169,15 +170,7 @@ export default defineComponent({
 						this.signing = false;
 						this.challengeData = res;
 						return this.queryKey();
-					}).catch(() => {
-						os.dialog({
-							type: 'error',
-							text: this.$ts.signinFailed
-						});
-						this.challengeData = null;
-						this.totpLogin = false;
-						this.signing = false;
-					});
+					}).catch(this.loginFailed);
 				} else {
 					this.totpLogin = true;
 					this.signing = false;
@@ -190,14 +183,36 @@ export default defineComponent({
 				}).then(res => {
 					this.$emit('login', res);
 					this.onLogin(res);
-				}).catch(() => {
+				}).catch(this.loginFailed);
+			}
+		},
+
+		loginFailed(err) {
+			switch (err.id) {
+				case '6cc579cc-885d-43d8-95c2-b8c7fc963280': {
 					os.dialog({
 						type: 'error',
-						text: this.$ts.loginFailed
+						title: this.$ts.loginFailed,
+						text: this.$ts.noSuchUser
 					});
-					this.signing = false;
-				});
+					break;
+				}
+				case 'e03a5f46-d309-4865-9b69-56282d94e1eb': {
+					showSuspendedDialog();
+					break;
+				}
+				default: {
+					os.dialog({
+						type: 'error',
+						title: this.$ts.loginFailed,
+						text: JSON.stringify(err)
+					});
+				}
 			}
+
+			this.challengeData = null;
+			this.totpLogin = false;
+			this.signing = false;
 		},

 		resetPassword() {
--- a/src/client/components/signup-dialog.vue
+++ b/src/client/components/signup-dialog.vue
@@ -9,7 +9,7 @@

 	<div class="_monolithic_">
 		<div class="_section">
-			<XSignup :auto-set="autoSet" @signup="onSignup"/>
+			<XSignup :auto-set="autoSet" @signup="onSignup" @signupEmailPending="onSignupEmailPending"/>
 		</div>
 	</div>
 </XModalWindow>
@@ -40,6 +40,10 @@ export default defineComponent({
 		onSignup(res) {
 			this.$emit('done', res);
 			this.$refs.dialog.close();
+		},
+
+		onSignupEmailPending() {
+			this.$refs.dialog.close();
 		}
 	}
 });
--- a/Show More
+++ b/Show More