12.65.6

Bumps [vue-color](https://github.com/xiaokaike/vue-color) from 2.7.1 to 2.8.1.
- [Release notes](https://github.com/xiaokaike/vue-color/releases)
- [Commits](https://github.com/xiaokaike/vue-color/compare/v2.7.1...v2.8.1)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

.circleci/config.yml

@@ -4,7 +4,7 @@ executors:
   docker:
     working_directory: /tmp/workspace
     docker:
-      - image: docker:12.10.1
+      - image: docker:latest
 
 jobs:
   docker:

locales/de-DE.yml

@@ -625,7 +625,7 @@ createNew: "Neu erstellen"
 optional: "Optional"
 createNewClip: "Neuen Clip erstellen"
 public: "Öffentlich"
-i18nInfo: "Misskey wird durch freiwillige Helfer in viele verschiedene Sprachen übersetzt. Unter {link} kannst du mithelfen."
+i18nInfo: "Misskey wird durch freiwillige Helfer in viele verschiedene Sprachen übersetzt. Auf {link} kannst du mithelfen."
 manageAccessTokens: "Zugriffstoken verwalten"
 accountInfo: "Benutzerkonto-Informationen"
 notesCount: "Anzahl von Notizen"
@@ -669,7 +669,8 @@ left: "Links"
 center: "Mitte"
 wide: "Breit"
 narrow: "Schmal"
-reloadToApplySetting: "Einstellungen treten nach einer Aktualisierung der Seite in Kraft. Jetzt aktualisieren?"
+reloadToApplySetting: "Diese Einstellung tritt nach einer Aktualisierung der Seite in Kraft. Jetzt aktualisieren?"
+showTitlebar: "Titelleiste anzeigen"
 _aboutMisskey:
   about: "Misskey ist Open-Source-Software die von syuilo seit 2014 entwickelt wird."
   contributors: "Hauptmitwirkende"

locales/en-US.yml

@@ -66,7 +66,7 @@ exportRequested: "You have requested an export. This may take a while. After the
 importRequested: "You requested an import. This may take a while."
 lists: "Lists"
 noLists: "You don't have any lists"
-note: "Notes"
+note: "Note"
 notes: "Notes"
 following: "Following"
 followers: "Followers"
@@ -251,7 +251,7 @@ birthday: "Birthday"
 yearsOld: "{age} years old"
 registeredDate: "Joined on"
 location: "Location"
-theme: "Theme"
+theme: "Themes"
 themeForLightMode: "Theme to use in Light Mode"
 themeForDarkMode: "Theme to use in Dark Mode"
 light: "Light"
@@ -669,7 +669,8 @@ left: "Left"
 center: "Center"
 wide: "Wide"
 narrow: "Narrow"
-reloadToApplySetting: "Settings will be applied upon page reload. Reload now?"
+reloadToApplySetting: "This setting will be applied upon page reload. Reload now?"
+showTitlebar: "Show title bar"
 _aboutMisskey:
   about: "Misskey is open-source software being developed by syuilo since 2014."
   contributors: "Main contributors"

locales/ht-HT.yml

@@ -0,0 +1 @@
+---

locales/it-IT.yml

@@ -0,0 +1 @@
+---

locales/ja-JP.yml

@@ -1,5 +1,6 @@
 _lang_: "日本語"
 
+headlineMisskey: "ノートでつながるネットワーク"
 introMisskey: "ようこそ！Misskeyは、オープンソースの分散型マイクロブログサービスです。\n「ノート」を作成して、いま起こっていることを共有したり、あなたについて皆に発信しよう📡\n「リアクション」機能で、皆のノートに素早く反応を追加することもできます👍\n新しい世界を探検しよう🚀"
 monthAndDay: "{month}月 {day}日"
 search: "検索"
@@ -49,6 +50,7 @@ copyUsername: "ユーザー名をコピー"
 searchUser: "ユーザーを検索"
 reply: "返信"
 loadMore: "もっと見る"
+showMore: "もっと見る"
 youGotNewFollower: "フォローされました"
 receiveFollowRequest: "フォローリクエストされました"
 followRequestAccepted: "フォローが承認されました"
@@ -670,6 +672,11 @@ center: "中央"
 wide: "広い"
 narrow: "狭い"
 reloadToApplySetting: "設定はページリロード後に反映されます。今すぐリロードしますか？"
+showTitlebar: "タイトルバーを表示する"
+clearCache: "キャッシュをクリア"
+onlineUsersCount: "{n}人がオンライン"
+nUsers: "{n}ユーザー"
+nNotes: "{n}ノート"
 
 _aboutMisskey:
   about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。"
@@ -729,11 +736,19 @@ _mfm:
   bounce: "アニメーション(バウンド)"
   bounceDescription: "ぽよんぽよん弾むようなアニメーションを与えます。"
   shake: "アニメーション(ぶるぶる)"
-  shakeDescription: "ぶるぶるするアニメーションを与えます。"
+  shakeDescription: "ぶるぶる震えるアニメーションを与えます。"
   twitch: "アニメーション(ブレ)"
   twitchDescription: "激しくブレるアニメーションを与えます。"
   spin: "アニメーション(回転)"
   spinDescription: "回転するアニメーションを与えます。"
+  x2: "大きく"
+  x2Description: "内容を大きく表示します。"
+  x3: "とても大きく"
+  x3Description: "内容をとても大きく表示します。"
+  x4: "究極に大きく"
+  x4Description: "内容を究極に大きく表示します。"
+  blur: "ぼかし"
+  blurDescription: "内容をぼかすことができます。ポインターを上に乗せるとはっきり見えるようになります。"
 
 _reversi:
   reversi: "リバーシ"
@@ -1012,6 +1027,7 @@ _widgets:
   postForm: "投稿フォーム"
   slideshow: "スライドショー"
   button: "ボタン"
+  onlineUsers: "オンラインユーザー"
 
 _cw:
   hide: "隠す"

locales/zh-CN.yml

@@ -670,6 +670,7 @@ center: "中央"
 wide: "宽"
 narrow: "窄"
 reloadToApplySetting: "页面刷新后设置才会生效。是否现在刷新页面？"
+showTitlebar: "显示标题栏"
 _aboutMisskey:
   about: "Misskey是由syuilo于2014年开发的开源软件。"
   contributors: "主要贡献者"

locales/zh-TW.yml

@@ -33,6 +33,9 @@ addUser: "新增使用者"
 favorite: "收藏"
 favorites: "已加星號"
 unfavorite: "取消收藏"
+favorited: "已添加至收藏夾"
+alreadyFavorited: "已經有添加入收藏夾過了"
+cantFavorite: "無法添加至收藏夾"
 pin: "置頂"
 unpin: "取消置頂"
 copyContent: "複製內容"
@@ -74,6 +77,7 @@ error: "錯誤"
 somethingHappened: "發生錯誤"
 retry: "重試"
 pageLoadError: "載入頁面失敗"
+pageLoadErrorDescription: "這通常是因為網路錯誤或是瀏覽器快取殘留的原因。請先清除瀏覽器快取，稍後再重試"
 enterListName: "輸入清單名稱"
 privacy: "隱私"
 makeFollowManuallyApprove: "手動審核追隨請求"
@@ -87,6 +91,8 @@ enterEmoji: "輸入表情符號"
 renote: "轉發貼文"
 unrenote: "取消轉發貼文"
 renoted: "轉發成功"
+cantRenote: "這篇貼文無法轉發。"
+cantReRenote: "無法轉發之前已經轉發過的內容"
 quote: "引用"
 pinnedNote: "已置頂的貼文"
 you: "您"
@@ -95,6 +101,7 @@ sensitive: "敏感內容"
 add: "新增"
 reaction: "反應"
 reactionSettingDescription: "置頂「反應」表情符號\n"
+reactionSettingDescription2: "拖動以重新列序，點擊以刪除，按下 + 添加。"
 rememberNoteVisibility: "記住筆記隱私設定"
 attachCancel: "移除附件"
 markAsSensitive: "標記為敏感內容"
@@ -124,7 +131,9 @@ settingGuide: "推薦設定"
 cacheRemoteFiles: "緩存非遠程檔案"
 cacheRemoteFilesDescription: "禁用此設定會停止遠端檔案的緩存，從而節省儲存空間。但資料會因直接連線從而產生額外連接數據。"
 flagAsBot: "此使用者是機器人"
+flagAsBotDescription: "如果本帳戶是由程式控制，請啟用此選項。啟用後，會作為標示幫助其他開發者防止機器人之間產生無限互動的行為，並會調整Misskey內部系統將本帳戶識別為機器人"
 flagAsCat: "此使用者是貓"
+flagAsCatDescription: "如果想將本帳戶標示為一隻貓，請開啟此標示"
 autoAcceptFollowed: "自動許可追隨"
 addAcount: "新增帳號"
 loginFailed: "登入失敗"
@@ -214,6 +223,7 @@ remove: "刪除"
 removed: "成功移除"
 removeAreYouSure: "確定要刪掉「{x}」嗎？"
 deleteAreYouSure: "確定要刪掉「{x}」嗎？"
+resetAreYouSure: "確定要重設嗎？"
 saved: "已保存"
 messaging: "傳送訊息"
 upload: "上傳"
@@ -313,6 +323,8 @@ bannerUrl: "橫幅圖片URL"
 basicInfo: "基本資訊"
 pinnedUsers: "置頂用戶"
 pinnedUsersDescription: "在「發現」頁面中使用換行標記想要置頂的用戶。"
+pinnedPages: "釘選頁面"
+pinnedPagesDescription: "輸入要固定至實例首頁的頁面路徑，以換行符分隔。"
 pinnedNotes: "已置頂的貼文"
 hcaptcha: "hCaptcha"
 enableHcaptcha: "啟用 hCaptcha"
@@ -428,6 +440,7 @@ useOsNativeEmojis: "使用OS原生表情符號"
 youHaveNoGroups: "找不到群組"
 joinOrCreateGroup: "請加入現有群組，或創建新群組。"
 noHistory: "沒有歷史紀錄"
+signinHistory: "登錄歷史"
 disableAnimatedMfm: "禁用MFM動畫"
 doing: "正在進行"
 category: "類別"
@@ -437,7 +450,9 @@ createAccount: "建立帳戶"
 existingAcount: "現有帳戶"
 regenerate: "再生"
 fontSize: "字體大小"
+noFollowRequests: "沒有要求跟隨您的申請"
 openImageInNewTab: "於新分頁中開啟圖片"
+dashboard: "儀表板"
 local: "本地"
 remote: "遠端"
 total: "合計"
@@ -459,14 +474,18 @@ objectStorageEndpointDesc: "如要使用AWS S3，請留空。否則請根據伺
 objectStorageRegion: "地域（Region）"
 objectStorageUseSSL: "使用SSL"
 objectStorageUseProxy: "使用網路代理"
+objectStorageSetPublicRead: "上載時設定為\"public-read\""
 serverLogs: "伺服器日誌"
 deleteAll: "刪除所有記錄"
+showFixedPostForm: "在時間線頂部顯示貼文表格"
 newNoteRecived: "有新的箋文"
 sounds: "音效"
 listen: "聆聽"
 none: "無"
 showInPage: "在頁面中顯示"
+popout: "彈出型窗口"
 volume: "音量"
+masterVolume: "主音量"
 details: "詳細資訊"
 chooseEmoji: "選擇您的表情符號\n"
 unableToProcess: "操作無法完成"
@@ -484,10 +503,12 @@ descendingOrder: "降冪"
 scratchpad: "暫存記憶體"
 output: "輸出"
 script: "腳本"
+disablePagesScript: "停用頁面的AiScript腳本"
 updateRemoteUser: "更新非本地用戶資料"
 deleteAllFiles: "刪除所有檔案"
 deleteAllFilesConfirm: "要删除所有檔案吗？"
 removeAllFollowing: "解除所有追隨"
+removeAllFollowingDescription: "解除{host}所有的跟隨。在實例不再存在時執行。"
 userSuspended: "該用戶已被凍結"
 userSilenced: "該用戶已被禁言。"
 sidebar: "側邊列"
@@ -517,6 +538,7 @@ plugins: "插件"
 pluginInstallWarn: "請不要安裝來源不明的插件。"
 deck: "多欄模式"
 undeck: "取消多欄模式"
+useBlurEffectForModal: "在模態框使用模糊效果"
 width: "寬度"
 height: "高度"
 large: "大"
@@ -542,6 +564,8 @@ smtpPass: "密碼"
 emptyToDisableSmtpAuth: "留空使用者名稱和密碼以禁用SMTP驗證。"
 testEmail: "郵件測試發送"
 wordMute: "靜音文字"
+userSaysSomething: "{name}說了什麼"
+makeActive: "啟用"
 display: "檢視"
 copy: "複製"
 metrics: "指標"
@@ -552,16 +576,23 @@ database: "資料庫"
 channel: "頻道"
 create: "新增"
 notificationSetting: "通知設定"
+notificationSettingDesc: "選擇顯示通知的類型"
+useGlobalSetting: "使用全域設定"
 other: "其他"
 regenerateLoginTokenDescription: "再生用於登入的內部權杖。一般情況下是不需要這樣做的。一旦再生，所有裝置將會被登出。"
+fileIdOrUrl: "文檔ID或者URL"
+chatOpenBehavior: "開啟聊天窗口時的行為"
 behavior: "行為"
 sample: "範例 "
 abuseReports: "檢舉"
 reportAbuse: "檢舉"
 reportAbuseOf: "檢舉{name}"
 fillAbuseReportDescription: "請填寫檢舉的詳細理由。可以的話，請附上針對的URL網址。"
+abuseReported: "內容已經發送。感謝您的報告。"
 send: "發送"
+abuseMarkAsResolved: "處理完畢"
 openInNewTab: "在新分頁中開啟"
+openInSideView: "在側欄中開啟"
 instanceTicker: "箋文的實例資訊"
 random: "隨機"
 system: "系統"
@@ -578,16 +609,37 @@ driveFilesCount: "雲端硬碟檔案數量"
 driveUsage: "雲端硬碟使用量"
 noCrawleDescription: "請求網路搜尋引擎不要索引你的個人資料頁、箋文及頁面等。"
 lockedAccountInfo: "即使你通過了追隨者請求，除非你將筆記的公開範圍設定為 「追隨者」，否則任何人都能看見你的箋文。"
+notSet: "未設定"
 noteFavoritesCount: "收藏箋文的數目"
+pageLikesCount: "頁面被喜歡次數"
+pageLikedCount: "頁面被喜歡次數"
 contact: "聯絡人"
 clips: "標籤"
 experimentalFeatures: "測試中的功能"
 developer: "開發者"
 showGapBetweenNotesInTimeline: "分開顯示時間線上的箋文。"
+duplicate: "複製"
+left: "左"
+center: "向中央"
+wide: "寬"
+narrow: "窄"
+reloadToApplySetting: "設定將會在頁面重新載入之後生效。要現在就重載頁面嗎？"
+showTitlebar: "顯示標題列"
 _aboutMisskey:
   about: "Misskey是由syuilo於2014年開發的開源軟件。"
   contributors: "主要貢獻者"
+  allContributors: "全體貢獻人員"
+  source: "原始碼"
+  translation: "翻譯Misskey"
+  donate: "捐贈給Misskey"
+  morePatrons: "感謝你們的支持、 幫助。 🥰"
+  patrons: "贊助者"
+_nsfw:
+  respect: "隱藏NSFW內容"
+  ignore: "不隱藏NSFW內容"
+  force: "隱藏所有內容"
 _mfm:
+  cheatSheet: "MFM代碼小抄"
   mention: "提及"
   hashtag: "#tag"
   url: "URL"
@@ -892,9 +944,14 @@ _rooms:
 _pages:
   newPage: "建立頁面"
   editPage: "編輯頁面"
+  readPage: "正檢視原始碼"
   created: "頁面已建立"
   updated: "頁面已更新"
   deleted: "頁面已被刪除"
+  pageSetting: "頁面設定"
+  nameAlreadyExists: "指定的頁面URL已經存在"
+  invalidNameTitle: "指定的頁面URL無效"
+  invalidNameText: "請確定是否為非空白"
   editThisPage: "編輯此頁面"
   viewSource: "檢視原始碼"
   viewPage: "顯示頁面"
@@ -902,14 +959,28 @@ _pages:
   unlike: "收回喜歡"
   my: "我的頁面"
   liked: "已喜歡的頁面"
+  featured: "人氣"
   inspector: "面板檢查"
+  contents: "內容"
+  content: "頁面方塊"
   variables: "變數"
   title: "標題"
   url: "頁面網址"
+  summary: "頁面摘要"
+  alignCenter: "置中"
+  hideTitleWhenPinned: "被置頂於個人資料時隱藏頁面標題"
   font: "字型"
   fontSerif: "襯線體"
   fontSansSerif: "無襯線體"
+  eyeCatchingImageSet: "設定封面影像"
+  eyeCatchingImageRemove: "刪除封面影像"
+  chooseBlock: "新增方塊"
+  selectType: "選擇類型"
+  enterVariableName: "請輸入變數名稱"
+  variableNameIsAlreadyUsed: "變數名稱已被佔用"
+  contentBlocks: "內容"
   inputBlocks: "輸入"
+  specialBlocks: "特殊"
   blocks:
     text: "文本"
     textarea: "文字區域"

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.64.2",
+	"version": "12.65.6",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
@@ -87,7 +87,7 @@
 		"@types/pug": "2.0.4",
 		"@types/qrcode": "1.3.5",
 		"@types/random-seed": "0.3.3",
-		"@types/ratelimiter": "3.4.0",
+		"@types/ratelimiter": "3.4.1",
 		"@types/redis": "2.8.28",
 		"@types/rename": "1.0.2",
 		"@types/request-stats": "3.0.0",
@@ -105,7 +105,7 @@
 		"@types/websocket": "1.0.1",
 		"@types/ws": "7.4.0",
 		"@typescript-eslint/parser": "4.10.0",
-		"@vue/compiler-sfc": "3.0.3",
+		"@vue/compiler-sfc": "3.0.5",
 		"abort-controller": "3.0.0",
 		"apexcharts": "3.22.3",
 		"autobind-decorator": "2.4.0",
@@ -204,7 +204,7 @@
 		"qrcode": "1.4.4",
 		"random-seed": "0.3.0",
 		"ratelimiter": "3.4.1",
-		"re2": "1.15.8",
+		"re2": "1.15.9",
 		"recaptcha-promise": "1.0.0",
 		"reconnecting-websocket": "4.4.0",
 		"redis": "3.0.2",
@@ -237,14 +237,14 @@
 		"tslint": "6.1.3",
 		"tslint-sonarts": "1.9.0",
 		"typeorm": "0.2.29",
-		"typescript": "4.1.2",
+		"typescript": "4.1.3",
 		"ulid": "2.3.0",
 		"url-loader": "4.1.1",
 		"uuid": "8.3.2",
 		"v-debounce": "0.1.2",
 		"vanilla-tilt": "1.7.0",
-		"vue": "3.0.3",
-		"vue-color": "2.7.1",
+		"vue": "3.0.5",
+		"vue-color": "2.8.1",
 		"vue-json-pretty": "1.7.1",
 		"vue-loader": "16.0.0",
 		"vue-prism-editor": "2.0.0-alpha.2",
@@ -253,7 +253,7 @@
 		"vuedraggable": "4.0.1",
 		"web-push": "3.4.4",
 		"webpack": "5.10.1",
-		"webpack-cli": "4.2.0",
+		"webpack-cli": "4.3.0",
 		"websocket": "1.0.33",
 		"ws": "7.4.1",
 		"xev": "2.0.1"

src/client/components/date-separated-list.vue

@@ -49,7 +49,7 @@ export default defineComponent({
 			const el = this.$slots.default({
 				item: item
 			})[0];
-			el.key = item.id;
+			if (el.key == null && item.id) el.key = item.id;
 
 			if (
 				i != this.items.length - 1 &&

src/client/components/emoji-picker.vue

@@ -2,7 +2,7 @@
 <MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
 	<div class="omfetrab _popup" :class="['w' + width, 'h' + height, { big }]">
 		<input ref="search" class="search" :class="{ filled: q != null && q != '' }" v-model.trim="q" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
-		<div class="emojis">
+		<div class="emojis" ref="emojis">
 			<section class="result">
 				<div v-if="searchResultCustom.length > 0">
 					<button v-for="emoji in searchResultCustom"
@@ -180,6 +180,8 @@ export default defineComponent({
 
 	watch: {
 		q() {
+			this.$refs.emojis.scrollTop = 0;
+
 			if (this.q == null || this.q === '') {
 				this.searchResultCustom = [];
 				this.searchResultUnicode = [];

src/client/components/featured-photos.vue

@@ -0,0 +1,34 @@
+<template>
+<div class="xfbouadm" v-if="meta" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }">
+
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+	},
+
+	data() {
+		return {
+			meta: null,
+		};
+	},
+
+	created() {
+		os.api('meta', { detail: true }).then(meta => {
+			this.meta = meta;
+		});
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.xfbouadm {
+	background-position: center;
+	background-size: cover;
+}
+</style>

src/client/components/global/i18n.ts

@@ -11,6 +11,11 @@ export default defineComponent({
 			required: false,
 			default: 'span',
 		},
+		textTag: {
+			type: String,
+			required: false,
+			default: null,
+		},
 	},
 	render() {
 		let str = this.src;
@@ -32,6 +37,6 @@ export default defineComponent({
 			str = str.substr(nextBracketClose + 1);
 		}
 
-		return h(this.tag, parsed.map(x => typeof x === 'string' ? x : this.$slots[x.arg]()));
+		return h(this.tag, parsed.map(x => typeof x === 'string' ? (this.textTag ? h(this.textTag, x) : x) : this.$slots[x.arg]()));
 	}
 });

src/client/components/global/misskey-flavored-markdown.vue

@@ -14,6 +14,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+._mfm_blur_ {
+	filter: blur(6px);
+	transition: filter 0.3s;
+
+	&:hover {
+		filter: blur(0px);
+	}
+}
+
 @keyframes mfm-spin {
 	0% { transform: rotate(0deg); }
 	100% { transform: rotate(360deg); }

src/client/components/mfm.ts

@@ -129,6 +129,23 @@ export default defineComponent({
 							style = `transform: ${transform};`;
 							break;
 						}
+						case 'x2': {
+							style = `font-size: 200%;`;
+							break;
+						}
+						case 'x3': {
+							style = `font-size: 400%;`;
+							break;
+						}
+						case 'x4': {
+							style = `font-size: 600%;`;
+							break;
+						}
+						case 'blur': {
+							return h('span', {
+								class: '_mfm_blur_',
+							}, genEl(token.children));
+						}
 					}
 					if (style == null) {
 						return h('span', {}, ['[', token.node.props.name, ...genEl(token.children), ']']);

src/client/components/note.vue

@@ -36,7 +36,7 @@
 			<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
 		</div>
 	</div>
-	<article class="article" @contextmenu="onContextmenu">
+	<article class="article" @contextmenu.stop="onContextmenu">
 		<MkAvatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
 			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
@@ -46,7 +46,7 @@
 					<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"/>
 				</p>
-				<div class="content" v-show="appearNote.cw == null || showContent">
+				<div class="content" :class="{ collapsed }" v-show="appearNote.cw == null || showContent">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
 						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><Fa :icon="faReply"/></MkA>
@@ -59,6 +59,9 @@
 					<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
 					<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="detail" class="url-preview"/>
 					<div class="renote" v-if="appearNote.renote"><XNotePreview :note="appearNote.renote"/></div>
+					<button v-if="collapsed" class="fade _button" @click="collapsed = false">
+						<span>{{ $ts.showMore }}</span>
+					</button>
 				</div>
 				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><Fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</MkA>
 			</div>
@@ -174,6 +177,7 @@ export default defineComponent({
 			conversation: [],
 			replies: [],
 			showContent: false,
+			collapsed: false,
 			isDeleted: false,
 			muted: false,
 			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish
@@ -273,6 +277,12 @@ export default defineComponent({
 			this.connection = os.stream;
 		}
 
+		this.collapsed = !this.detail && this.appearNote.cw == null && this.appearNote.text && (
+			(this.appearNote.text.split('\n').length > 9) ||
+			(this.appearNote.text.length > 500)
+		);
+		this.muted = await checkWordMute(this.appearNote, this.$i, this.$store.state.mutedWords);
+
 		// plugin
 		if (noteViewInterruptors.length > 0) {
 			let result = this.note;
@@ -282,8 +292,6 @@ export default defineComponent({
 			this.$emit('update:note', Object.freeze(result));
 		}
 
-		this.muted = await checkWordMute(this.appearNote, this.$i, this.$store.state.mutedWords);
-
 		if (this.detail) {
 			os.api('notes/children', {
 				noteId: this.appearNote.id,
@@ -1038,6 +1046,37 @@ export default defineComponent({
 				}
 
 				> .content {
+					&.collapsed {
+						position: relative;
+						max-height: 9em;
+						overflow: hidden;
+
+						> .fade {
+							display: block;
+							position: absolute;
+							bottom: 0;
+							left: 0;
+							width: 100%;
+							height: 64px;
+							background: linear-gradient(0deg, var(--panel), var(--X15));
+
+							> span {
+								display: inline-block;
+								background: var(--panel);
+								padding: 6px 10px;
+								font-size: 0.8em;
+								border-radius: 999px;
+								box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+							}
+
+							&:hover {
+								> span {
+									background: var(--panelHighlight);
+								}
+							}
+						}
+					}
+
 					> .text {
 						overflow-wrap: break-word;
 

src/client/components/page-window.vue

@@ -1,6 +1,6 @@
 <template>
 <XWindow ref="window"
-	:initial-width="700"
+	:initial-width="500"
 	:initial-height="500"
 	:can-resize="true"
 	:close-right="true"

src/client/components/sidebar.vue

@@ -357,12 +357,6 @@ export default defineComponent({
 			top: 0;
 			left: 0;
 			z-index: 1001;
-
-			> div {
-				> .notifications {
-					display: none;
-				}
-			}
 		}
 
 		&:not(.hidden) {

src/client/components/timeline.vue

@@ -115,6 +115,22 @@ export default defineComponent({
 			endpoint = 'notes/global-timeline';
 			this.connection = os.stream.useSharedConnection('globalTimeline');
 			this.connection.on('note', prepend);
+		} else if (this.src == 'mentions') {
+			endpoint = 'notes/mentions';
+			this.connection = os.stream.useSharedConnection('main');
+			this.connection.on('mention', prepend);
+		} else if (this.src == 'directs') {
+			endpoint = 'notes/mentions';
+			this.query = {
+				visibility: 'specified'
+			};
+			const onNote = note => {
+				if (note.visibility == 'specified') {
+					prepend(note);
+				}
+			};
+			this.connection = os.stream.useSharedConnection('main');
+			this.connection.on('mention', onNote);
 		} else if (this.src == 'list') {
 			endpoint = 'notes/user-list-timeline';
 			this.query = {

src/client/components/ui/button.vue

@@ -123,7 +123,7 @@ export default defineComponent({
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--buttonBg);
-	border-radius: 8px;
+	border-radius: 999px;
 	overflow: hidden;
 
 	&:not(:disabled):hover {

src/client/init.ts

@@ -91,10 +91,6 @@ if (_DEV_) {
 // タッチデバイスでCSSの:hoverを機能させる
 document.addEventListener('touchend', () => {}, { passive: true });
 
-if (localStorage.theme == null) {
-	applyTheme(require('@/themes/l-light.json5'));
-}
-
 //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 // TODO: いつの日にか消したい
 const vh = window.innerHeight * 0.01;
@@ -204,7 +200,7 @@ watch(defaultStore.reactiveState.darkMode, (darkMode) => {
 		const themes = builtinThemes.concat(ColdDeviceStorage.get('themes'));
 		applyTheme(themes.find(x => x.id === (darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'))));
 	});
-});
+}, { immediate: localStorage.theme == null });
 
 //#region Sync dark mode
 if (ColdDeviceStorage.get('syncDeviceDarkMode')) {

src/client/pages/about.vue

@@ -23,6 +23,18 @@
 	</FormGroup>
 
 	<FormLink v-if="meta.tosUrl" :to="meta.tosUrl" external>{{ $ts.tos }}</FormLink>
+
+	<FormGroup v-if="stats">
+		<template #label>{{ $ts.statistics }}</template>
+		<FormKeyValueView>
+			<template #key>{{ $ts.users }}</template>
+			<template #value>{{ number(stats.originalUsersCount) }}</template>
+		</FormKeyValueView>
+		<FormKeyValueView>
+			<template #key>{{ $ts.notes }}</template>
+			<template #value>{{ number(stats.originalNotesCount) }}</template>
+		</FormKeyValueView>
+	</FormGroup>
 </FormBase>
 </template>
 
@@ -35,6 +47,7 @@ import FormBase from '@/components/form/base.vue';
 import FormGroup from '@/components/form/group.vue';
 import FormKeyValueView from '@/components/form/key-value-view.vue';
 import * as os from '@/os';
+import number from '@/filters/number';
 
 export default defineComponent({
 	components: {
@@ -52,7 +65,7 @@ export default defineComponent({
 			},
 			version,
 			instanceName,
-			serverInfo: null,
+			stats: null,
 			faInfoCircle
 		}
 	},
@@ -62,6 +75,16 @@ export default defineComponent({
 			return this.$instance;
 		},
 	},
+
+	created() {
+		os.api('stats').then(stats => {
+			this.stats = stats;
+		});
+	},
+
+	methods: {
+		number
+	}
 });
 </script>
 

src/client/pages/channel.vue

@@ -22,7 +22,7 @@
 
 	<XPostForm :channel="channel" class="post-form _content _panel _vMargin" fixed v-if="$i"/>
 
-	<XTimeline class="_content _vMargin" src="channel" :channel="channelId" @before="before" @after="after"/>
+	<XTimeline class="_content _vMargin _noGap_" src="channel" :channel="channelId" @before="before" @after="after"/>
 </div>
 </template>
 

src/client/pages/doc.vue

@@ -3,7 +3,7 @@
 	<div class="title">{{ title }}</div>
 	<div class="body" v-html="body"></div>
 	<div class="footer">
-		<MkLink :url="`https://github.com/syuilo/misskey/blob/master/src/docs/${doc}.ja-JP.md`" class="at">{{ $ts.docSource }}</MkLink>
+		<MkLink :url="`https://github.com/syuilo/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
 	</div>
 </div>
 </template>
@@ -45,6 +45,7 @@ export default defineComponent({
 			title: null,
 			body: null,
 			markdown: null,
+			lang,
 		}
 	},
 

src/client/pages/mfm-cheat-sheet.vue

@@ -145,6 +145,46 @@
 			</div>
 		</div>
 	</div>
+	<div class="_section">
+		<div class="_title">{{ $ts._mfm.x2 }}</div>
+		<div class="_content">
+			<p>{{ $ts._mfm.x2Description }}</p>
+			<div class="preview _panel">
+				<Mfm :text="preview_x2"/>
+				<MkTextarea v-model:value="preview_x2"><span>MFM</span></MkTextarea>
+			</div>
+		</div>
+	</div>
+	<div class="_section">
+		<div class="_title">{{ $ts._mfm.x3 }}</div>
+		<div class="_content">
+			<p>{{ $ts._mfm.x3Description }}</p>
+			<div class="preview _panel">
+				<Mfm :text="preview_x3"/>
+				<MkTextarea v-model:value="preview_x3"><span>MFM</span></MkTextarea>
+			</div>
+		</div>
+	</div>
+	<div class="_section">
+		<div class="_title">{{ $ts._mfm.x4 }}</div>
+		<div class="_content">
+			<p>{{ $ts._mfm.x4Description }}</p>
+			<div class="preview _panel">
+				<Mfm :text="preview_x4"/>
+				<MkTextarea v-model:value="preview_x4"><span>MFM</span></MkTextarea>
+			</div>
+		</div>
+	</div>
+	<div class="_section">
+		<div class="_title">{{ $ts._mfm.blur }}</div>
+		<div class="_content">
+			<p>{{ $ts._mfm.blurDescription }}</p>
+			<div class="preview _panel">
+				<Mfm :text="preview_blur"/>
+				<MkTextarea v-model:value="preview_blur"><span>MFM</span></MkTextarea>
+			</div>
+		</div>
+	</div>
 	<div class="_section">
 		<div class="_title">{{ $ts._mfm.jelly }}</div>
 		<div class="_content">
@@ -255,6 +295,10 @@ export default defineComponent({
 			preview_twitch: `[twitch 🍮]`,
 			preview_spin: `[spin 🍮] [spin.left 🍮] [spin.alternate 🍮]\n[spin.x 🍮] [spin.x,left 🍮] [spin.x,alternate 🍮]\n[spin.y 🍮] [spin.y,left 🍮] [spin.y,alternate 🍮]`,
 			preview_flip: `[flip ${this.$ts._mfm.dummy}]\n[flip.v ${this.$ts._mfm.dummy}]\n[flip.h,v ${this.$ts._mfm.dummy}]`,
+			preview_x2: `[x2 🍮]`,
+			preview_x3: `[x3 🍮]`,
+			preview_x4: `[x4 🍮]`,
+			preview_blur: `[blur ${this.$ts._mfm.dummy}]`,
 		}
 	},
 });

src/client/pages/settings/general.vue

@@ -1,5 +1,6 @@
 <template>
 <FormBase>
+	<FormSwitch v-model:value="titlebar">{{ $ts.showTitlebar }}</FormSwitch>
 	<FormSwitch v-model:value="showFixedPostForm">{{ $ts.showFixedPostForm }}</FormSwitch>
 
 	<FormSelect v-model:value="lang">
@@ -133,6 +134,7 @@ export default defineComponent({
 		useOsNativeEmojis: defaultStore.makeGetterSetter('useOsNativeEmojis'),
 		disableShowingAnimatedImages: defaultStore.makeGetterSetter('disableShowingAnimatedImages'),
 		loadRawImages: defaultStore.makeGetterSetter('loadRawImages'),
+		titlebar: defaultStore.makeGetterSetter('titlebar'),
 		imageNewTab: defaultStore.makeGetterSetter('imageNewTab'),
 		nsfw: defaultStore.makeGetterSetter('nsfw'),
 		disablePagesScript: defaultStore.makeGetterSetter('disablePagesScript'),
@@ -175,6 +177,10 @@ export default defineComponent({
 		showGapBetweenNotesInTimeline() {
 			this.reloadAsk();
 		},
+
+		titlebar() {
+			this.reloadAsk();
+		},
 	},
 
 	mounted() {

src/client/pages/settings/index.vue

@@ -27,6 +27,9 @@
 			<FormLink :active="page === 'api'" replace to="/settings/api"><template #icon><Fa :icon="faKey"/></template>API</FormLink>
 			<FormLink :active="page === 'other'" replace to="/settings/other"><template #icon><Fa :icon="faEllipsisH"/></template>{{ $ts.other }}</FormLink>
 		</FormGroup>
+		<FormGroup>
+			<FormButton @click="clear">{{ $ts.clearCache }}</FormButton>
+		</FormGroup>
 		<FormGroup>
 			<FormButton @click="logout" danger>{{ $ts.logout }}</FormButton>
 		</FormGroup>
@@ -126,6 +129,11 @@ export default defineComponent({
 			logout: () => {
 				signout();
 			},
+			clear: () => {
+				localStorage.removeItem('locale');
+				localStorage.removeItem('theme');
+				location.reload();
+			},
 			faPalette, faPlug, faUser, faListUl, faLock, faLaugh, faCommentSlash, faMusic, faBell, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes, faEnvelope,
 		};
 	},

src/client/pages/settings/sidebar.vue

@@ -90,12 +90,25 @@ export default defineComponent({
 
 		save() {
 			this.$store.set('menu', this.splited);
+			this.reloadAsk();
 		},
 
 		reset() {
 			this.$store.reset('menu');
 			this.items = this.$store.state.menu.join('\n');
+			this.reloadAsk();
 		},
+
+		async reloadAsk() {
+			const { canceled } = await os.dialog({
+				type: 'info',
+				text: this.$ts.reloadToApplySetting,
+				showCancelButton: true
+			});
+			if (canceled) return;
+
+			location.reload();
+		}
 	},
 });
 </script>

src/client/pages/settings/theme.manage.vue

@@ -1,9 +1,11 @@
 <template>
 <FormBase>
 	<FormSelect v-model:value="selectedThemeId">
-		<template #label>{{ $ts.installedThemes }}</template>
-		<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
-		<optgroup :label="$ts.builtinThemes">
+		<template #label>{{ $ts.theme }}</template>
+		<optgroup :label="$ts._theme.installedThemes">
+			<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
+		</optgroup>
+		<optgroup :label="$ts._theme.builtinThemes">
 			<option v-for="x in builtinThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 		</optgroup>
 	</FormSelect>

src/client/pages/timeline.vue

@@ -1,10 +1,26 @@
 <template>
-<div class="mk-home" v-hotkey.global="keymap">
+<div class="cmuxhskf" v-hotkey.global="keymap">
 	<div class="new" v-if="queue > 0" :style="{ width: width + 'px' }"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
 
 	<div class="_section">
 		<XTutorial v-if="$store.reactiveState.tutorial.value != -1" class="tutorial _content _vMargin"/>
 		<XPostForm v-if="$store.reactiveState.showFixedPostForm.value" class="post-form _panel _content _vMargin" fixed/>
+		<div class="tabs _panel _vMargin">
+			<div class="left">
+				<button class="_button tab" @click="() => { src = 'home'; saveSrc(); }" :class="{ active: src === 'home' }" v-tooltip="$ts._timelines.home"><Fa :icon="faHome"/></button>
+				<button class="_button tab" @click="() => { src = 'local'; saveSrc(); }" :class="{ active: src === 'local' }" v-tooltip="$ts._timelines.local" v-if="isLocalTimelineAvailable"><Fa :icon="faComments"/></button>
+				<button class="_button tab" @click="() => { src = 'social'; saveSrc(); }" :class="{ active: src === 'social' }" v-tooltip="$ts._timelines.social" v-if="isLocalTimelineAvailable"><Fa :icon="faShareAlt"/></button>
+				<button class="_button tab" @click="() => { src = 'global'; saveSrc(); }" :class="{ active: src === 'global' }" v-tooltip="$ts._timelines.global" v-if="isGlobalTimelineAvailable"><Fa :icon="faGlobe"/></button>
+				<span class="divider"></span>
+				<button class="_button tab" @click="() => { src = 'mentions'; saveSrc(); }" :class="{ active: src === 'mentions' }" v-tooltip="$ts.mentions"><Fa :icon="faAt"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadMentions"/></button>
+				<button class="_button tab" @click="() => { src = 'directs'; saveSrc(); }" :class="{ active: src === 'directs' }" v-tooltip="$ts.directNotes"><Fa :icon="faEnvelope"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadSpecifiedNotes"/></button>
+			</div>
+			<div class="right">
+				<button class="_button tab" @click="chooseChannel" :class="{ active: src === 'channel' }" v-tooltip="$ts.channel"><Fa :icon="faSatelliteDish"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadChannel"/></button>
+				<button class="_button tab" @click="chooseAntenna" :class="{ active: src === 'antenna' }" v-tooltip="$ts.antennas"><Fa :icon="faSatellite"/><Fa :icon="faCircle" class="i" v-if="$i.hasUnreadAntenna"/></button>
+				<button class="_button tab" @click="chooseList" :class="{ active: src === 'list' }" v-tooltip="$ts.lists"><Fa :icon="faListUl"/></button>
+			</div>
+		</div>
 		<XTimeline ref="tl"
 			class="_content _vMargin"
 			:key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src === 'channel' ? `channel:${channel.id}` : src"
@@ -23,8 +39,8 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent, computed } from 'vue';
-import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faSatelliteDish, faCircle, faEllipsisH, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
-import { faComments } from '@fortawesome/free-regular-svg-icons';
+import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faSatelliteDish, faCircle, faEllipsisH, faPencilAlt, faAt } from '@fortawesome/free-solid-svg-icons';
+import { faComments, faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import Progress from '@/scripts/loading';
 import XTimeline from '@/components/timeline.vue';
 import XPostForm from '@/components/post-form.vue';
@@ -49,64 +65,15 @@ export default defineComponent({
 			menuOpened: false,
 			queue: 0,
 			width: 0,
-			INFO: computed(() => {
-				const tabs = [{
-					id: 'home',
-					title: null,
-					tooltip: this.$ts._timelines.home,
-					icon: faHome,
-					onClick: () => { this.src = 'home'; this.saveSrc(); },
-					selected: computed(() => this.src === 'home')
-				}];
-
-				if (!this.$instance.disableLocalTimeline || this.$i.isModerator || this.$i.isAdmin) {
-					tabs.push({
-						id: 'local',
-						title: null,
-						tooltip: this.$ts._timelines.local,
-						icon: faComments,
-						onClick: () => { this.src = 'local'; this.saveSrc(); },
-						selected: computed(() => this.src === 'local')
-					});
-
-					tabs.push({
-						id: 'social',
-						title: null,
-						tooltip: this.$ts._timelines.social,
-						icon: faShareAlt,
-						onClick: () => { this.src = 'social'; this.saveSrc(); },
-						selected: computed(() => this.src === 'social')
-					});
+			INFO: computed(() => ({
+				title: this.$ts.timeline,
+				icon: this.src === 'local' ? faComments : this.src === 'social' ? faShareAlt : this.src === 'global' ? faGlobe : faHome,
+				action: {
+					icon: faPencilAlt,
+					handler: () => os.post()
 				}
-
-				if (!this.$instance.disableGlobalTimeline || this.$i.isModerator || this.$i.isAdmin) {
-					tabs.push({
-						id: 'global',
-						title: null,
-						tooltip: this.$ts._timelines.global,
-						icon: faGlobe,
-						onClick: () => { this.src = 'global'; this.saveSrc(); },
-						selected: computed(() => this.src === 'global')
-					});
-				}
-
-				tabs.push({
-					id: 'other',
-					title: null,
-					icon: faEllipsisH,
-					onClick: this.choose,
-					indicate: computed(() => this.$i.hasUnreadAntenna || this.$i.hasUnreadChannel)
-				});
-
-				return {
-					tabs,
-					action: {
-						icon: faPencilAlt,
-						handler: () => os.post()
-					}
-				};
-			}),
-			faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite, faSatelliteDish, faCircle
+			})),
+			faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite, faSatelliteDish, faCircle, faEllipsisH, faAt, faEnvelope,
 		};
 	},
 
@@ -117,8 +84,12 @@ export default defineComponent({
 			};
 		},
 
-		meta() {
-			return this.$instance;
+		isLocalTimelineAvailable(): boolean {
+			return !this.$instance.disableLocalTimeline || this.$i.isModerator || this.$i.isAdmin;
+		},
+
+		isGlobalTimelineAvailable(): boolean {
+			return !this.$instance.disableGlobalTimeline || this.$i.isModerator || this.$i.isAdmin;
 		},
 	},
 
@@ -176,16 +147,23 @@ export default defineComponent({
 			scroll(this.$el, 0);
 		},
 
-		async choose(ev) {
-			if (this.meta == null) return;
-			const [antennas, lists, channels] = await Promise.all([
-				os.api('antennas/list'),
-				os.api('users/lists/list'),
-				os.api('channels/followed'),
-			]);
-			const antennaItems = antennas.map(antenna => ({
+		async chooseList(ev) {
+			const lists = await os.api('users/lists/list');
+			const items = lists.map(list => ({
+				text: list.name,
+				action: () => {
+					this.list = list;
+					this.src = 'list';
+					this.saveSrc();
+				}
+			}));
+			os.modalMenu(items, ev.currentTarget || ev.target);
+		},
+
+		async chooseAntenna(ev) {
+			const antennas = await os.api('antennas/list');
+			const items = antennas.map(antenna => ({
 				text: antenna.name,
-				icon: faSatellite,
 				indicate: antenna.hasUnreadNote,
 				action: () => {
 					this.antenna = antenna;
@@ -193,18 +171,13 @@ export default defineComponent({
 					this.saveSrc();
 				}
 			}));
-			const listItems = lists.map(list => ({
-				text: list.name,
-				icon: faListUl,
-				action: () => {
-					this.list = list;
-					this.src = 'list';
-					this.saveSrc();
-				}
-			}));
-			const channelItems = channels.map(channel => ({
+			os.modalMenu(items, ev.currentTarget || ev.target);
+		},
+
+		async chooseChannel(ev) {
+			const channels = await os.api('channels/followed');
+			const items = channels.map(channel => ({
 				text: channel.name,
-				icon: faSatelliteDish,
 				indicate: channel.hasUnreadNote,
 				action: () => {
 					// NOTE: チャンネルタイムラインをこのコンポーネントで表示するようにすると投稿フォームはどうするかなどの問題が生じるのでとりあえずページ遷移で
@@ -214,7 +187,7 @@ export default defineComponent({
 					this.$router.push(`/channels/${channel.id}`);
 				}
 			}));
-			os.modalMenu([...antennaItems, listItems.length > 0 ? null : undefined, ...listItems, channelItems.length > 0 ? null : undefined, ...channelItems], ev.currentTarget || ev.target);
+			os.modalMenu(items, ev.currentTarget || ev.target);
 		},
 
 		saveSrc() {
@@ -235,7 +208,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.mk-home {
+.cmuxhskf {
 	> .new {
 		position: fixed;
 		z-index: 1000;
@@ -249,7 +222,71 @@ export default defineComponent({
 	}
 
 	> ._section {
+		> .tabs {
+			display: flex;
+			box-sizing: border-box;
+			padding: 0 8px;
+			max-width: var(--baseContentWidth);
+			margin-left: auto;
+			margin-right: auto;
+			white-space: nowrap;
+			overflow: auto;
 
+			// 影の都合上
+			position: relative;
+
+			> .right {
+				margin-left: auto;
+			}
+
+			> .left, > .right {
+				> .tab {
+					position: relative;
+					height: 50px;
+					padding: 0 12px;
+
+					&:hover {
+						color: var(--fgHighlighted);
+					}
+
+					&.active {
+						color: var(--fgHighlighted);
+
+						&:after {
+							content: "";
+							display: block;
+							position: absolute;
+							bottom: 0;
+							left: 0;
+							right: 0;
+							margin: 0 auto;
+							width: calc(100% - 16px);
+							height: 4px;
+							background: var(--accent);
+							border-radius: 8px 8px 0 0;
+						}
+					}
+
+					> .i {
+						position: absolute;
+						top: 16px;
+						right: 8px;
+						color: var(--indicator);
+						font-size: 8px;
+						animation: blink 1s infinite;
+					}
+				}
+
+				> .divider {
+					display: inline-block;
+					width: 1px;
+					height: 28px;
+					vertical-align: middle;
+					margin: 0 8px;
+					background: var(--divider);
+				}
+			}
+		}
 	}
 }
 </style>

src/client/pages/user/index.vue

@@ -80,7 +80,7 @@
 				</div>
 				<template v-if="page === 'index'">
 					<div v-if="user.pinnedNotes.length > 0" class="_vMargin">
-						<XNote v-for="note in user.pinnedNotes" class="note _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :detail="true" :pinned="true"/>
+						<XNote v-for="note in user.pinnedNotes" class="note _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
 					</div>
 					<div class="_vMargin">
 						<XUserTimeline :user="user"/>
@@ -195,7 +195,7 @@
 		<template v-if="page === 'index'">
 			<div class="_content _vMargin">
 				<div v-if="user.pinnedNotes.length > 0" class="_vMargin">
-					<XNote v-for="note in user.pinnedNotes" class="note _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :detail="true" :pinned="true"/>
+					<XNote v-for="note in user.pinnedNotes" class="note _vMargin" :note="note" @update:note="pinnedNoteUpdated(note, $event)" :key="note.id" :pinned="true"/>
 				</div>
 				<XPhotos :user="user" :key="user.id" class="_vMargin"/>
 				<XActivity :user="user" :key="user.id" class="_vMargin"/>

src/client/pages/welcome.entrance.a.vue

@@ -0,0 +1,307 @@
+<template>
+<div class="rsqzvsbo" v-if="meta">
+	<div class="top">
+		<MkFeaturedPhotos class="bg"/>
+		<XTimeline class="tl"/>
+		<div class="shape"></div>
+		<img src="/assets/misskey.svg" class="misskey"/>
+		<div class="emojis">
+			<MkEmoji :normal="true" :no-style="true" emoji="👍"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="❤"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="😆"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="🎉"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+		</div>
+		<div class="main _panel">
+			<div class="bg">
+				<div class="fade"></div>
+			</div>
+			<div class="fg">
+				<h1>
+					<img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
+				</h1>
+				<div class="about">
+					<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
+				</div>
+				<div class="action">
+					<MkButton @click="signup()" inline primary>{{ $ts.signup }}</MkButton>
+					<MkButton @click="signin()" inline>{{ $ts.login }}</MkButton>
+				</div>
+				<div class="status" v-if="onlineUsersCount && stats">
+					<div>
+						<I18n :src="$ts.nUsers" text-tag="span" class="users">
+							<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
+						</I18n>
+						<I18n :src="$ts.nNotes" text-tag="span" class="notes">
+							<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
+						</I18n>
+					</div>
+					<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
+						<template #n><b>{{ onlineUsersCount }}</b></template>
+					</I18n>
+				</div>
+				<button class="_button _acrylic menu" @click="showMenu"><Fa :icon="faEllipsisH"/></button>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faEllipsisH, faInfoCircle, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
+import { toUnicode } from 'punycode';
+import XSigninDialog from '@/components/signin-dialog.vue';
+import XSignupDialog from '@/components/signup-dialog.vue';
+import MkButton from '@/components/ui/button.vue';
+import XNote from '@/components/note.vue';
+import MkFeaturedPhotos from '@/components/featured-photos.vue';
+import XTimeline from './welcome.timeline.vue';
+import { host, instanceName } from '@/config';
+import * as os from '@/os';
+import number from '@/filters/number';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XNote,
+		MkFeaturedPhotos,
+		XTimeline,
+	},
+
+	data() {
+		return {
+			host: toUnicode(host),
+			instanceName,
+			meta: null,
+			stats: null,
+			tags: [],
+			onlineUsersCount: null,
+			faEllipsisH
+		};
+	},
+
+	created() {
+		os.api('meta', { detail: true }).then(meta => {
+			this.meta = meta;
+		});
+
+		os.api('stats').then(stats => {
+			this.stats = stats;
+		});
+
+		os.api('get-online-users-count').then(res => {
+			this.onlineUsersCount = res.count;
+		});
+
+		os.api('hashtags/list', {
+			sort: '+mentionedLocalUsers',
+			limit: 8
+		}).then(tags => {
+			this.tags = tags;
+		});
+	},
+
+	methods: {
+		signin() {
+			os.popup(XSigninDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		},
+
+		signup() {
+			os.popup(XSignupDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		},
+
+		showMenu(ev) {
+			os.modalMenu([{
+				text: this.$t('aboutX', { x: instanceName }),
+				icon: faInfoCircle,
+				action: () => {
+					os.pageWindow('/about');
+				}
+			}, {
+				text: this.$ts.aboutMisskey,
+				icon: faInfoCircle,
+				action: () => {
+					os.pageWindow('/about-misskey');
+				}
+			}, null, {
+				text: this.$ts.help,
+				icon: faQuestionCircle,
+				action: () => {
+					os.pageWindow('/docs');
+				}
+			}], ev.currentTarget || ev.target);
+		},
+
+		number
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.rsqzvsbo {
+	> .top {
+		display: flex;
+		text-align: center;
+		min-height: 100vh;
+		box-sizing: border-box;
+		padding: 16px;
+
+		> .bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+
+		> .tl {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 64px;
+			margin: auto;
+			width: 500px;
+			height: calc(100% - 128px);
+			overflow: hidden;
+			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+
+			@media (max-width: 1200px) {
+				display: none;
+			}
+		}
+
+		> .shape {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: var(--accent);
+			clip-path: polygon(0% 0%, 50% 0%, 15% 100%, 0% 100%);
+		}
+
+		> .misskey {
+			position: absolute;
+			top: 42px;
+			left: 42px;
+			width: 160px;
+
+			@media (max-width: 450px) {
+				width: 130px;
+			}
+		}
+
+		> .emojis {
+			position: absolute;
+			bottom: 32px;
+			left: 35px;
+
+			> * {
+				margin-right: 8px;
+			}
+
+			@media (max-width: 1200px) {
+				display: none;
+			}
+		}
+
+		> .main {
+			position: relative;
+			width: min(480px, 100%);
+			margin: auto auto auto 128px;
+			box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
+
+			@media (max-width: 1200px) {
+				margin: auto;
+			}
+
+			> .bg {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 128px;
+				background-position: center;
+				background-size: cover;
+				opacity: 0.75;
+
+				> .fade {
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					width: 100%;
+					height: 128px;
+					background: linear-gradient(0deg, var(--panel), var(--X15));
+				}
+			}
+
+			> .fg {
+				position: relative;
+				z-index: 1;
+
+				> h1 {
+					display: block;
+					margin: 0;
+					padding: 32px 32px 24px 32px;
+
+					> .logo {
+						vertical-align: bottom;
+						max-height: 120px;
+					}
+				}
+
+				> .about {
+					padding: 0 32px;
+				}
+
+				> .action {
+					padding: 32px;
+
+					> * {
+						line-height: 28px;
+					}
+				}
+
+				> .status {
+					border-top: solid 1px var(--divider);
+					padding: 32px;
+					font-size: 90%;
+
+					> div {
+						> span:not(:last-child) {
+							padding-right: 1em;
+							margin-right: 1em;
+							border-right: solid 1px var(--divider);
+						}
+					}
+
+					> .online {
+						::v-deep(b) {
+							color: #41b781;
+						}
+
+						::v-deep(span) {
+							opacity: 0.7;
+						}
+					}
+				}
+
+				> .menu {
+					position: absolute;
+					top: 16px;
+					right: 16px;
+					width: 32px;
+					height: 32px;
+					border-radius: 8px;
+				}
+			}
+		}
+	}
+}
+</style>

src/client/pages/welcome.entrance.b.vue

@@ -0,0 +1,238 @@
+<template>
+<div class="rsqzvsbo" v-if="meta">
+	<div class="top">
+		<MkFeaturedPhotos class="bg"/>
+		<XTimeline class="tl"/>
+		<div class="shape"></div>
+		<div class="main">
+			<h1>
+				<img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
+			</h1>
+			<div class="about">
+				<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
+			</div>
+			<div class="action">
+				<MkButton class="signup" @click="signup()" inline primary>{{ $ts.signup }}</MkButton>
+				<MkButton class="signin" @click="signin()" inline>{{ $ts.login }}</MkButton>
+			</div>
+			<div class="status" v-if="onlineUsersCount && stats">
+				<div>
+					<I18n :src="$ts.nUsers" text-tag="span" class="users">
+						<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
+					</I18n>
+					<I18n :src="$ts.nNotes" text-tag="span" class="notes">
+						<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
+					</I18n>
+				</div>
+				<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
+					<template #n><b>{{ onlineUsersCount }}</b></template>
+				</I18n>
+			</div>
+		</div>
+		<img src="/assets/misskey.svg" class="misskey"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faEllipsisH, faInfoCircle, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
+import { toUnicode } from 'punycode';
+import XSigninDialog from '@/components/signin-dialog.vue';
+import XSignupDialog from '@/components/signup-dialog.vue';
+import MkButton from '@/components/ui/button.vue';
+import XNote from '@/components/note.vue';
+import MkFeaturedPhotos from '@/components/featured-photos.vue';
+import XTimeline from './welcome.timeline.vue';
+import { host, instanceName } from '@/config';
+import * as os from '@/os';
+import number from '@/filters/number';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XNote,
+		XTimeline,
+		MkFeaturedPhotos,
+	},
+
+	data() {
+		return {
+			host: toUnicode(host),
+			instanceName,
+			meta: null,
+			stats: null,
+			tags: [],
+			onlineUsersCount: null,
+			faEllipsisH
+		};
+	},
+
+	created() {
+		os.api('meta', { detail: true }).then(meta => {
+			this.meta = meta;
+		});
+
+		os.api('stats').then(stats => {
+			this.stats = stats;
+		});
+
+		os.api('get-online-users-count').then(res => {
+			this.onlineUsersCount = res.count;
+		});
+
+		os.api('hashtags/list', {
+			sort: '+mentionedLocalUsers',
+			limit: 8
+		}).then(tags => {
+			this.tags = tags;
+		});
+	},
+
+	methods: {
+		signin() {
+			os.popup(XSigninDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		},
+
+		signup() {
+			os.popup(XSignupDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		},
+
+		showMenu(ev) {
+			os.modalMenu([{
+				text: this.$t('aboutX', { x: instanceName }),
+				icon: faInfoCircle,
+				action: () => {
+					os.pageWindow('/about');
+				}
+			}, {
+				text: this.$ts.aboutMisskey,
+				icon: faInfoCircle,
+				action: () => {
+					os.pageWindow('/about-misskey');
+				}
+			}, null, {
+				text: this.$ts.help,
+				icon: faQuestionCircle,
+				action: () => {
+					os.pageWindow('/docs');
+				}
+			}], ev.currentTarget || ev.target);
+		},
+
+		number
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.rsqzvsbo {
+	> .top {
+		min-height: 100vh;
+		box-sizing: border-box;
+
+		> .bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+
+		> .tl {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 64px;
+			margin: auto;
+			width: 500px;
+			height: calc(100% - 128px);
+			overflow: hidden;
+			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+		}
+
+		> .shape {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: var(--accent);
+			clip-path: polygon(0% 0%, 40% 0%, 22% 100%, 0% 100%);
+		}
+
+		> .misskey {
+			position: absolute;
+			bottom: 64px;
+			left: 64px;
+			width: 160px;
+		}
+
+		> .main {
+			position: relative;
+			width: min(450px, 100%);
+			padding: 64px;
+			color: #fff;
+			font-size: 1.1em;
+
+			@media (max-width: 1200px) {
+				margin: auto;
+			}
+
+			> h1 {
+				display: block;
+				margin: 0 0 32px 0;
+				padding: 0;
+
+				> .logo {
+					vertical-align: bottom;
+					max-height: 100px;
+				}
+			}
+
+			> .about {
+				padding: 0;
+			}
+
+			> .action {
+				margin: 32px 0;
+
+				> * {
+					line-height: 32px;
+				}
+
+				> .signup {
+					background: var(--panel);
+					color: var(--fg);
+				}
+
+				> .signin {
+					background: var(--accent);
+					color: inherit;
+				}
+			}
+
+			> .status {
+				margin: 32px 0;
+				border-top: solid 1px rgba(255, 255, 255, 0.5);
+				font-size: 90%;
+
+				> div {
+					padding: 16px 0;
+
+					> span:not(:last-child) {
+						padding-right: 1em;
+						margin-right: 1em;
+						border-right: solid 1px rgba(255, 255, 255, 0.5);
+					}
+				}
+			}
+		}
+	}
+}
+</style>

src/client/pages/welcome.entrance.c.vue

@@ -0,0 +1,307 @@
+<template>
+<div class="rsqzvsbo" v-if="meta">
+	<div class="top">
+		<MkFeaturedPhotos class="bg"/>
+		<div class="fade"></div>
+		<div class="emojis">
+			<MkEmoji :normal="true" :no-style="true" emoji="👍"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="❤"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="😆"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="🎉"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+		</div>
+		<div class="main">
+			<img src="/assets/misskey.svg" class="misskey"/>
+			<div class="form _panel">
+				<div class="bg">
+					<div class="fade"></div>
+				</div>
+				<div class="fg">
+					<h1>
+						<img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
+					</h1>
+					<div class="about">
+						<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
+					</div>
+					<div class="action">
+						<MkButton @click="signup()" inline primary>{{ $ts.signup }}</MkButton>
+						<MkButton @click="signin()" inline>{{ $ts.login }}</MkButton>
+					</div>
+					<div class="status" v-if="onlineUsersCount && stats">
+						<div>
+							<I18n :src="$ts.nUsers" text-tag="span" class="users">
+								<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
+							</I18n>
+							<I18n :src="$ts.nNotes" text-tag="span" class="notes">
+								<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
+							</I18n>
+						</div>
+						<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
+							<template #n><b>{{ onlineUsersCount }}</b></template>
+						</I18n>
+					</div>
+					<button class="_button _acrylic menu" @click="showMenu"><Fa :icon="faEllipsisH"/></button>
+				</div>
+			</div>
+			<nav class="nav">
+				<MkA to="/announcements">{{ $ts.announcements }}</MkA>
+				<MkA to="/explore">{{ $ts.explore }}</MkA>
+				<MkA to="/channels">{{ $ts.channel }}</MkA>
+				<MkA to="/featured">{{ $ts.featured }}</MkA>
+			</nav>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faEllipsisH, faInfoCircle, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
+import { toUnicode } from 'punycode';
+import XSigninDialog from '@/components/signin-dialog.vue';
+import XSignupDialog from '@/components/signup-dialog.vue';
+import MkButton from '@/components/ui/button.vue';
+import XNote from '@/components/note.vue';
+import MkFeaturedPhotos from '@/components/featured-photos.vue';
+import XTimeline from './welcome.timeline.vue';
+import { host, instanceName } from '@/config';
+import * as os from '@/os';
+import number from '@/filters/number';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XNote,
+		MkFeaturedPhotos,
+		XTimeline,
+	},
+
+	data() {
+		return {
+			host: toUnicode(host),
+			instanceName,
+			meta: null,
+			stats: null,
+			tags: [],
+			onlineUsersCount: null,
+			faEllipsisH
+		};
+	},
+
+	created() {
+		os.api('meta', { detail: true }).then(meta => {
+			this.meta = meta;
+		});
+
+		os.api('stats').then(stats => {
+			this.stats = stats;
+		});
+
+		os.api('get-online-users-count').then(res => {
+			this.onlineUsersCount = res.count;
+		});
+
+		os.api('hashtags/list', {
+			sort: '+mentionedLocalUsers',
+			limit: 8
+		}).then(tags => {
+			this.tags = tags;
+		});
+	},
+
+	methods: {
+		signin() {
+			os.popup(XSigninDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		},
+
+		signup() {
+			os.popup(XSignupDialog, {
+				autoSet: true
+			}, {}, 'closed');
+		},
+
+		showMenu(ev) {
+			os.modalMenu([{
+				text: this.$t('aboutX', { x: instanceName }),
+				icon: faInfoCircle,
+				action: () => {
+					os.pageWindow('/about');
+				}
+			}, {
+				text: this.$ts.aboutMisskey,
+				icon: faInfoCircle,
+				action: () => {
+					os.pageWindow('/about-misskey');
+				}
+			}, null, {
+				text: this.$ts.help,
+				icon: faQuestionCircle,
+				action: () => {
+					os.pageWindow('/docs');
+				}
+			}], ev.currentTarget || ev.target);
+		},
+
+		number
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.rsqzvsbo {
+	> .top {
+		display: flex;
+		text-align: center;
+		min-height: 100vh;
+		box-sizing: border-box;
+		padding: 16px;
+
+		> .bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+
+		> .fade {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: rgba(0, 0, 0, 0.25);
+		}
+
+		> .emojis {
+			position: absolute;
+			bottom: 32px;
+			left: 35px;
+
+			> * {
+				margin-right: 8px;
+			}
+
+			@media (max-width: 1200px) {
+				display: none;
+			}
+		}
+
+		> .main {
+			position: relative;
+			width: min(460px, 100%);
+			margin: auto;
+
+			> .misskey {
+				width: 150px;
+				margin-bottom: 16px;
+
+				@media (max-width: 450px) {
+					width: 130px;
+				}
+			}
+
+			> .form {
+				position: relative;
+				box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
+
+				> .bg {
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 128px;
+					background-position: center;
+					background-size: cover;
+					opacity: 0.75;
+
+					> .fade {
+						position: absolute;
+						bottom: 0;
+						left: 0;
+						width: 100%;
+						height: 128px;
+						background: linear-gradient(0deg, var(--panel), var(--X15));
+					}
+				}
+
+				> .fg {
+					position: relative;
+					z-index: 1;
+
+					> h1 {
+						display: block;
+						margin: 0;
+						padding: 32px 32px 24px 32px;
+
+						> .logo {
+							vertical-align: bottom;
+							max-height: 120px;
+						}
+					}
+
+					> .about {
+						padding: 0 32px;
+					}
+
+					> .action {
+						padding: 32px;
+
+						> * {
+							line-height: 28px;
+						}
+					}
+
+					> .status {
+						border-top: solid 1px var(--divider);
+						padding: 32px;
+						font-size: 90%;
+
+						> div {
+							> span:not(:last-child) {
+								padding-right: 1em;
+								margin-right: 1em;
+								border-right: solid 1px var(--divider);
+							}
+						}
+
+						> .online {
+							::v-deep(b) {
+								color: #41b781;
+							}
+
+							::v-deep(span) {
+								opacity: 0.7;
+							}
+						}
+					}
+
+					> .menu {
+						position: absolute;
+						top: 16px;
+						right: 16px;
+						width: 32px;
+						height: 32px;
+						border-radius: 8px;
+					}
+				}
+			}
+
+			> .nav {
+				position: relative;
+				z-index: 2;
+				margin-top: 20px;
+				color: #fff;
+				text-shadow: 0 0 8px black;
+				font-size: 0.9em;
+
+				> *:not(:last-child) {
+					margin-right: 1.5em;
+				}
+			}
+		}
+	}
+}
+</style>

src/client/pages/welcome.entrance.vue

@@ -1,181 +0,0 @@
-<template>
-<div class="rsqzvsbo _section" v-if="meta">
-	<div class="overview _monospace" v-if="stats">
-		<div class="stats">
-			<div><span>Users</span><span>{{ number(stats.originalUsersCount) }}</span></div>
-			<div><span>Notes</span><span>{{ number(stats.originalNotesCount) }}</span></div>
-			<div><span>Reactions</span><span>{{ number(stats.reactionsCount) }}</span></div>
-		</div>
-		<div class="tags">
-			<MkA class="tag" v-for="tag in tags" :to="`/tags/${encodeURIComponent(tag.tag)}`">#{{ tag.tag }}</MkA>
-		</div>
-	</div>
-	<template v-if="meta.pinnedClipId">
-		<h2># {{ $ts.pinnedNotes }}</h2>
-		<MkPagination :pagination="clipPagination" #default="{items}">
-			<XNote class="kmkqjgkl" v-for="note in items" :note="note" :key="note.id"/>
-		</MkPagination>
-	</template>
-	<template v-else>
-		<h2># {{ $ts.featured }}</h2>
-		<MkPagination :pagination="featuredPagination" #default="{items}">
-			<XNote class="kmkqjgkl" v-for="note in items" :note="note" :key="note.id"/>
-		</MkPagination>
-	</template>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { toUnicode } from 'punycode';
-import XSigninDialog from '@/components/signin-dialog.vue';
-import XSignupDialog from '@/components/signup-dialog.vue';
-import MkButton from '@/components/ui/button.vue';
-import XNote from '@/components/note.vue';
-import MkPagination from '@/components/ui/pagination.vue';
-import { host, instanceName } from '@/config';
-import * as os from '@/os';
-import number from '@/filters/number';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		XNote,
-		MkPagination,
-	},
-
-	data() {
-		return {
-			host: toUnicode(host),
-			instanceName,
-			meta: null,
-			stats: null,
-			tags: [],
-			clipPagination: {
-				endpoint: 'clips/notes',
-				limit: 10,
-				params: () => ({
-					clipId: this.meta.pinnedClipId,
-				})
-			},
-			featuredPagination: {
-				endpoint: 'notes/featured',
-				limit: 10,
-				offsetMode: true
-			},
-		};
-	},
-
-	created() {
-		os.api('meta', { detail: true }).then(meta => {
-			this.meta = meta;
-		});
-
-		os.api('stats').then(stats => {
-			this.stats = stats;
-		});
-
-		os.api('hashtags/list', {
-			sort: '+mentionedLocalUsers',
-			limit: 8
-		}).then(tags => {
-			this.tags = tags;
-		});
-	},
-
-	methods: {
-		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true
-			}, {}, 'closed');
-		},
-
-		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true
-			}, {}, 'closed');
-		},
-
-		number
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.rsqzvsbo {
-	text-align: center;
-
-	> h2 {
-		display: inline-block;
-		color: #fff;
-		margin: 16px;
-		padding: 8px 12px;
-		background: rgba(0, 0, 0, 0.5);
-	}
-
-	> .overview {
-		> .stats, > .tags {
-			display: inline-block;
-			vertical-align: top;
-			width: 530px;
-			padding: 32px;
-			margin: 16px;
-			box-sizing: border-box;
-
-			@media (max-width: 800px) {
-				display: block;
-				width: 100%;
-				margin: 12px 0;
-			}
-		}
-
-		> .stats {
-			background: var(--accent);
-			border-radius: 12px;
-			color: #fff;
-			font-size: 1.5em;
-
-			> div {
-				display: flex;
-
-				> span:first-child {
-					opacity: 0.7;
-					font-weight: bold;
-				}
-
-				> span:last-child {
-					margin-left: auto;
-				}
-			}
-		}
-
-		> .tags {
-			background: var(--panel);
-			border-radius: 12px;
-			color: var(--fg);
-			font-size: 1.5em;
-
-			> .tag {
-				margin-right: 1em;
-			}
-		}
-	}
-}
-
-.kmkqjgkl {
-	display: inline-block;
-	vertical-align: middle;
-	width: 530px;
-	margin: 16px;
-	box-sizing: border-box;
-	text-align: left;
-	box-shadow: 0 6px 46px rgb(0 0 0 / 25%);
-	border-radius: 12px;
-
-	@media (max-width: 800px) {
-		display: block;
-		width: 100%;
-		margin: 12px 0;
-	}
-}
-</style>

src/client/pages/welcome.timeline.vue

@@ -0,0 +1,51 @@
+<template>
+<div class="civpbkhh">
+	<div v-for="note in notes" class="note">
+		<div class="content _panel">
+			{{ note.text }}
+		</div>
+		<XReactionsViewer :note="note" ref="reactionsViewer"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XReactionsViewer from '@/components/reactions-viewer.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XReactionsViewer
+	},
+
+	data() {
+		return {
+			notes: [],
+		}
+	},
+
+	created() {
+		os.api('notes/featured').then(notes => {
+			this.notes = notes;
+		});
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.civpbkhh {
+	text-align: right;
+
+	> .note {
+		margin: 16px 0 16px auto;
+
+		> .content {
+			padding: 16px;
+			margin: 0 0 0 auto;
+			max-width: max-content;
+			border-radius: 16px;
+		}
+	}
+}
+</style>

src/client/pages/welcome.vue

@@ -8,7 +8,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import XSetup from './welcome.setup.vue';
-import XEntrance from './welcome.entrance.vue';
+import XEntrance from './welcome.entrance.a.vue';
 import { instanceName } from '@/config';
 import * as os from '@/os';
 

src/client/store.ts

@@ -180,6 +180,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'full' as 'full' | 'icon'
 	},
+	titlebar: {
+		where: 'device',
+		default: true
+	},
 }));
 
 // TODO: 他のタブと永続化されたstateを同期

src/client/themes/_dark.json5

@@ -62,7 +62,6 @@
 		error: '#ec4137',
 		warn: '#ecb637',
 		htmlThemeColor: '@bg',
-		X1: ':alpha<0<@bg',
 		X2: ':darken<2<@panel',
 		X3: 'rgba(255, 255, 255, 0.05)',
 		X4: 'rgba(255, 255, 255, 0.1)',

src/client/themes/_light.json5

@@ -62,7 +62,6 @@
 		error: '#ec4137',
 		warn: '#ecb637',
 		htmlThemeColor: '@bg',
-		X1: ':alpha<0<@bg',
 		X2: ':darken<2<@panel',
 		X3: 'rgba(0, 0, 0, 0.05)',
 		X4: 'rgba(0, 0, 0, 0.1)',

src/client/ui/_common_/header.vue

@@ -5,21 +5,12 @@
 	</transition>
 	<template v-if="info">
 		<div class="titleContainer">
-			<template v-if="info.tabs">
-				<div class="title" v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click.stop="tab.onClick" v-tooltip="tab.tooltip">
-					<Fa v-if="tab.icon" :icon="tab.icon" :key="tab.icon" class="icon"/>
-					<span v-if="tab.title" class="text">{{ tab.title }}</span>
-					<Fa class="indicator" v-if="tab.indicate" :icon="faCircle"/>
-				</div>
-			</template>
-			<template v-else>
-				<div class="title">
-					<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
-					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
-					<span v-if="info.title" class="text">{{ info.title }}</span>
-					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
-				</div>
-			</template>
+			<div class="title">
+				<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
+				<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
+				<span v-if="info.title" class="text">{{ info.title }}</span>
+				<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+			</div>
 		</div>
 		<button class="_button action" v-if="info.action" @click.stop="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>
 	</template>
@@ -155,17 +146,6 @@ export default defineComponent({
 				height: $size;
 				vertical-align: bottom;
 			}
-
-			&._button {
-				&:hover {
-					color: var(--fgHighlighted);
-				}
-			}
-
-			&.selected {
-				box-shadow: 0 -2px 0 0 var(--accent) inset;
-				color: var(--fgHighlighted);
-			}
 		}
 	}
 }

src/client/ui/deck.vue

@@ -8,7 +8,7 @@
 		<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
 		<section v-if="ids.length > 1"
 			class="folder column"
-			:style="{ width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
+			:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
 		>
 			<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
 		</section>

src/client/ui/deck/column.vue

@@ -191,6 +191,7 @@ export default defineComponent({
 			} : undefined, null, {
 				icon: faTrashAlt,
 				text: this.$ts.remove,
+				danger: true,
 				action: () => {
 					removeColumn(this.column.id);
 				}

src/client/ui/deck/main-column.vue

@@ -7,7 +7,7 @@
 	<router-view v-slot="{ Component }">
 		<transition>
 			<keep-alive :include="['timeline']">
-				<component :is="Component" :ref="changePage"/>
+				<component :is="Component" :ref="changePage" @contextmenu.stop="onContextmenu"/>
 			</keep-alive>
 		</transition>
 	</router-view>
@@ -16,10 +16,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XNotes from '@/components/notes.vue';
 import XHeader from '@/ui/_common_/header.vue';
 import { deckStore } from '@/ui/deck/deck-store';
+import * as os from '@/os';
 
 export default defineComponent({
 	components: {
@@ -43,7 +45,6 @@ export default defineComponent({
 		return {
 			deckStore,
 			pageInfo: null,
-			pageKey: 0,
 		}
 	},
 
@@ -54,6 +55,21 @@ export default defineComponent({
 				this.pageInfo = page.INFO;
 			}
 		},
+
+		onContextmenu(e) {
+			if (['INPUT', 'TEXTAREA'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
+			const path = this.$route.path;
+			os.contextMenu([{
+				type: 'label',
+				text: path,
+			}, {
+				icon: faWindowMaximize,
+				text: this.$ts.openInWindow,
+				action: () => {
+					os.pageWindow(path);
+				}
+			}], e);
+		},
 	}
 });
 </script>

src/client/ui/deck/widgets-column.vue

@@ -114,7 +114,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .wtdtxvec {
-	padding-top: 1px; // ウィジェットのbox-shadowを利用した1px borderを隠さないようにするため
+	._panel {
+		box-shadow: none;
+	}
 
 	> header {
 		padding: 16px;

src/client/ui/default.vue

@@ -2,8 +2,8 @@
 <div class="mk-app" :class="{ wallpaper }">
 	<XSidebar ref="nav" class="sidebar"/>
 
-	<div class="contents" ref="contents">
-		<header class="header" ref="header" @contextmenu.prevent.stop="onContextmenu" @click="onHeaderClick">
+	<div class="contents" ref="contents" :class="{ withHeader: $store.state.titlebar }" @contextmenu.stop="onContextmenu">
+		<header v-if="$store.state.titlebar" class="header" ref="header" @click="onHeaderClick">
 			<XHeader :info="pageInfo"/>
 		</header>
 		<main ref="main">
@@ -29,6 +29,7 @@
 
 	<div class="buttons" :class="{ navHidden }">
 		<button class="button nav _button" @click="showNav" ref="navButton"><Fa :icon="faBars"/><i v-if="navIndicated"><Fa :icon="faCircle"/></i></button>
+		<button class="button home _button" @click="$route.name === 'index' ? top() : $router.push('/')"><Fa :icon="faHome"/></button>
 		<button class="button notifications _button" @click="$router.push('/my/notifications')"><Fa :icon="faBell"/><i v-if="$i.hasUnreadNotification"><Fa :icon="faCircle"/></i></button>
 		<button class="button widget _button" @click="widgetsShowing = true"><Fa :icon="faLayerGroup"/></button>
 		<button class="button post _button" @click="post"><Fa :icon="faPencilAlt"/></button>
@@ -53,10 +54,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, defineAsyncComponent, markRaw } from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
 import { faLayerGroup, faBars, faHome, faCircle, faWindowMaximize, faColumns, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faBell } from '@fortawesome/free-regular-svg-icons';
-import { host } from '@/config';
+import { instanceName } from '@/config';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
 import XSidebar from '@/components/sidebar.vue';
 import XCommon from './_common_/common.vue';
@@ -86,8 +87,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			host: host,
-			pageKey: 0,
 			pageInfo: null,
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
 			menuDef: sidebarDef,
@@ -108,12 +107,6 @@ export default defineComponent({
 		}
 	},
 
-	watch: {
-		$route(to, from) {
-			this.pageKey++;
-		},
-	},
-
 	created() {
 		document.documentElement.style.overflowY = 'scroll';
 
@@ -154,6 +147,7 @@ export default defineComponent({
 			if (page == null) return;
 			if (page.INFO) {
 				this.pageInfo = page.INFO;
+				document.title = `${this.pageInfo.title} | ${instanceName}`;
 			}
 		},
 
@@ -162,7 +156,7 @@ export default defineComponent({
 			this.navHidden = navWidth === 0;
 			if (this.$refs.contents == null) return;
 			const width = this.$refs.contents.offsetWidth;
-			this.$refs.header.style.width = `${width}px`;
+			if (this.$refs.header) this.$refs.header.style.width = `${width}px`;
 		},
 
 		showNav() {
@@ -193,6 +187,7 @@ export default defineComponent({
 		},
 
 		onContextmenu(e) {
+			if (['INPUT', 'TEXTAREA'].includes(e.target.tagName) || e.target.attributes['contenteditable']) return;
 			const path = this.$route.path;
 			os.contextMenu([{
 				type: 'label',
@@ -256,7 +251,10 @@ export default defineComponent({
 	> .contents {
 		width: 100%;
 		min-width: 0;
-		padding-top: $header-height;
+
+		&.withHeader {
+			padding-top: $header-height;
+		}
 
 		> .header {
 			position: fixed;
@@ -336,15 +334,13 @@ export default defineComponent({
 		position: fixed;
 		z-index: 1000;
 		bottom: 0;
-		padding: 0 32px 32px 32px;
+		padding: 16px;
 		display: flex;
 		width: 100%;
 		box-sizing: border-box;
-		background: linear-gradient(0deg, var(--bg), var(--X1));
-
-		@media (max-width: 500px) {
-			padding: 0 16px 16px 16px;
-		}
+		-webkit-backdrop-filter: blur(32px);
+		backdrop-filter: blur(32px);
+		background-color: var(--header);
 
 		&:not(.navHidden) {
 			display: none;
@@ -352,15 +348,26 @@ export default defineComponent({
 
 		> .button {
 			position: relative;
+			flex: 1;
 			padding: 0;
 			margin: auto;
-			width: 64px;
 			height: 64px;
-			border-radius: 100%;
-			box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+			border-radius: 8px;
 			background: var(--panel);
 			color: var(--fg);
 
+			&:not(:last-child) {
+				margin-right: 12px;
+			}
+
+			@media (max-width: 400px) {
+				height: 60px;
+
+				&:not(:last-child) {
+					margin-right: 8px;
+				}
+			}
+
 			&:hover {
 				background: var(--X2);
 			}

src/client/ui/visitor/a.vue

@@ -63,7 +63,6 @@ export default defineComponent({
 		return {
 			host,
 			instanceName,
-			pageKey: 0,
 			pageInfo: null,
 			meta: null,
 			narrow: window.innerWidth < 1280,
@@ -88,12 +87,6 @@ export default defineComponent({
 		},
 	},
 
-	watch: {
-		$route(to, from) {
-			this.pageKey++;
-		},
-	},
-
 	created() {
 		document.documentElement.style.overflowY = 'scroll';
 

src/client/ui/visitor/b.vue

@@ -1,13 +1,13 @@
 <template>
-<div class="mk-app" :style="{ backgroundImage: root ? `url(${ $instance.backgroundImageUrl })` : 'none' }">
+<div class="mk-app">
 	<a v-if="root" href="https://github.com/syuilo/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--panel); color:var(--fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
 
-	<div class="side" v-if="!narrow">
-		<XKanban class="kanban" full :transparent="root" :powered-by="root"/>
+	<div class="side" v-if="!narrow && !root">
+		<XKanban class="kanban" full/>
 	</div>
 
 	<div class="main">
-		<XKanban class="banner" :full="root" :transparent="root" :powered-by="root" v-if="narrow"/>
+		<XKanban class="banner" :powered-by="root" v-if="narrow && !root"/>
 
 		<div class="contents">
 			<XHeader class="header" :info="pageInfo" v-if="!root"/>
@@ -76,7 +76,6 @@ export default defineComponent({
 		return {
 			host,
 			instanceName,
-			pageKey: 0,
 			pageInfo: null,
 			meta: null,
 			showMenu: false,
@@ -106,14 +105,8 @@ export default defineComponent({
 		},
 	},
 
-	watch: {
-		$route(to, from) {
-			this.pageKey++;
-		},
-	},
-
 	created() {
-		document.documentElement.style.overflowY = 'scroll';
+		//document.documentElement.style.overflowY = 'scroll';
 
 		os.api('meta', { detail: true }).then(meta => {
 			this.meta = meta;

src/client/ui/zen.vue

@@ -38,18 +38,11 @@ export default defineComponent({
 	data() {
 		return {
 			host: host,
-			pageKey: 0,
 			pageInfo: null,
 			faLayerGroup, faBars, faBell, faHome, faCircle,
 		};
 	},
 
-	watch: {
-		$route(to, from) {
-			this.pageKey++;
-		},
-	},
-
 	created() {
 		document.documentElement.style.overflowY = 'scroll';
 	},

src/client/widgets/index.ts

@@ -14,6 +14,7 @@ export default function(app: App) {
 	app.component('MkwFederation', defineAsyncComponent(() => import('./federation.vue')));
 	app.component('MkwPostForm', defineAsyncComponent(() => import('./post-form.vue')));
 	app.component('MkwSlideshow', defineAsyncComponent(() => import('./slideshow.vue')));
+	app.component('MkwOnlineUsers', defineAsyncComponent(() => import('./online-users.vue')));
 	app.component('MkwButton', defineAsyncComponent(() => import('./button.vue')));
 }
 
@@ -31,5 +32,6 @@ export const widgets = [
 	'federation',
 	'postForm',
 	'slideshow',
+	'onlineUsers',
 	'button',
 ];

src/client/widgets/online-users.vue

@@ -0,0 +1,67 @@
+<template>
+<div class="mkw-onlineUsers" :class="{ _panel: !props.transparent, pad: !props.transparent }">
+	<I18n v-if="onlineUsersCount" :src="$ts.onlineUsersCount" text-tag="span" class="text">
+		<template #n><b>{{ onlineUsersCount }}</b></template>
+	</I18n>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import define from './define';
+import * as os from '@/os';
+
+const widget = define({
+	name: 'onlineUsers',
+	props: () => ({
+		transparent: {
+			type: 'boolean',
+			default: true,
+		},
+	})
+});
+
+export default defineComponent({
+	extends: widget,
+	data() {
+		return {
+			onlineUsersCount: null,
+			clock: null,
+		};
+	},
+	created() {
+		this.tick();
+		this.clock = setInterval(this.tick, 1000 * 15);
+	},
+	beforeUnmount() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		tick() {
+			os.api('get-online-users-count').then(res => {
+				this.onlineUsersCount = res.count;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-onlineUsers {
+	text-align: center;
+
+	&.pad {
+		padding: 16px 0;
+	}
+
+	> .text {
+		::v-deep(b) {
+			color: #41b781;
+		}
+
+		::v-deep(span) {
+			opacity: 0.7;
+		}
+	}
+}
+</style>

src/docs/en-US/custom-emoji.md

@@ -1,2 +1,2 @@
 # Custom Emoji
-カスタム絵文字は、インスタンスで用意された画像を絵文字のように使える機能です。 ノート、リアクション、チャット、自己紹介、名前などの場所で使うことができます。 カスタム絵文字をそれらの場所で使うには、絵文字ピッカーボタン(ある場合)を押すか、`:`を入力して絵文字サジェストを表示します。 テキスト内に`:foo:`のような形式の文字列が見つかると、`foo`の部分がカスタム絵文字名と解釈され、表示時には対応したカスタム絵文字に置き換わります。
+Custom emojis are a function that allows images uploaded to the server to be used like emojis. They can be used in notes, reactions, chat, your profile, your username as well as other places. To use custom emojis in the above mentioned places, press the Emoji picker button (if present) or type a `:` and emoji suggestions will appear. If you see a string in a text that looks like `:foo:`, then the `foo` portion is interpreted as a custom emoji name and will be replaced with said custom emoji picture when displayed.

src/docs/en-US/follow.md

@@ -1,2 +1,2 @@
 # Following
-ユーザーをフォローすると、タイムラインにそのユーザーの投稿が表示されるようになります。ただし、他のユーザーに対する返信は含まれません。 ユーザーをフォローするには、ユーザーページの「フォロー」ボタンをクリックします。フォローを解除するには、もう一度クリックします。
+If you follow a user, the posts of that user will appear on your timeline.However, replies from them to other users will not be displayed. To follow a user, click the "Follow" button on their user page.To stop following a user, click the button once more.

src/docs/en-US/mfm.md

@@ -1,2 +1,2 @@
 # MFM
-MFMは、Misskey Flavored Markdownの略で、Misskeyの様々な場所で使用できる専用のマークアップ言語です。 MFMで使用可能な構文は[MFMチートシート](/mfm-cheat-sheet)で確認できます。
+MFM stands for Misskey Flavored Markdown and is a Misskey-exclusive text markup language that can be used in many places. For valid MFM syntax, see the [MFM Cheatsheet](/mfm-cheat-sheet).

src/docs/en-US/mute.md

@@ -1,13 +1,13 @@
 # Mute
 
-ユーザーをミュートすると、そのユーザーに関する次のコンテンツがMisskeyに表示されなくなります:
+If you mute a user, the following contents related to that user will not be displayed by Misskey anymore:
 
-* タイムラインや投稿の検索結果内の、そのユーザーの投稿(およびそれらの投稿に対する返信やRenote)
-* そのユーザーからの通知
-* メッセージ履歴一覧内の、そのユーザーとのメッセージ履歴
+* Posts of that user on the timeline or in the search results (including Renotes or replies to related to these posts)
+* Notifications from that user
+* Chat history with that user in the chat history list
 
-ユーザーをミュートするには、対象のユーザーのユーザーページに表示されている「ミュート」ボタンを押します。
+To mute a user, press the "Mute" button displayed on the user's profile page.
 
-ミュートを行ったことは相手に通知されず、ミュートされていることを知ることもできません。
+Users muted by you will not be notified that they have been muted, and will also not know that they have been muted by you.
 
-設定>ミュート から、自分がミュートしているユーザー一覧を確認することができます。
+You can confirm the list of users you have muted in the settings by going to Settings > Mute / Block

src/docs/en-US/reaction.md

@@ -1,11 +1,11 @@
 # Reaction
-他の人のノートに、絵文字を付けて簡単にあなたの反応を伝えられる機能です。 リアクションするには、ノートの + アイコンをクリックしてピッカーを表示し、絵文字を選択します。 リアクションには[カスタム絵文字](./custom-emoji)も使用できます。
+Easily express your feelings about the notes of others by attaching emojis to them. To react to a note, press the "+" icon to display the reaction picker and click on an emoji. You can also use [Custom Emoji](./custom-emoji) as reactions.
 
-## リアクションピッカーのカスタマイズ
-ピッカーに表示される絵文字を自分好みにカスタマイズすることができます。 設定の「リアクション」で設定します。
+## Customizing the reaction picker
+It's possible to customize the emoji picker to display the emojis you want. You can configure it in the "Reactions" settings menu.
 
-## リモート投稿へのリアクションについて
-リアクションはMisskeyオリジナルの機能であるため、リモートインスタンスがMisskeyでない限りは、ほとんどの場合「Like」としてアクティビティが送信されます。一般的にはLikeは「お気に入り」として実装されているようです。 また、相手がMisskeyであったとしても、カスタム絵文字リアクションは伝わらず、自動的に「👍」等にフォールバックされます。
+## About reacting to remote posts
+Because reactions are a Misskey-original feature, unless the remote instance is also a Misskey instance, reactions to posts will be sent as a "Like" activity.Generally speaking, "Like" functionality seems to be implemented as a "Favorite" feature. In addition, even if the interaction partner is a Misskey instance, custom emoji reactions will not be transmitted and instead fall back to a "👍" reaction or similar.
 
-## リモートからのリアクションについて
-リモートから「Like」アクティビティを受信したとき、Misskeyでは「👍」のリアクションとして解釈されます。
+## About reactions from remote servers
+If a "Like" activity is sent from a remote server, it will be interpreted as a "👍" reaction in Misskey.

src/docs/en-US/theme.md

@@ -1,12 +1,12 @@
-# Theme
+# Themes
 
-テーマを設定して、Misskeyクライアントの見た目を変更できます。
+You can change the appearance of the Misskey client by setting a theme.
 
-## テーマの設定
-設定 > テーマ
+## Theme settings
+Settings > Themes
 
-## テーマを作成する
-テーマコードはJSON5で記述されたテーマオブジェクトです。 テーマは以下のようなオブジェクトです。
+## Creating a theme
+Theme codes are saved as a JSON5 object of theme options. Themes are composed of the following options.
 ``` js
 {
     id: '17587283-dd92-4a2c-a22c-be0637c9e22a',
@@ -33,36 +33,36 @@
 
 ```
 
-* `id` ... テーマの一意なID。UUIDをおすすめします。
-* `name` ... テーマ名
-* `author` ... テーマの作者
-* `desc` ... テーマの説明(オプション)
-* `base` ... 明るいテーマか、暗いテーマか
-    * `light`にすると明るいテーマになり、`dark`にすると暗いテーマになります。
-    * テーマはここで設定されたベーステーマを継承します。
-* `props` ... テーマのスタイル定義。これから説明します。
+* `id` ... A unique theme ID.Using an UUID is recommended.
+* `name` ... The name of the theme
+* `author` ... The creator of the theme
+* `desc` ... A description of the theme (optional)
+* `base` ... Whether the theme is based on a light or dark theme
+    * If you set it to `light` the theme will be listed as a light mode theme, if you set it to `dark` it will be listed as a dark mode theme.
+    * The theme will be inheriting the default values of the theme specified here.
+* `props` ... The style definitions of the theme.These will be explained in the following.
 
-### テーマのスタイル定義
-`props`下にはテーマのスタイルを定義します。 キーがCSSの変数名になり、バリューで中身を指定します。 なお、この`props`オブジェクトはベーステーマから継承されます。 ベーステーマは、このテーマの`base`が`light`なら[_light.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_light.json5)で、`dark`なら[_dark.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_dark.json5)です。 つまり、このテーマ内の`props`に`panel`というキーが無くても、そこにはベーステーマの`panel`があると見なされます。
+### Theme style definitions
+Define the style of the theme within `props`. The keys will become CSS variables, and the value specifies the content. In addition, the default `props` options are inherited from the base theme. If this theme's `base` is `light`, they will be copied from [_light.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_light.json5), if it is `dark` they will be copied from [_dark.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_dark.json5). In other words, if there is for example no `panel` key contained in `props`, then the value of `panel` from the base theme will be used.
 
-#### バリューで使える構文
-* 16進数で表された色
-    * 例: `#00ff00`
-* `rgb(r, g, b)`形式で表された色
-    * 例: `rgb(0, 255, 0)`
-* `rgb(r, g, b, a)`形式で表された透明度を含む色
-    * 例: `rgba(0, 255, 0, 0.5)`
-* 他のキーの値の参照
-    * `@{キー名}`と書くと他のキーの値の参照になります。`{キー名}`は参照したいキーの名前に置き換えます。
-    * 例: `@panel`
-* 定数(後述)の参照
-    * `${定数名}`と書くと定数の参照になります。`{定数名}`は参照したい定数の名前に置き換えます。
-    * 例: `$main`
-* 関数(後述)
-    * `:{関数名}<{引数}<{色}`
+#### Syntax for values
+* Hex colors
+    * E.g.: `#00ff00`
+* RGB colors with `rgb(r, g, b)` syntax
+    * E.g.: `rgb(0, 255, 0)`
+* RGBA colors with `rgb(r, g, b)` syntax
+    * E.g.: `rgba(0, 255, 0, 0.5)`
+* References to values of other keys
+    * If you write `@{key-name}` the value of the given key will be used.Replace `{key-name}` with the name of the key to reference.
+    * E.g.: `@panel`
+* Constants (see below)
+    * If you write `${constant-name}` the value of the given constant will be used.Replace `{constant-name}` with the name of the constant to reference.
+    * E.g.: `$main`
+* Functions (see below)
+    * `:{function-name}<{argument}<{color}`
 
-#### Constant
-「CSS変数として出力はしたくないが、他のCSS変数の値として使いまわしたい」値があるときは、定数を使うと便利です。 キー名を`$`で始めると、そのキーはCSS変数として出力されません。
+#### Constants
+In cases where you have a value that you don't want to output as a CSS variable, but want to use it as the value of another CSS variable, you can use a constant. If you prefix the name of a key with a `$`, it will be not be used as a CSS variable, but a referenced value.
 
 #### Functions
 wip

src/docs/en-US/timelines.md

@@ -1,15 +1,15 @@
-# タイムラインの比較
+# Timeline comparison
 
 https://docs.google.com/spreadsheets/d/1lxQ2ugKrhz58Bg96HTDK_2F98BUritkMyIiBkOByjHA/edit?usp=sharing
 
 ## Home
-自分のフォローしているユーザーの投稿
+Posts of users you are following
 
 ## Local
-全てのローカルユーザーの「ホーム」指定されていない投稿
+All posts of local users that are not marked as "Home-only"
 
 ## Social
-自分のフォローしているユーザーの投稿と、全てのローカルユーザーの「ホーム」指定されていない投稿
+Posts of users you are following as well as all posts of local users that are not marked as "Home-only"
 
 ## Global
-全てのローカルユーザーの「ホーム」指定されていない投稿と、サーバーに届いた全てのリモートユーザーの「ホーム」指定されていない投稿
+All posts of local users that are not marked as "Home-only" as well as all messages received by the server that are not marked as "Home-only"

src/docs/ht-HT/aiscript.md

@@ -0,0 +1,4 @@
+# AiScript
+
+## 関数
+デフォルトで値渡しです。

src/docs/ht-HT/api.md

@@ -0,0 +1,58 @@
+# Misskey API
+
+MisskeyAPIを使ってMisskeyクライアント、Misskey連携Webサービス、Bot等(以下「アプリケーション」と呼びます)を開発できます。 ストリーミングAPIもあるので、リアルタイム性のあるアプリケーションを作ることも可能です。
+
+APIを使い始めるには、まずアクセストークンを取得する必要があります。 このドキュメントでは、アクセストークンを取得する手順を説明した後、基本的なAPIの使い方を説明します。
+
+## アクセストークンの取得
+基本的に、APIはリクエストにはアクセストークンが必要となります。 APIにリクエストするのが自分自身なのか、不特定の利用者に使ってもらうアプリケーションなのかによって取得手順は異なります。
+
+* 前者の場合: [「自分自身のアクセストークンを手動発行する」](#自分自身のアクセストークンを手動発行する)に進む
+* 後者の場合: [「アプリケーション利用者にアクセストークンの発行をリクエストする」](#アプリケーション利用者にアクセストークンの発行をリクエストする)に進む
+
+### 自分自身のアクセストークンを手動発行する
+「設定 > API」で、自分のアクセストークンを発行できます。
+
+[「APIの使い方」へ進む](#APIの使い方)
+
+### アプリケーション利用者にアクセストークンの発行をリクエストする
+アプリケーション利用者のアクセストークンを取得するには、以下の手順で発行をリクエストします。
+
+#### Step 1
+
+UUIDを生成する。以後これをセッションIDと呼びます。
+
+> このセッションIDは毎回生成し、使いまわさないようにしてください。
+
+#### Step 2
+
+`{_URL_}/miauth/{session}`をユーザーのブラウザで表示させる。`{session}`の部分は、セッションIDに置き換えてください。
+> 例: `{_URL_}/miauth/c1f6d42b-468b-4fd2-8274-e58abdedef6f`
+
+表示する際、URLにクエリパラメータとしていくつかのオプションを設定できます:
+* `name` ... アプリケーション名
+    * > 例: `MissDeck`
+* `icon` ... アプリケーションのアイコン画像URL
+    * > 例: `https://missdeck.example.com/icon.png`
+* `callback` ... 認証が終わった後にリダイレクトするURL
+    * > 例: `https://missdeck.example.com/callback`
+    * リダイレクト時には、`session`というクエリパラメータでセッションIDが付きます
+* `permission` ... アプリケーションが要求する権限
+    * > 例: `write:notes,write:following,read:drive`
+    * 要求する権限を`,`で区切って列挙します
+    * どのような権限があるかは[APIリファレンス](/api-doc)で確認できます
+
+#### Step 3
+ユーザーが発行を許可した後、`{_URL_}/api/miauth/{session}/check`にPOSTリクエストすると、レスポンスとしてアクセストークンを含むJSONが返ります。
+
+レスポンスに含まれるプロパティ:
+* `token` ... ユーザーのアクセストークン
+* `user` ... ユーザーの情報
+
+[「APIの使い方」へ進む](#APIの使い方)
+
+## APIの使い方
+**APIはすべてPOSTで、リクエスト/レスポンスともにJSON形式です。RESTではありません。** アクセストークンは、`i`というパラメータ名でリクエストに含めます。
+
+* [APIリファレンス](/api-doc)
+* [ストリーミングAPI](./stream)

src/docs/ht-HT/create-plugin.md

@@ -0,0 +1,74 @@
+# プラグインの作成
+Misskey Webクライアントのプラグイン機能を使うと、クライアントを拡張し、様々な機能を追加できます。 ここではプラグインの作成にあたってのメタデータ定義や、AiScript APIリファレンスを掲載します。
+
+## メタデータ
+プラグインは、AiScriptのメタデータ埋め込み機能を使って、デフォルトとしてプラグインのメタデータを定義する必要があります。 メタデータは次のプロパティを含むオブジェクトです。
+
+### name
+プラグイン名
+
+### author
+プラグイン作者
+
+### version
+プラグインバージョン。数値を指定してください。
+
+### description
+プラグインの説明
+
+### permissions
+プラグインが要求する権限。MisskeyAPIにリクエストする際に用いられます。
+
+### config
+プラグインの設定情報を表すオブジェクト。 キーに設定名、値に以下のプロパティを含めます。
+
+#### type
+設定値の種類を表す文字列。以下から選択します。 string number boolean
+
+#### label
+ユーザーに表示する設定名
+
+#### description
+設定の説明
+
+#### default
+設定のデフォルト値
+
+## APIリファレンス
+AiScript標準で組み込まれているAPIは掲載しません。
+
+### Mk:dialog(title text type)
+ダイアログを表示します。typeには以下の値が設定できます。 info success warn error question 省略すると info になります。
+
+### Mk:confirm(title text type)
+確認ダイアログを表示します。typeには以下の値が設定できます。 info success warn error question 省略すると question になります。 ユーザーが"OK"を選択した場合は true を、"キャンセル"を選択した場合は false が返ります。
+
+### Mk:api(endpoint params)
+Misskey APIにリクエストします。第一引数にエンドポイント名、第二引数にパラメータオブジェクトを渡します。
+
+### Mk:save(key value)
+任意の値に任意の名前を付けて永続化します。永続化した値は、AiScriptコンテキストが終了しても残り、Mk:loadで読み取ることができます。
+
+### Mk:load(key)
+Mk:saveで永続化した指定の名前の値を読み取ります。
+
+### Plugin:register_post_form_action(title fn)
+投稿フォームにアクションを追加します。第一引数にアクション名、第二引数にアクションが選択された際のコールバック関数を渡します。 コールバック関数には、第一引数に投稿フォームオブジェクトが渡されます。
+
+### Plugin:register_note_action(title fn)
+ノートメニューに項目を追加します。第一引数に項目名、第二引数に項目が選択された際のコールバック関数を渡します。 コールバック関数には、第一引数に対象のノートオブジェクトが渡されます。
+
+### Plugin:register_user_action(title fn)
+ユーザーメニューに項目を追加します。第一引数に項目名、第二引数に項目が選択された際のコールバック関数を渡します。 コールバック関数には、第一引数に対象のユーザーオブジェクトが渡されます。
+
+### Plugin:register_note_view_interruptor(fn)
+UIに表示されるノート情報を書き換えます。 コールバック関数には、第一引数に対象のノートオブジェクトが渡されます。 コールバック関数の返り値でノートが書き換えられます。
+
+### Plugin:register_note_post_interruptor(fn)
+ノート投稿時にノート情報を書き換えます。 コールバック関数には、第一引数に対象のノートオブジェクトが渡されます。 コールバック関数の返り値でノートが書き換えられます。
+
+### Plugin:open_url(url)
+第一引数に渡されたURLをブラウザの新しいタブで開きます。
+
+### Plugin:config
+プラグインの設定が格納されるオブジェクト。プラグイン定義のconfigで設定したキーで値が入ります。

src/docs/ht-HT/custom-emoji.md

@@ -0,0 +1,2 @@
+# カスタム絵文字
+カスタム絵文字は、インスタンスで用意された画像を絵文字のように使える機能です。 ノート、リアクション、チャット、自己紹介、名前などの場所で使うことができます。 カスタム絵文字をそれらの場所で使うには、絵文字ピッカーボタン(ある場合)を押すか、`:`を入力して絵文字サジェストを表示します。 テキスト内に`:foo:`のような形式の文字列が見つかると、`foo`の部分がカスタム絵文字名と解釈され、表示時には対応したカスタム絵文字に置き換わります。

src/docs/ht-HT/deck.md

@@ -0,0 +1,18 @@
+# デッキ
+
+デッキは利用可能なUIのひとつです。「カラム」と呼ばれるビューを複数並べて表示させることで、カスタマイズ性が高く、情報量の多いUIが構築できることが特徴です。
+
+## カラムの追加
+デッキの背景を右クリックし、「カラムを追加」して任意のカラムを追加できます。
+
+## カラムの移動
+カラムは、ドラッグアンドドロップで他のカラムと位置を入れ替えることが出来るほか、カラムメニュー(カラムのヘッダー右クリック)から位置を移動させることもできます。
+
+## カラムの水平分割
+カラムは左右だけでなく、上下に並べることもできます。 カラムメニューを開き、「左に重ねる」を選択すると、左のカラムの下に現在のカラムが移動します。 上下分割を解除するには、カラムメニューの「右に出す」を選択します。
+
+## カラムの設定
+カラムメニューの「編集」を選択するとカラムの設定を編集できます。カラムの名前を変えたり、幅を変えたりできます。
+
+## デッキの設定
+デッキに関する設定は、[settings/deck](/settings/deck)で行えます。

src/docs/ht-HT/follow.md

@@ -0,0 +1,2 @@
+# フォロー
+ユーザーをフォローすると、タイムラインにそのユーザーの投稿が表示されるようになります。ただし、他のユーザーに対する返信は含まれません。 ユーザーをフォローするには、ユーザーページの「フォロー」ボタンをクリックします。フォローを解除するには、もう一度クリックします。

src/docs/ht-HT/keyboard-shortcut.md

@@ -0,0 +1,68 @@
+# キーボードショートカット
+
+## グローバル
+これらのショートカットは基本的にどこでも使えます。
+<table>
+    <thead>
+        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+    </thead>
+    <tbody>
+        <tr><td><kbd class="key">P</kbd>, <kbd class="key">N</kbd></td><td>新規投稿</td><td><b>P</b>ost, <b>N</b>ew, <b>N</b>ote</td></tr>
+        <tr><td><kbd class="key">T</kbd></td><td>タイムラインの最も新しい投稿にフォーカス</td><td><b>T</b>imeline, <b>T</b>op</td></tr>
+        <tr><td><kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">N</kbd></kbd></td><td>通知を表示/隠す</td><td><b>N</b>otifications</td></tr>
+        <tr><td><kbd class="key">S</kbd></td><td>検索</td><td><b>S</b>earch</td></tr>
+        <tr><td><kbd class="key">H</kbd>, <kbd class="key">?</kbd></td><td>ヘルプを表示</td><td><b>H</b>elp</td></tr>
+    </tbody>
+</table>
+
+## 投稿にフォーカスされた状態
+
+<table>
+    <thead>
+        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+    </thead>
+    <tbody>
+        <tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>上の投稿にフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd>, <kbd class="key">Tab</kbd></td><td>下の投稿にフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">R</kbd></td><td>返信フォームを開く</td><td><b>R</b>eply</td></tr>
+        <tr><td><kbd class="key">Q</kbd></td><td>Renoteフォームを開く</td><td><b>Q</b>uote</td></tr>
+        <tr><td><kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">Q</kbd></kbd></td><td>即刻Renoteする(フォームを開かずに)</td><td>-</td></tr>
+        <tr><td><kbd class="key">E</kbd>, <kbd class="key">A</kbd>, <kbd class="key">+</kbd></td><td>リアクションフォームを開く</td><td><b>E</b>mote, re<b>A</b>ction</td></tr>
+        <tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションをする(対応については後述)</td><td>-</td></tr>
+        <tr><td><kbd class="key">F</kbd>, <kbd class="key">B</kbd></td><td>お気に入りに登録</td><td><b>F</b>avorite, <b>B</b>ookmark</td></tr>
+        <tr><td><kbd class="key">Del</kbd>, <kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">D</kbd></kbd></td><td>投稿を削除</td><td><b>D</b>elete</tr>
+        <tr><td><kbd class="key">M</kbd>, <kbd class="key">O</kbd></td><td>投稿に対するメニューを開く</td><td><b>M</b>ore, <b>O</b>ther</td></tr>
+        <tr><td><kbd class="key">S</kbd></td><td>CWで隠された部分を表示 or 隠す</td><td><b>S</b>how, <b>S</b>ee</td></tr>
+        <tr><td><kbd class="key">Esc</kbd></td><td>フォーカスを外す</td><td>-</td></tr>
+    </tbody>
+</table>
+
+## Renoteフォーム
+
+<table>
+    <thead>
+        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+    </thead>
+    <tbody>
+        <tr><td><kbd class="key">Enter</kbd></td><td>Renoteする</td><td>-</td></tr>
+        <tr><td><kbd class="key">Q</kbd></td><td>フォームを展開する</td><td><b>Q</b>uote</td></tr>
+        <tr><td><kbd class="key">Esc</kbd></td><td>フォームを閉じる</td><td>-</td></tr>
+    </tbody>
+</table>
+
+## リアクションフォーム
+デフォルトで「👍」にフォーカスが当たっている状態です。
+<table>
+    <thead>
+        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+    </thead>
+    <tbody>
+        <tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd></td><td>上のリアクションにフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd></td><td>下のリアクションにフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">←</kbd>, <kbd class="key">H</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>左のリアクションにフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">→</kbd>, <kbd class="key">L</kbd>, <kbd class="key">Tab</kbd></td><td>右のリアクションにフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">Enter</kbd>, <kbd class="key">Space</kbd>, <kbd class="key">+</kbd></td><td>リアクション確定</td><td>-</td></tr>
+        <tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションで確定</td><td>-</td></tr>
+        <tr><td><kbd class="key">Esc</kbd></td><td>リアクションするのをやめる</td><td>-</td></tr>
+    </tbody>
+</table>

src/docs/ht-HT/mfm.md

@@ -0,0 +1,2 @@
+# MFM
+MFMは、Misskey Flavored Markdownの略で、Misskeyの様々な場所で使用できる専用のマークアップ言語です。 MFMで使用可能な構文は[MFMチートシート](/mfm-cheat-sheet)で確認できます。

src/docs/ht-HT/mute.md

@@ -0,0 +1,13 @@
+# ミュート
+
+ユーザーをミュートすると、そのユーザーに関する次のコンテンツがMisskeyに表示されなくなります:
+
+* タイムラインや投稿の検索結果内の、そのユーザーの投稿(およびそれらの投稿に対する返信やRenote)
+* そのユーザーからの通知
+* メッセージ履歴一覧内の、そのユーザーとのメッセージ履歴
+
+ユーザーをミュートするには、対象のユーザーのユーザーページに表示されている「ミュート」ボタンを押します。
+
+ミュートを行ったことは相手に通知されず、ミュートされていることを知ることもできません。
+
+設定>ミュート から、自分がミュートしているユーザー一覧を確認することができます。

src/docs/ht-HT/pages.md

@@ -0,0 +1,10 @@
+# Pages
+
+## 変数
+変数を使うことで動的なページを作成できます。テキスト内で <b>{ 変数名 }</b> と書くとそこに変数の値を埋め込めます。例えば <b>Hello { thing } world!</b> というテキストで、変数(thing)の値が <b>ai</b> だった場合、テキストは <b>Hello ai world!</b> になります。
+
+変数の評価(値を算出すること)は上から下に行われるので、ある変数の中で自分より下の変数を参照することはできません。例えば上から <b>A、B、C</b> と3つの変数を定義したとき、<b>C</b>の中で<b>A</b>や<b>B</b>を参照することはできますが、<b>A</b>の中で<b>B</b>や<b>C</b>を参照することはできません。
+
+ユーザーからの入力を受け取るには、ページに「ユーザー入力」ブロックを設置し、「変数名」に入力を格納したい変数名を設定します(変数は自動で作成されます)。その変数を使ってユーザー入力に応じた動作を行えます。
+
+関数を使うと、値の算出処理を再利用可能な形にまとめることができます。関数を作るには、「関数」タイプの変数を作成します。関数にはスロット(引数)を設定することができ、スロットの値は関数内で変数として利用可能です。また、関数を引数に取る関数(高階関数と呼ばれます)も存在します。関数は予め定義しておくほかに、このような高階関数のスロットに即席でセットすることもできます。

src/docs/ht-HT/reaction.md

@@ -0,0 +1,11 @@
+# リアクション
+他の人のノートに、絵文字を付けて簡単にあなたの反応を伝えられる機能です。 リアクションするには、ノートの + アイコンをクリックしてピッカーを表示し、絵文字を選択します。 リアクションには[カスタム絵文字](./custom-emoji)も使用できます。
+
+## リアクションピッカーのカスタマイズ
+ピッカーに表示される絵文字を自分好みにカスタマイズすることができます。 設定の「リアクション」で設定します。
+
+## リモート投稿へのリアクションについて
+リアクションはMisskeyオリジナルの機能であるため、リモートインスタンスがMisskeyでない限りは、ほとんどの場合「Like」としてアクティビティが送信されます。一般的にはLikeは「お気に入り」として実装されているようです。 また、相手がMisskeyであったとしても、カスタム絵文字リアクションは伝わらず、自動的に「👍」等にフォールバックされます。
+
+## リモートからのリアクションについて
+リモートから「Like」アクティビティを受信したとき、Misskeyでは「👍」のリアクションとして解釈されます。

src/docs/ht-HT/reversi-bot.md

@@ -0,0 +1,160 @@
+# MisskeyリバーシBotの開発
+Misskeyのリバーシ機能に対応したBotの開発方法をここに記します。
+
+1. `games/reversi`ストリームに以下のパラメータを付けて接続する:
+    * `i`: botアカウントのAPIキー
+
+2. 対局への招待が来たら、ストリームから`invited`イベントが流れてくる
+    * イベントの中身に、`parent`という名前で対局へ誘ってきたユーザーの情報が含まれている
+
+3. `games/reversi/match`へ、`user_id`として`parent`の`id`が含まれたリクエストを送信する
+
+4. 上手くいくとゲーム情報が返ってくるので、`games/reversi-game`ストリームへ、以下のパラメータを付けて接続する:
+    * `i`: botアカウントのAPIキー
+    * `game`: `game`の`id`
+
+5. この間、相手がゲームの設定を変更するとその都度`update-settings`イベントが流れてくるので、必要であれば何かしらの処理を行う
+
+6. 設定に満足したら、`{ type: 'accept' }`メッセージをストリームに送信する
+
+7. ゲームが開始すると、`started`イベントが流れてくる
+    * イベントの中身にはゲーム情報が含まれている
+
+8. 石を打つには、ストリームに`{ type: 'set', pos: <位置> }`を送信する(位置の計算方法は後述)
+
+9. 相手または自分が石を打つと、ストリームから`set`イベントが流れてくる
+    * `color`として石の色が含まれている
+    * `pos`として位置情報が含まれている
+
+## 位置の計算法
+8x8のマップを考える場合、各マスの位置(インデックスと呼びます)は次のようになっています:
+```
++--+--+--+--+--+--+--+--+
+| 0| 1| 2| 3| 4| 5| 6| 7|
++--+--+--+--+--+--+--+--+
+| 8| 9|10|11|12|13|14|15|
++--+--+--+--+--+--+--+--+
+|16|17|18|19|20|21|22|23|
+...
+```
+
+### X,Y座標 から インデックス に変換する
+```
+pos = x + (y * mapWidth)
+```
+`mapWidth`は、ゲーム情報の`map`から、次のようにして計算できます:
+```
+mapWidth = map[0].length
+```
+
+### インデックス から X,Y座標 に変換する
+```
+x = pos % mapWidth
+y = Math.floor(pos / mapWidth)
+```
+
+## マップ情報
+マップ情報は、ゲーム情報の`map`に入っています。 文字列の配列になっており、ひとつひとつの文字がマス情報を表しています。 それをもとにマップのデザインを知る事が出来ます:
+* `(スペース)` ... マス無し
+* `-` ... マス
+* `b` ... 初期配置される黒石
+* `w` ... 初期配置される白石
+
+例えば、4*4の次のような単純なマップがあるとします:
+```text
++---+---+---+---+
+|   |   |   |   |
++---+---+---+---+
+|   | ○ | ● |   |
++---+---+---+---+
+|   | ● | ○ |   |
++---+---+---+---+
+|   |   |   |   |
++---+---+---+---+
+```
+
+この場合、マップデータはこのようになります:
+```javascript
+['----', '-wb-', '-bw-', '----']
+```
+
+## ユーザーにフォームを提示して対話可能Botを作成する
+ユーザーとのコミュニケーションを行うため、ゲームの設定画面でユーザーにフォームを提示することができます。 例えば、Botの強さをユーザーが設定できるようにする、といったシナリオが考えられます。
+
+フォームを提示するには、`reversi-game`ストリームに次のメッセージを送信します:
+```javascript
+{
+  type: 'init-form',
+  body: [フォームコントロールの配列]
+}
+```
+
+フォームコントロールの配列については今から説明します。 フォームコントロールは、次のようなオブジェクトです:
+```javascript
+{
+  id: 'switch1',
+  type: 'switch',
+  label: 'Enable hoge',
+  value: false
+}
+```
+`id` ... コントロールのID。 `type` ... コントロールの種類。後述します。 `label` ... コントロールと一緒に表記するテキスト。 `value` ... コントロールのデフォルト値。
+
+### フォームの操作を受け取る
+ユーザーがフォームを操作すると、ストリームから`update-form`イベントが流れてきます。 イベントの中身には、コントロールのIDと、ユーザーが設定した値が含まれています。 例えば、上で示したスイッチをユーザーがオンにしたとすると、次のイベントが流れてきます:
+```javascript
+{
+  id: 'switch1',
+  value: true
+}
+```
+
+### フォームコントロールの種類
+#### スイッチ
+type: `switch` スイッチを表示します。何かの機能をオン/オフさせたい場合に有用です。
+
+##### プロパティ
+`label` ... スイッチに表記するテキスト。
+
+#### ラジオボタン
+type: `radio` ラジオボタンを表示します。選択肢を提示するのに有用です。例えば、Botの強さを設定させるなどです。
+
+##### プロパティ
+`items` ... ラジオボタンの選択肢。例:
+```javascript
+items: [{
+  label: '弱',
+  value: 1
+}, {
+  label: '中',
+  value: 2
+}, {
+  label: '強',
+  value: 3
+}]
+```
+
+#### スライダー
+type: `slider` スライダーを表示します。
+
+##### プロパティ
+`min` ... スライダーの下限。 `max` ... スライダーの上限。 `step` ... 入力欄で刻むステップ値。
+
+#### テキストボックス
+type: `textbox` テキストボックスを表示します。ユーザーになにか入力させる一般的な用途に利用できます。
+
+## ユーザーにメッセージを表示する
+設定画面でユーザーと対話する、フォーム以外のもうひとつの方法がこれです。ユーザーになにかメッセージを表示することができます。 例えば、ユーザーがBotの対応していないモードやマップを選択したとき、警告を表示するなどです。 メッセージを表示するには、次のメッセージをストリームに送信します:
+```javascript
+{
+  type: 'message',
+  body: {
+    text: 'メッセージ内容',
+    type: 'メッセージの種類'
+  }
+}
+```
+メッセージの種類: `success`, `info`, `warning`, `error`。
+
+## 投了する
+投了をするには、<a href="./api/endpoints/games/reversi/games/surrender">このエンドポイント</a>にリクエストします。

src/docs/ht-HT/stream.md

@@ -0,0 +1,354 @@
+# ストリーミングAPI
+
+ストリーミングAPIを使うと、リアルタイムで様々な情報(例えばタイムラインに新しい投稿が流れてきた、メッセージが届いた、フォローされた、など)を受け取ったり、様々な操作を行ったりすることができます。
+
+## ストリームに接続する
+
+ストリーミングAPIを利用するには、まずMisskeyサーバーに**websocket**接続する必要があります。
+
+以下のURLに、`i`というパラメータ名で認証情報を含めて、websocket接続してください。例:
+```
+%WS_URL%/streaming?i=xxxxxxxxxxxxxxx
+```
+
+認証情報は、自分のAPIキーや、アプリケーションからストリームに接続する際はユーザーのアクセストークンのことを指します。
+
+<div class="ui info">
+    <p><i class="fas fa-info-circle"></i> 認証情報の取得については、<a href="./api">こちらのドキュメント</a>をご確認ください。</p>
+</div>
+
+---
+
+認証情報は省略することもできますが、その場合非ログインでの利用ということになり、受信できる情報や可能な操作は限られます。例:
+
+```
+%WS_URL%/streaming
+```
+
+---
+
+ストリームに接続すると、後述するAPI操作や、投稿の購読を行ったりすることができます。 しかしまだこの段階では、例えばタイムラインへの新しい投稿を受信したりすることはできません。 それを行うには、ストリーム上で、後述する**チャンネル**に接続する必要があります。
+
+**ストリームでのやり取りはすべてJSONです。**
+
+## チャンネル
+MisskeyのストリーミングAPIにはチャンネルという概念があります。これは、送受信する情報を分離するための仕組みです。 Misskeyのストリームに接続しただけでは、まだリアルタイムでタイムラインの投稿を受信したりはできません。 ストリーム上でチャンネルに接続することで、様々な情報を受け取ったり情報を送信したりすることができるようになります。
+
+### チャンネルに接続する
+チャンネルに接続するには、次のようなデータをJSONでストリームに送信します:
+
+```json
+{
+    type: 'connect',
+    body: {
+        channel: 'xxxxxxxx',
+        id: 'foobar',
+        params: {
+            ...
+        }
+    }
+}
+```
+
+ここで、
+* `channel`には接続したいチャンネル名を設定します。チャンネルの種類については後述します。
+* `id`にはそのチャンネルとやり取りするための任意のIDを設定します。ストリームでは様々なメッセージが流れるので、そのメッセージがどのチャンネルからのものなのか識別する必要があるからです。このIDは、UUIDや、乱数のようなもので構いません。
+* `params`はチャンネルに接続する際のパラメータです。チャンネルによって接続時に必要とされるパラメータは異なります。パラメータ不要のチャンネルに接続する際は、このプロパティは省略可能です。
+
+<div class="ui info">
+    <p><i class="fas fa-info-circle"></i> IDはチャンネルごとではなく「チャンネルの接続ごと」です。なぜなら、同じチャンネルに異なるパラメータで複数接続するケースもあるからです。</p>
+</div>
+
+### チャンネルからのメッセージを受け取る
+例えばタイムラインのチャンネルなら、新しい投稿があった時にメッセージを発します。そのメッセージを受け取ることで、タイムラインに新しい投稿がされたことをリアルタイムで知ることができます。
+
+チャンネルがメッセージを発すると、次のようなデータがJSONでストリームに流れてきます:
+```json
+{
+    type: 'channel',
+    body: {
+        id: 'foobar',
+        type: 'something',
+        body: {
+            some: 'thing'
+        }
+    }
+}
+```
+
+ここで、
+* `id`には前述したそのチャンネルに接続する際に設定したIDが設定されています。これで、このメッセージがどのチャンネルからのものなのか知ることができます。
+* `type`にはメッセージの種類が設定されます。チャンネルによって、どのような種類のメッセージが流れてくるかは異なります。
+* `body`にはメッセージの内容が設定されます。チャンネルによって、どのような内容のメッセージが流れてくるかは異なります。
+
+### チャンネルに向けてメッセージを送信する
+チャンネルによっては、メッセージを受け取るだけでなく、こちらから何かメッセージを送信し、何らかの操作を行える場合があります。
+
+チャンネルにメッセージを送信するには、次のようなデータをJSONでストリームに送信します:
+```json
+{
+    type: 'channel',
+    body: {
+        id: 'foobar',
+        type: 'something',
+        body: {
+            some: 'thing'
+        }
+    }
+}
+```
+
+ここで、
+* `id`には前述したそのチャンネルに接続する際に設定したIDを設定します。これで、このメッセージがどのチャンネルに向けたものなのか識別させることができます。
+* `type`にはメッセージの種類を設定します。チャンネルによって、どのような種類のメッセージを受け付けるかは異なります。
+* `body`にはメッセージの内容を設定します。チャンネルによって、どのような内容のメッセージを受け付けるかは異なります。
+
+### チャンネルから切断する
+チャンネルから切断するには、次のようなデータをJSONでストリームに送信します:
+
+```json
+{
+    type: 'disconnect',
+    body: {
+        id: 'foobar'
+    }
+}
+```
+
+ここで、
+* `id`には前述したそのチャンネルに接続する際に設定したIDを設定します。
+
+## ストリームを経由してAPIリクエストする
+
+ストリームを経由してAPIリクエストすると、HTTPリクエストを発生させずにAPIを利用できます。そのため、コードを簡潔にできたり、パフォーマンスの向上を見込めるかもしれません。
+
+ストリームを経由してAPIリクエストするには、次のようなデータをJSONでストリームに送信します:
+```json
+{
+    type: 'api',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        endpoint: 'notes/create',
+        data: {
+            text: 'yee haw!'
+        }
+    }
+}
+```
+
+ここで、
+* `id`には、APIのレスポンスを識別するための、APIリクエストごとの一意なIDを設定する必要があります。UUIDや、簡単な乱数のようなもので構いません。
+* `endpoint`には、あなたがリクエストしたいAPIのエンドポイントを指定します。
+* `data`には、エンドポイントのパラメータを含めます。
+
+<div class="ui info">
+    <p><i class="fas fa-info-circle"></i> APIのエンドポイントやパラメータについてはAPIリファレンスをご確認ください。</p>
+</div>
+
+### レスポンスの受信
+
+APIへリクエストすると、レスポンスがストリームから次のような形式で流れてきます。
+
+```json
+{
+    type: 'api:xxxxxxxxxxxxxxxx',
+    body: {
+        ...
+    }
+}
+```
+
+ここで、
+* `xxxxxxxxxxxxxxxx`の部分には、リクエストの際に設定された`id`が含まれています。これにより、どのリクエストに対するレスポンスなのか判別することができます。
+* `body`には、レスポンスが含まれています。
+
+## 投稿のキャプチャ
+
+Misskeyは投稿のキャプチャと呼ばれる仕組みを提供しています。これは、指定した投稿のイベントをストリームで受け取る機能です。
+
+例えばタイムラインを取得してユーザーに表示したとします。ここで誰かがそのタイムラインに含まれるどれかの投稿に対してリアクションしたとします。
+
+しかし、クライアントからするとある投稿にリアクションが付いたことなどは知る由がないため、リアルタイムでリアクションをタイムライン上の投稿に反映して表示するといったことができません。
+
+この問題を解決するために、Misskeyは投稿のキャプチャ機構を用意しています。投稿をキャプチャすると、その投稿に関するイベントを受け取ることができるため、リアルタイムでリアクションを反映させたりすることが可能になります。
+
+### 投稿をキャプチャする
+
+投稿をキャプチャするには、ストリームに次のようなメッセージを送信します:
+
+```json
+{
+    type: 'subNote',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx'
+    }
+}
+```
+
+ここで、
+* `id`にキャプチャしたい投稿の`id`を設定します。
+
+このメッセージを送信すると、Misskeyにキャプチャを要請したことになり、以後、その投稿に関するイベントが流れてくるようになります。
+
+例えば投稿にリアクションが付いたとすると、次のようなメッセージが流れてきます:
+
+```json
+{
+    type: 'noteUpdated',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        type: 'reacted',
+        body: {
+            reaction: 'like',
+            userId: 'yyyyyyyyyyyyyyyy'
+        }
+    }
+}
+```
+
+ここで、
+* `body`内の`id`に、イベントを発生させた投稿のIDが設定されます。
+* `body`内の`type`に、イベントの種類が設定されます。
+* `body`内の`body`に、イベントの詳細が設定されます。
+
+#### イベントの種類
+
+##### `reacted`
+その投稿にリアクションがされた時に発生します。
+
+* `reaction`に、リアクションの種類が設定されます。
+* `userId`に、リアクションを行ったユーザーのIDが設定されます。
+
+例:
+```json
+{
+    type: 'noteUpdated',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        type: 'reacted',
+        body: {
+            reaction: 'like',
+            userId: 'yyyyyyyyyyyyyyyy'
+        }
+    }
+}
+```
+
+##### `deleted`
+その投稿が削除された時に発生します。
+
+* `deletedAt`に、削除日時が設定されます。
+
+例:
+```json
+{
+    type: 'noteUpdated',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        type: 'deleted',
+        body: {
+            deletedAt: '2018-10-22T02:17:09.703Z'
+        }
+    }
+}
+```
+
+##### `pollVoted`
+その投稿に添付されたアンケートに投票された時に発生します。
+
+* `choice`に、選択肢IDが設定されます。
+* `userId`に、投票を行ったユーザーのIDが設定されます。
+
+例:
+```json
+{
+    type: 'noteUpdated',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        type: 'pollVoted',
+        body: {
+            choice: 2,
+            userId: 'yyyyyyyyyyyyyyyy'
+        }
+    }
+}
+```
+
+### 投稿のキャプチャを解除する
+
+その投稿がもう画面に表示されなくなったりして、その投稿に関するイベントをもう受け取る必要がなくなったときは、キャプチャの解除を申請してください。
+
+次のメッセージを送信します:
+
+```json
+{
+    type: 'unsubNote',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx'
+    }
+}
+```
+
+ここで、
+* `id`にキャプチャを解除したい投稿の`id`を設定します。
+
+このメッセージを送信すると、以後、その投稿に関するイベントは流れてこないようになります。
+
+# チャンネル一覧
+## `main`
+アカウントに関する基本的な情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `renote`
+自分の投稿がRenoteされた時に発生するイベントです。自分自身の投稿をRenoteしたときは発生しません。
+
+#### `mention`
+誰かからメンションされたときに発生するイベントです。
+
+#### `readAllNotifications`
+自分宛ての通知がすべて既読になったことを表すイベントです。このイベントを利用して、「通知があることを示すアイコン」のようなものをオフにしたりする等のケースが想定されます。
+
+#### `meUpdated`
+自分の情報が更新されたことを表すイベントです。
+
+#### `follow`
+自分が誰かをフォローしたときに発生するイベントです。
+
+#### `unfollow`
+自分が誰かのフォローを解除したときに発生するイベントです。
+
+#### `followed`
+自分が誰かにフォローされたときに発生するイベントです。
+
+## `homeTimeline`
+ホームタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `note`
+タイムラインに新しい投稿が流れてきたときに発生するイベントです。
+
+## `localTimeline`
+ローカルタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `note`
+ローカルタイムラインに新しい投稿が流れてきたときに発生するイベントです。
+
+## `hybridTimeline`
+ソーシャルタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `note`
+ソーシャルタイムラインに新しい投稿が流れてきたときに発生するイベントです。
+
+## `globalTimeline`
+グローバルタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `note`
+グローバルタイムラインに新しい投稿が流れてきたときに発生するイベントです。

src/docs/ht-HT/theme.md

@@ -0,0 +1,68 @@
+# テーマ
+
+テーマを設定して、Misskeyクライアントの見た目を変更できます。
+
+## テーマの設定
+設定 > テーマ
+
+## テーマを作成する
+テーマコードはJSON5で記述されたテーマオブジェクトです。 テーマは以下のようなオブジェクトです。
+``` js
+{
+    id: '17587283-dd92-4a2c-a22c-be0637c9e22a',
+
+    name: 'Danboard',
+    author: 'syuilo',
+
+    base: 'light',
+
+    props: {
+        accent: 'rgb(218, 141, 49)',
+        bg: 'rgb(218, 212, 190)',
+        fg: 'rgb(115, 108, 92)',
+        panel: 'rgb(236, 232, 220)',
+        renote: 'rgb(100, 152, 106)',
+        link: 'rgb(100, 152, 106)',
+        mention: '@accent',
+        hashtag: 'rgb(100, 152, 106)',
+        header: 'rgba(239, 227, 213, 0.75)',
+        navBg: 'rgb(216, 206, 182)',
+        inputBorder: 'rgba(0, 0, 0, 0.1)',
+    },
+}
+
+```
+
+* `id` ... テーマの一意なID。UUIDをおすすめします。
+* `name` ... テーマ名
+* `author` ... テーマの作者
+* `desc` ... テーマの説明(オプション)
+* `base` ... 明るいテーマか、暗いテーマか
+    * `light`にすると明るいテーマになり、`dark`にすると暗いテーマになります。
+    * テーマはここで設定されたベーステーマを継承します。
+* `props` ... テーマのスタイル定義。これから説明します。
+
+### テーマのスタイル定義
+`props`下にはテーマのスタイルを定義します。 キーがCSSの変数名になり、バリューで中身を指定します。 なお、この`props`オブジェクトはベーステーマから継承されます。 ベーステーマは、このテーマの`base`が`light`なら[_light.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_light.json5)で、`dark`なら[_dark.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_dark.json5)です。 つまり、このテーマ内の`props`に`panel`というキーが無くても、そこにはベーステーマの`panel`があると見なされます。
+
+#### バリューで使える構文
+* 16進数で表された色
+    * 例: `#00ff00`
+* `rgb(r, g, b)`形式で表された色
+    * 例: `rgb(0, 255, 0)`
+* `rgb(r, g, b, a)`形式で表された透明度を含む色
+    * 例: `rgba(0, 255, 0, 0.5)`
+* 他のキーの値の参照
+    * `@{キー名}`と書くと他のキーの値の参照になります。`{キー名}`は参照したいキーの名前に置き換えます。
+    * 例: `@panel`
+* 定数(後述)の参照
+    * `${定数名}`と書くと定数の参照になります。`{定数名}`は参照したい定数の名前に置き換えます。
+    * 例: `$main`
+* 関数(後述)
+    * `:{関数名}<{引数}<{色}`
+
+#### 定数
+「CSS変数として出力はしたくないが、他のCSS変数の値として使いまわしたい」値があるときは、定数を使うと便利です。 キー名を`$`で始めると、そのキーはCSS変数として出力されません。
+
+#### 関数
+wip

src/docs/ht-HT/timelines.md

@@ -0,0 +1,15 @@
+# タイムラインの比較
+
+https://docs.google.com/spreadsheets/d/1lxQ2ugKrhz58Bg96HTDK_2F98BUritkMyIiBkOByjHA/edit?usp=sharing
+
+## ホーム
+自分のフォローしているユーザーの投稿
+
+## ローカル
+全てのローカルユーザーの「ホーム」指定されていない投稿
+
+## ソーシャル
+自分のフォローしているユーザーの投稿と、全てのローカルユーザーの「ホーム」指定されていない投稿
+
+## グローバル
+全てのローカルユーザーの「ホーム」指定されていない投稿と、サーバーに届いた全てのリモートユーザーの「ホーム」指定されていない投稿

src/docs/it-IT/aiscript.md

@@ -0,0 +1,4 @@
+# AiScript
+
+## 関数
+デフォルトで値渡しです。

src/docs/it-IT/api.md

@@ -0,0 +1,58 @@
+# Misskey API
+
+MisskeyAPIを使ってMisskeyクライアント、Misskey連携Webサービス、Bot等(以下「アプリケーション」と呼びます)を開発できます。 ストリーミングAPIもあるので、リアルタイム性のあるアプリケーションを作ることも可能です。
+
+APIを使い始めるには、まずアクセストークンを取得する必要があります。 このドキュメントでは、アクセストークンを取得する手順を説明した後、基本的なAPIの使い方を説明します。
+
+## アクセストークンの取得
+基本的に、APIはリクエストにはアクセストークンが必要となります。 APIにリクエストするのが自分自身なのか、不特定の利用者に使ってもらうアプリケーションなのかによって取得手順は異なります。
+
+* 前者の場合: [「自分自身のアクセストークンを手動発行する」](#自分自身のアクセストークンを手動発行する)に進む
+* 後者の場合: [「アプリケーション利用者にアクセストークンの発行をリクエストする」](#アプリケーション利用者にアクセストークンの発行をリクエストする)に進む
+
+### 自分自身のアクセストークンを手動発行する
+「設定 > API」で、自分のアクセストークンを発行できます。
+
+[「APIの使い方」へ進む](#APIの使い方)
+
+### アプリケーション利用者にアクセストークンの発行をリクエストする
+アプリケーション利用者のアクセストークンを取得するには、以下の手順で発行をリクエストします。
+
+#### Step 1
+
+UUIDを生成する。以後これをセッションIDと呼びます。
+
+> このセッションIDは毎回生成し、使いまわさないようにしてください。
+
+#### Step 2
+
+`{_URL_}/miauth/{session}`をユーザーのブラウザで表示させる。`{session}`の部分は、セッションIDに置き換えてください。
+> 例: `{_URL_}/miauth/c1f6d42b-468b-4fd2-8274-e58abdedef6f`
+
+表示する際、URLにクエリパラメータとしていくつかのオプションを設定できます:
+* `name` ... アプリケーション名
+    * > 例: `MissDeck`
+* `icon` ... アプリケーションのアイコン画像URL
+    * > 例: `https://missdeck.example.com/icon.png`
+* `callback` ... 認証が終わった後にリダイレクトするURL
+    * > 例: `https://missdeck.example.com/callback`
+    * リダイレクト時には、`session`というクエリパラメータでセッションIDが付きます
+* `permission` ... アプリケーションが要求する権限
+    * > 例: `write:notes,write:following,read:drive`
+    * 要求する権限を`,`で区切って列挙します
+    * どのような権限があるかは[APIリファレンス](/api-doc)で確認できます
+
+#### Step 3
+ユーザーが発行を許可した後、`{_URL_}/api/miauth/{session}/check`にPOSTリクエストすると、レスポンスとしてアクセストークンを含むJSONが返ります。
+
+レスポンスに含まれるプロパティ:
+* `token` ... ユーザーのアクセストークン
+* `user` ... ユーザーの情報
+
+[「APIの使い方」へ進む](#APIの使い方)
+
+## APIの使い方
+**APIはすべてPOSTで、リクエスト/レスポンスともにJSON形式です。RESTではありません。** アクセストークンは、`i`というパラメータ名でリクエストに含めます。
+
+* [APIリファレンス](/api-doc)
+* [ストリーミングAPI](./stream)

src/docs/it-IT/create-plugin.md

@@ -0,0 +1,74 @@
+# プラグインの作成
+Misskey Webクライアントのプラグイン機能を使うと、クライアントを拡張し、様々な機能を追加できます。 ここではプラグインの作成にあたってのメタデータ定義や、AiScript APIリファレンスを掲載します。
+
+## メタデータ
+プラグインは、AiScriptのメタデータ埋め込み機能を使って、デフォルトとしてプラグインのメタデータを定義する必要があります。 メタデータは次のプロパティを含むオブジェクトです。
+
+### name
+プラグイン名
+
+### author
+プラグイン作者
+
+### version
+プラグインバージョン。数値を指定してください。
+
+### description
+プラグインの説明
+
+### permissions
+プラグインが要求する権限。MisskeyAPIにリクエストする際に用いられます。
+
+### config
+プラグインの設定情報を表すオブジェクト。 キーに設定名、値に以下のプロパティを含めます。
+
+#### type
+設定値の種類を表す文字列。以下から選択します。 string number boolean
+
+#### label
+ユーザーに表示する設定名
+
+#### description
+設定の説明
+
+#### default
+設定のデフォルト値
+
+## APIリファレンス
+AiScript標準で組み込まれているAPIは掲載しません。
+
+### Mk:dialog(title text type)
+ダイアログを表示します。typeには以下の値が設定できます。 info success warn error question 省略すると info になります。
+
+### Mk:confirm(title text type)
+確認ダイアログを表示します。typeには以下の値が設定できます。 info success warn error question 省略すると question になります。 ユーザーが"OK"を選択した場合は true を、"キャンセル"を選択した場合は false が返ります。
+
+### Mk:api(endpoint params)
+Misskey APIにリクエストします。第一引数にエンドポイント名、第二引数にパラメータオブジェクトを渡します。
+
+### Mk:save(key value)
+任意の値に任意の名前を付けて永続化します。永続化した値は、AiScriptコンテキストが終了しても残り、Mk:loadで読み取ることができます。
+
+### Mk:load(key)
+Mk:saveで永続化した指定の名前の値を読み取ります。
+
+### Plugin:register_post_form_action(title fn)
+投稿フォームにアクションを追加します。第一引数にアクション名、第二引数にアクションが選択された際のコールバック関数を渡します。 コールバック関数には、第一引数に投稿フォームオブジェクトが渡されます。
+
+### Plugin:register_note_action(title fn)
+ノートメニューに項目を追加します。第一引数に項目名、第二引数に項目が選択された際のコールバック関数を渡します。 コールバック関数には、第一引数に対象のノートオブジェクトが渡されます。
+
+### Plugin:register_user_action(title fn)
+ユーザーメニューに項目を追加します。第一引数に項目名、第二引数に項目が選択された際のコールバック関数を渡します。 コールバック関数には、第一引数に対象のユーザーオブジェクトが渡されます。
+
+### Plugin:register_note_view_interruptor(fn)
+UIに表示されるノート情報を書き換えます。 コールバック関数には、第一引数に対象のノートオブジェクトが渡されます。 コールバック関数の返り値でノートが書き換えられます。
+
+### Plugin:register_note_post_interruptor(fn)
+ノート投稿時にノート情報を書き換えます。 コールバック関数には、第一引数に対象のノートオブジェクトが渡されます。 コールバック関数の返り値でノートが書き換えられます。
+
+### Plugin:open_url(url)
+第一引数に渡されたURLをブラウザの新しいタブで開きます。
+
+### Plugin:config
+プラグインの設定が格納されるオブジェクト。プラグイン定義のconfigで設定したキーで値が入ります。

src/docs/it-IT/custom-emoji.md

@@ -0,0 +1,2 @@
+# カスタム絵文字
+カスタム絵文字は、インスタンスで用意された画像を絵文字のように使える機能です。 ノート、リアクション、チャット、自己紹介、名前などの場所で使うことができます。 カスタム絵文字をそれらの場所で使うには、絵文字ピッカーボタン(ある場合)を押すか、`:`を入力して絵文字サジェストを表示します。 テキスト内に`:foo:`のような形式の文字列が見つかると、`foo`の部分がカスタム絵文字名と解釈され、表示時には対応したカスタム絵文字に置き換わります。

src/docs/it-IT/deck.md

@@ -0,0 +1,18 @@
+# デッキ
+
+デッキは利用可能なUIのひとつです。「カラム」と呼ばれるビューを複数並べて表示させることで、カスタマイズ性が高く、情報量の多いUIが構築できることが特徴です。
+
+## カラムの追加
+デッキの背景を右クリックし、「カラムを追加」して任意のカラムを追加できます。
+
+## カラムの移動
+カラムは、ドラッグアンドドロップで他のカラムと位置を入れ替えることが出来るほか、カラムメニュー(カラムのヘッダー右クリック)から位置を移動させることもできます。
+
+## カラムの水平分割
+カラムは左右だけでなく、上下に並べることもできます。 カラムメニューを開き、「左に重ねる」を選択すると、左のカラムの下に現在のカラムが移動します。 上下分割を解除するには、カラムメニューの「右に出す」を選択します。
+
+## カラムの設定
+カラムメニューの「編集」を選択するとカラムの設定を編集できます。カラムの名前を変えたり、幅を変えたりできます。
+
+## デッキの設定
+デッキに関する設定は、[settings/deck](/settings/deck)で行えます。

src/docs/it-IT/follow.md

@@ -0,0 +1,2 @@
+# フォロー
+ユーザーをフォローすると、タイムラインにそのユーザーの投稿が表示されるようになります。ただし、他のユーザーに対する返信は含まれません。 ユーザーをフォローするには、ユーザーページの「フォロー」ボタンをクリックします。フォローを解除するには、もう一度クリックします。

src/docs/it-IT/keyboard-shortcut.md

@@ -0,0 +1,68 @@
+# キーボードショートカット
+
+## グローバル
+これらのショートカットは基本的にどこでも使えます。
+<table>
+    <thead>
+        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+    </thead>
+    <tbody>
+        <tr><td><kbd class="key">P</kbd>, <kbd class="key">N</kbd></td><td>新規投稿</td><td><b>P</b>ost, <b>N</b>ew, <b>N</b>ote</td></tr>
+        <tr><td><kbd class="key">T</kbd></td><td>タイムラインの最も新しい投稿にフォーカス</td><td><b>T</b>imeline, <b>T</b>op</td></tr>
+        <tr><td><kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">N</kbd></kbd></td><td>通知を表示/隠す</td><td><b>N</b>otifications</td></tr>
+        <tr><td><kbd class="key">S</kbd></td><td>検索</td><td><b>S</b>earch</td></tr>
+        <tr><td><kbd class="key">H</kbd>, <kbd class="key">?</kbd></td><td>ヘルプを表示</td><td><b>H</b>elp</td></tr>
+    </tbody>
+</table>
+
+## 投稿にフォーカスされた状態
+
+<table>
+    <thead>
+        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+    </thead>
+    <tbody>
+        <tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>上の投稿にフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd>, <kbd class="key">Tab</kbd></td><td>下の投稿にフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">R</kbd></td><td>返信フォームを開く</td><td><b>R</b>eply</td></tr>
+        <tr><td><kbd class="key">Q</kbd></td><td>Renoteフォームを開く</td><td><b>Q</b>uote</td></tr>
+        <tr><td><kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">Q</kbd></kbd></td><td>即刻Renoteする(フォームを開かずに)</td><td>-</td></tr>
+        <tr><td><kbd class="key">E</kbd>, <kbd class="key">A</kbd>, <kbd class="key">+</kbd></td><td>リアクションフォームを開く</td><td><b>E</b>mote, re<b>A</b>ction</td></tr>
+        <tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションをする(対応については後述)</td><td>-</td></tr>
+        <tr><td><kbd class="key">F</kbd>, <kbd class="key">B</kbd></td><td>お気に入りに登録</td><td><b>F</b>avorite, <b>B</b>ookmark</td></tr>
+        <tr><td><kbd class="key">Del</kbd>, <kbd class="group"><kbd class="key">Ctrl</kbd> + <kbd class="key">D</kbd></kbd></td><td>投稿を削除</td><td><b>D</b>elete</tr>
+        <tr><td><kbd class="key">M</kbd>, <kbd class="key">O</kbd></td><td>投稿に対するメニューを開く</td><td><b>M</b>ore, <b>O</b>ther</td></tr>
+        <tr><td><kbd class="key">S</kbd></td><td>CWで隠された部分を表示 or 隠す</td><td><b>S</b>how, <b>S</b>ee</td></tr>
+        <tr><td><kbd class="key">Esc</kbd></td><td>フォーカスを外す</td><td>-</td></tr>
+    </tbody>
+</table>
+
+## Renoteフォーム
+
+<table>
+    <thead>
+        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+    </thead>
+    <tbody>
+        <tr><td><kbd class="key">Enter</kbd></td><td>Renoteする</td><td>-</td></tr>
+        <tr><td><kbd class="key">Q</kbd></td><td>フォームを展開する</td><td><b>Q</b>uote</td></tr>
+        <tr><td><kbd class="key">Esc</kbd></td><td>フォームを閉じる</td><td>-</td></tr>
+    </tbody>
+</table>
+
+## リアクションフォーム
+デフォルトで「👍」にフォーカスが当たっている状態です。
+<table>
+    <thead>
+        <tr><th>ショートカット</th><th>効果</th><th>由来</th></tr>
+    </thead>
+    <tbody>
+        <tr><td><kbd class="key">↑</kbd>, <kbd class="key">K</kbd></td><td>上のリアクションにフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">↓</kbd>, <kbd class="key">J</kbd></td><td>下のリアクションにフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">←</kbd>, <kbd class="key">H</kbd>, <kbd class="group"><kbd class="key">Shift</kbd> + <kbd class="key">Tab</kbd></kbd></td><td>左のリアクションにフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">→</kbd>, <kbd class="key">L</kbd>, <kbd class="key">Tab</kbd></td><td>右のリアクションにフォーカスを移動</td><td>-</td></tr>
+        <tr><td><kbd class="key">Enter</kbd>, <kbd class="key">Space</kbd>, <kbd class="key">+</kbd></td><td>リアクション確定</td><td>-</td></tr>
+        <tr><td><kbd class="key">0</kbd>~<kbd class="key">9</kbd></td><td>数字に対応したリアクションで確定</td><td>-</td></tr>
+        <tr><td><kbd class="key">Esc</kbd></td><td>リアクションするのをやめる</td><td>-</td></tr>
+    </tbody>
+</table>

src/docs/it-IT/mfm.md

@@ -0,0 +1,2 @@
+# MFM
+MFMは、Misskey Flavored Markdownの略で、Misskeyの様々な場所で使用できる専用のマークアップ言語です。 MFMで使用可能な構文は[MFMチートシート](/mfm-cheat-sheet)で確認できます。

src/docs/it-IT/mute.md

@@ -0,0 +1,13 @@
+# ミュート
+
+ユーザーをミュートすると、そのユーザーに関する次のコンテンツがMisskeyに表示されなくなります:
+
+* タイムラインや投稿の検索結果内の、そのユーザーの投稿(およびそれらの投稿に対する返信やRenote)
+* そのユーザーからの通知
+* メッセージ履歴一覧内の、そのユーザーとのメッセージ履歴
+
+ユーザーをミュートするには、対象のユーザーのユーザーページに表示されている「ミュート」ボタンを押します。
+
+ミュートを行ったことは相手に通知されず、ミュートされていることを知ることもできません。
+
+設定>ミュート から、自分がミュートしているユーザー一覧を確認することができます。

src/docs/it-IT/pages.md

@@ -0,0 +1,10 @@
+# Pages
+
+## 変数
+変数を使うことで動的なページを作成できます。テキスト内で <b>{ 変数名 }</b> と書くとそこに変数の値を埋め込めます。例えば <b>Hello { thing } world!</b> というテキストで、変数(thing)の値が <b>ai</b> だった場合、テキストは <b>Hello ai world!</b> になります。
+
+変数の評価(値を算出すること)は上から下に行われるので、ある変数の中で自分より下の変数を参照することはできません。例えば上から <b>A、B、C</b> と3つの変数を定義したとき、<b>C</b>の中で<b>A</b>や<b>B</b>を参照することはできますが、<b>A</b>の中で<b>B</b>や<b>C</b>を参照することはできません。
+
+ユーザーからの入力を受け取るには、ページに「ユーザー入力」ブロックを設置し、「変数名」に入力を格納したい変数名を設定します(変数は自動で作成されます)。その変数を使ってユーザー入力に応じた動作を行えます。
+
+関数を使うと、値の算出処理を再利用可能な形にまとめることができます。関数を作るには、「関数」タイプの変数を作成します。関数にはスロット(引数)を設定することができ、スロットの値は関数内で変数として利用可能です。また、関数を引数に取る関数(高階関数と呼ばれます)も存在します。関数は予め定義しておくほかに、このような高階関数のスロットに即席でセットすることもできます。

src/docs/it-IT/reaction.md

@@ -0,0 +1,11 @@
+# リアクション
+他の人のノートに、絵文字を付けて簡単にあなたの反応を伝えられる機能です。 リアクションするには、ノートの + アイコンをクリックしてピッカーを表示し、絵文字を選択します。 リアクションには[カスタム絵文字](./custom-emoji)も使用できます。
+
+## リアクションピッカーのカスタマイズ
+ピッカーに表示される絵文字を自分好みにカスタマイズすることができます。 設定の「リアクション」で設定します。
+
+## リモート投稿へのリアクションについて
+リアクションはMisskeyオリジナルの機能であるため、リモートインスタンスがMisskeyでない限りは、ほとんどの場合「Like」としてアクティビティが送信されます。一般的にはLikeは「お気に入り」として実装されているようです。 また、相手がMisskeyであったとしても、カスタム絵文字リアクションは伝わらず、自動的に「👍」等にフォールバックされます。
+
+## リモートからのリアクションについて
+リモートから「Like」アクティビティを受信したとき、Misskeyでは「👍」のリアクションとして解釈されます。

src/docs/it-IT/reversi-bot.md

@@ -0,0 +1,160 @@
+# MisskeyリバーシBotの開発
+Misskeyのリバーシ機能に対応したBotの開発方法をここに記します。
+
+1. `games/reversi`ストリームに以下のパラメータを付けて接続する:
+    * `i`: botアカウントのAPIキー
+
+2. 対局への招待が来たら、ストリームから`invited`イベントが流れてくる
+    * イベントの中身に、`parent`という名前で対局へ誘ってきたユーザーの情報が含まれている
+
+3. `games/reversi/match`へ、`user_id`として`parent`の`id`が含まれたリクエストを送信する
+
+4. 上手くいくとゲーム情報が返ってくるので、`games/reversi-game`ストリームへ、以下のパラメータを付けて接続する:
+    * `i`: botアカウントのAPIキー
+    * `game`: `game`の`id`
+
+5. この間、相手がゲームの設定を変更するとその都度`update-settings`イベントが流れてくるので、必要であれば何かしらの処理を行う
+
+6. 設定に満足したら、`{ type: 'accept' }`メッセージをストリームに送信する
+
+7. ゲームが開始すると、`started`イベントが流れてくる
+    * イベントの中身にはゲーム情報が含まれている
+
+8. 石を打つには、ストリームに`{ type: 'set', pos: <位置> }`を送信する(位置の計算方法は後述)
+
+9. 相手または自分が石を打つと、ストリームから`set`イベントが流れてくる
+    * `color`として石の色が含まれている
+    * `pos`として位置情報が含まれている
+
+## 位置の計算法
+8x8のマップを考える場合、各マスの位置(インデックスと呼びます)は次のようになっています:
+```
++--+--+--+--+--+--+--+--+
+| 0| 1| 2| 3| 4| 5| 6| 7|
++--+--+--+--+--+--+--+--+
+| 8| 9|10|11|12|13|14|15|
++--+--+--+--+--+--+--+--+
+|16|17|18|19|20|21|22|23|
+...
+```
+
+### X,Y座標 から インデックス に変換する
+```
+pos = x + (y * mapWidth)
+```
+`mapWidth`は、ゲーム情報の`map`から、次のようにして計算できます:
+```
+mapWidth = map[0].length
+```
+
+### インデックス から X,Y座標 に変換する
+```
+x = pos % mapWidth
+y = Math.floor(pos / mapWidth)
+```
+
+## マップ情報
+マップ情報は、ゲーム情報の`map`に入っています。 文字列の配列になっており、ひとつひとつの文字がマス情報を表しています。 それをもとにマップのデザインを知る事が出来ます:
+* `(スペース)` ... マス無し
+* `-` ... マス
+* `b` ... 初期配置される黒石
+* `w` ... 初期配置される白石
+
+例えば、4*4の次のような単純なマップがあるとします:
+```text
++---+---+---+---+
+|   |   |   |   |
++---+---+---+---+
+|   | ○ | ● |   |
++---+---+---+---+
+|   | ● | ○ |   |
++---+---+---+---+
+|   |   |   |   |
++---+---+---+---+
+```
+
+この場合、マップデータはこのようになります:
+```javascript
+['----', '-wb-', '-bw-', '----']
+```
+
+## ユーザーにフォームを提示して対話可能Botを作成する
+ユーザーとのコミュニケーションを行うため、ゲームの設定画面でユーザーにフォームを提示することができます。 例えば、Botの強さをユーザーが設定できるようにする、といったシナリオが考えられます。
+
+フォームを提示するには、`reversi-game`ストリームに次のメッセージを送信します:
+```javascript
+{
+  type: 'init-form',
+  body: [フォームコントロールの配列]
+}
+```
+
+フォームコントロールの配列については今から説明します。 フォームコントロールは、次のようなオブジェクトです:
+```javascript
+{
+  id: 'switch1',
+  type: 'switch',
+  label: 'Enable hoge',
+  value: false
+}
+```
+`id` ... コントロールのID。 `type` ... コントロールの種類。後述します。 `label` ... コントロールと一緒に表記するテキスト。 `value` ... コントロールのデフォルト値。
+
+### フォームの操作を受け取る
+ユーザーがフォームを操作すると、ストリームから`update-form`イベントが流れてきます。 イベントの中身には、コントロールのIDと、ユーザーが設定した値が含まれています。 例えば、上で示したスイッチをユーザーがオンにしたとすると、次のイベントが流れてきます:
+```javascript
+{
+  id: 'switch1',
+  value: true
+}
+```
+
+### フォームコントロールの種類
+#### スイッチ
+type: `switch` スイッチを表示します。何かの機能をオン/オフさせたい場合に有用です。
+
+##### プロパティ
+`label` ... スイッチに表記するテキスト。
+
+#### ラジオボタン
+type: `radio` ラジオボタンを表示します。選択肢を提示するのに有用です。例えば、Botの強さを設定させるなどです。
+
+##### プロパティ
+`items` ... ラジオボタンの選択肢。例:
+```javascript
+items: [{
+  label: '弱',
+  value: 1
+}, {
+  label: '中',
+  value: 2
+}, {
+  label: '強',
+  value: 3
+}]
+```
+
+#### スライダー
+type: `slider` スライダーを表示します。
+
+##### プロパティ
+`min` ... スライダーの下限。 `max` ... スライダーの上限。 `step` ... 入力欄で刻むステップ値。
+
+#### テキストボックス
+type: `textbox` テキストボックスを表示します。ユーザーになにか入力させる一般的な用途に利用できます。
+
+## ユーザーにメッセージを表示する
+設定画面でユーザーと対話する、フォーム以外のもうひとつの方法がこれです。ユーザーになにかメッセージを表示することができます。 例えば、ユーザーがBotの対応していないモードやマップを選択したとき、警告を表示するなどです。 メッセージを表示するには、次のメッセージをストリームに送信します:
+```javascript
+{
+  type: 'message',
+  body: {
+    text: 'メッセージ内容',
+    type: 'メッセージの種類'
+  }
+}
+```
+メッセージの種類: `success`, `info`, `warning`, `error`。
+
+## 投了する
+投了をするには、<a href="./api/endpoints/games/reversi/games/surrender">このエンドポイント</a>にリクエストします。

src/docs/it-IT/stream.md

@@ -0,0 +1,354 @@
+# ストリーミングAPI
+
+ストリーミングAPIを使うと、リアルタイムで様々な情報(例えばタイムラインに新しい投稿が流れてきた、メッセージが届いた、フォローされた、など)を受け取ったり、様々な操作を行ったりすることができます。
+
+## ストリームに接続する
+
+ストリーミングAPIを利用するには、まずMisskeyサーバーに**websocket**接続する必要があります。
+
+以下のURLに、`i`というパラメータ名で認証情報を含めて、websocket接続してください。例:
+```
+%WS_URL%/streaming?i=xxxxxxxxxxxxxxx
+```
+
+認証情報は、自分のAPIキーや、アプリケーションからストリームに接続する際はユーザーのアクセストークンのことを指します。
+
+<div class="ui info">
+    <p><i class="fas fa-info-circle"></i> 認証情報の取得については、<a href="./api">こちらのドキュメント</a>をご確認ください。</p>
+</div>
+
+---
+
+認証情報は省略することもできますが、その場合非ログインでの利用ということになり、受信できる情報や可能な操作は限られます。例:
+
+```
+%WS_URL%/streaming
+```
+
+---
+
+ストリームに接続すると、後述するAPI操作や、投稿の購読を行ったりすることができます。 しかしまだこの段階では、例えばタイムラインへの新しい投稿を受信したりすることはできません。 それを行うには、ストリーム上で、後述する**チャンネル**に接続する必要があります。
+
+**ストリームでのやり取りはすべてJSONです。**
+
+## チャンネル
+MisskeyのストリーミングAPIにはチャンネルという概念があります。これは、送受信する情報を分離するための仕組みです。 Misskeyのストリームに接続しただけでは、まだリアルタイムでタイムラインの投稿を受信したりはできません。 ストリーム上でチャンネルに接続することで、様々な情報を受け取ったり情報を送信したりすることができるようになります。
+
+### チャンネルに接続する
+チャンネルに接続するには、次のようなデータをJSONでストリームに送信します:
+
+```json
+{
+    type: 'connect',
+    body: {
+        channel: 'xxxxxxxx',
+        id: 'foobar',
+        params: {
+            ...
+        }
+    }
+}
+```
+
+ここで、
+* `channel`には接続したいチャンネル名を設定します。チャンネルの種類については後述します。
+* `id`にはそのチャンネルとやり取りするための任意のIDを設定します。ストリームでは様々なメッセージが流れるので、そのメッセージがどのチャンネルからのものなのか識別する必要があるからです。このIDは、UUIDや、乱数のようなもので構いません。
+* `params`はチャンネルに接続する際のパラメータです。チャンネルによって接続時に必要とされるパラメータは異なります。パラメータ不要のチャンネルに接続する際は、このプロパティは省略可能です。
+
+<div class="ui info">
+    <p><i class="fas fa-info-circle"></i> IDはチャンネルごとではなく「チャンネルの接続ごと」です。なぜなら、同じチャンネルに異なるパラメータで複数接続するケースもあるからです。</p>
+</div>
+
+### チャンネルからのメッセージを受け取る
+例えばタイムラインのチャンネルなら、新しい投稿があった時にメッセージを発します。そのメッセージを受け取ることで、タイムラインに新しい投稿がされたことをリアルタイムで知ることができます。
+
+チャンネルがメッセージを発すると、次のようなデータがJSONでストリームに流れてきます:
+```json
+{
+    type: 'channel',
+    body: {
+        id: 'foobar',
+        type: 'something',
+        body: {
+            some: 'thing'
+        }
+    }
+}
+```
+
+ここで、
+* `id`には前述したそのチャンネルに接続する際に設定したIDが設定されています。これで、このメッセージがどのチャンネルからのものなのか知ることができます。
+* `type`にはメッセージの種類が設定されます。チャンネルによって、どのような種類のメッセージが流れてくるかは異なります。
+* `body`にはメッセージの内容が設定されます。チャンネルによって、どのような内容のメッセージが流れてくるかは異なります。
+
+### チャンネルに向けてメッセージを送信する
+チャンネルによっては、メッセージを受け取るだけでなく、こちらから何かメッセージを送信し、何らかの操作を行える場合があります。
+
+チャンネルにメッセージを送信するには、次のようなデータをJSONでストリームに送信します:
+```json
+{
+    type: 'channel',
+    body: {
+        id: 'foobar',
+        type: 'something',
+        body: {
+            some: 'thing'
+        }
+    }
+}
+```
+
+ここで、
+* `id`には前述したそのチャンネルに接続する際に設定したIDを設定します。これで、このメッセージがどのチャンネルに向けたものなのか識別させることができます。
+* `type`にはメッセージの種類を設定します。チャンネルによって、どのような種類のメッセージを受け付けるかは異なります。
+* `body`にはメッセージの内容を設定します。チャンネルによって、どのような内容のメッセージを受け付けるかは異なります。
+
+### チャンネルから切断する
+チャンネルから切断するには、次のようなデータをJSONでストリームに送信します:
+
+```json
+{
+    type: 'disconnect',
+    body: {
+        id: 'foobar'
+    }
+}
+```
+
+ここで、
+* `id`には前述したそのチャンネルに接続する際に設定したIDを設定します。
+
+## ストリームを経由してAPIリクエストする
+
+ストリームを経由してAPIリクエストすると、HTTPリクエストを発生させずにAPIを利用できます。そのため、コードを簡潔にできたり、パフォーマンスの向上を見込めるかもしれません。
+
+ストリームを経由してAPIリクエストするには、次のようなデータをJSONでストリームに送信します:
+```json
+{
+    type: 'api',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        endpoint: 'notes/create',
+        data: {
+            text: 'yee haw!'
+        }
+    }
+}
+```
+
+ここで、
+* `id`には、APIのレスポンスを識別するための、APIリクエストごとの一意なIDを設定する必要があります。UUIDや、簡単な乱数のようなもので構いません。
+* `endpoint`には、あなたがリクエストしたいAPIのエンドポイントを指定します。
+* `data`には、エンドポイントのパラメータを含めます。
+
+<div class="ui info">
+    <p><i class="fas fa-info-circle"></i> APIのエンドポイントやパラメータについてはAPIリファレンスをご確認ください。</p>
+</div>
+
+### レスポンスの受信
+
+APIへリクエストすると、レスポンスがストリームから次のような形式で流れてきます。
+
+```json
+{
+    type: 'api:xxxxxxxxxxxxxxxx',
+    body: {
+        ...
+    }
+}
+```
+
+ここで、
+* `xxxxxxxxxxxxxxxx`の部分には、リクエストの際に設定された`id`が含まれています。これにより、どのリクエストに対するレスポンスなのか判別することができます。
+* `body`には、レスポンスが含まれています。
+
+## 投稿のキャプチャ
+
+Misskeyは投稿のキャプチャと呼ばれる仕組みを提供しています。これは、指定した投稿のイベントをストリームで受け取る機能です。
+
+例えばタイムラインを取得してユーザーに表示したとします。ここで誰かがそのタイムラインに含まれるどれかの投稿に対してリアクションしたとします。
+
+しかし、クライアントからするとある投稿にリアクションが付いたことなどは知る由がないため、リアルタイムでリアクションをタイムライン上の投稿に反映して表示するといったことができません。
+
+この問題を解決するために、Misskeyは投稿のキャプチャ機構を用意しています。投稿をキャプチャすると、その投稿に関するイベントを受け取ることができるため、リアルタイムでリアクションを反映させたりすることが可能になります。
+
+### 投稿をキャプチャする
+
+投稿をキャプチャするには、ストリームに次のようなメッセージを送信します:
+
+```json
+{
+    type: 'subNote',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx'
+    }
+}
+```
+
+ここで、
+* `id`にキャプチャしたい投稿の`id`を設定します。
+
+このメッセージを送信すると、Misskeyにキャプチャを要請したことになり、以後、その投稿に関するイベントが流れてくるようになります。
+
+例えば投稿にリアクションが付いたとすると、次のようなメッセージが流れてきます:
+
+```json
+{
+    type: 'noteUpdated',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        type: 'reacted',
+        body: {
+            reaction: 'like',
+            userId: 'yyyyyyyyyyyyyyyy'
+        }
+    }
+}
+```
+
+ここで、
+* `body`内の`id`に、イベントを発生させた投稿のIDが設定されます。
+* `body`内の`type`に、イベントの種類が設定されます。
+* `body`内の`body`に、イベントの詳細が設定されます。
+
+#### イベントの種類
+
+##### `reacted`
+その投稿にリアクションがされた時に発生します。
+
+* `reaction`に、リアクションの種類が設定されます。
+* `userId`に、リアクションを行ったユーザーのIDが設定されます。
+
+例:
+```json
+{
+    type: 'noteUpdated',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        type: 'reacted',
+        body: {
+            reaction: 'like',
+            userId: 'yyyyyyyyyyyyyyyy'
+        }
+    }
+}
+```
+
+##### `deleted`
+その投稿が削除された時に発生します。
+
+* `deletedAt`に、削除日時が設定されます。
+
+例:
+```json
+{
+    type: 'noteUpdated',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        type: 'deleted',
+        body: {
+            deletedAt: '2018-10-22T02:17:09.703Z'
+        }
+    }
+}
+```
+
+##### `pollVoted`
+その投稿に添付されたアンケートに投票された時に発生します。
+
+* `choice`に、選択肢IDが設定されます。
+* `userId`に、投票を行ったユーザーのIDが設定されます。
+
+例:
+```json
+{
+    type: 'noteUpdated',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx',
+        type: 'pollVoted',
+        body: {
+            choice: 2,
+            userId: 'yyyyyyyyyyyyyyyy'
+        }
+    }
+}
+```
+
+### 投稿のキャプチャを解除する
+
+その投稿がもう画面に表示されなくなったりして、その投稿に関するイベントをもう受け取る必要がなくなったときは、キャプチャの解除を申請してください。
+
+次のメッセージを送信します:
+
+```json
+{
+    type: 'unsubNote',
+    body: {
+        id: 'xxxxxxxxxxxxxxxx'
+    }
+}
+```
+
+ここで、
+* `id`にキャプチャを解除したい投稿の`id`を設定します。
+
+このメッセージを送信すると、以後、その投稿に関するイベントは流れてこないようになります。
+
+# チャンネル一覧
+## `main`
+アカウントに関する基本的な情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `renote`
+自分の投稿がRenoteされた時に発生するイベントです。自分自身の投稿をRenoteしたときは発生しません。
+
+#### `mention`
+誰かからメンションされたときに発生するイベントです。
+
+#### `readAllNotifications`
+自分宛ての通知がすべて既読になったことを表すイベントです。このイベントを利用して、「通知があることを示すアイコン」のようなものをオフにしたりする等のケースが想定されます。
+
+#### `meUpdated`
+自分の情報が更新されたことを表すイベントです。
+
+#### `follow`
+自分が誰かをフォローしたときに発生するイベントです。
+
+#### `unfollow`
+自分が誰かのフォローを解除したときに発生するイベントです。
+
+#### `followed`
+自分が誰かにフォローされたときに発生するイベントです。
+
+## `homeTimeline`
+ホームタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `note`
+タイムラインに新しい投稿が流れてきたときに発生するイベントです。
+
+## `localTimeline`
+ローカルタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `note`
+ローカルタイムラインに新しい投稿が流れてきたときに発生するイベントです。
+
+## `hybridTimeline`
+ソーシャルタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `note`
+ソーシャルタイムラインに新しい投稿が流れてきたときに発生するイベントです。
+
+## `globalTimeline`
+グローバルタイムラインの投稿情報が流れてきます。このチャンネルにパラメータはありません。
+
+### 流れてくるイベント一覧
+
+#### `note`
+グローバルタイムラインに新しい投稿が流れてきたときに発生するイベントです。

src/docs/it-IT/theme.md

@@ -0,0 +1,68 @@
+# テーマ
+
+テーマを設定して、Misskeyクライアントの見た目を変更できます。
+
+## テーマの設定
+設定 > テーマ
+
+## テーマを作成する
+テーマコードはJSON5で記述されたテーマオブジェクトです。 テーマは以下のようなオブジェクトです。
+``` js
+{
+    id: '17587283-dd92-4a2c-a22c-be0637c9e22a',
+
+    name: 'Danboard',
+    author: 'syuilo',
+
+    base: 'light',
+
+    props: {
+        accent: 'rgb(218, 141, 49)',
+        bg: 'rgb(218, 212, 190)',
+        fg: 'rgb(115, 108, 92)',
+        panel: 'rgb(236, 232, 220)',
+        renote: 'rgb(100, 152, 106)',
+        link: 'rgb(100, 152, 106)',
+        mention: '@accent',
+        hashtag: 'rgb(100, 152, 106)',
+        header: 'rgba(239, 227, 213, 0.75)',
+        navBg: 'rgb(216, 206, 182)',
+        inputBorder: 'rgba(0, 0, 0, 0.1)',
+    },
+}
+
+```
+
+* `id` ... テーマの一意なID。UUIDをおすすめします。
+* `name` ... テーマ名
+* `author` ... テーマの作者
+* `desc` ... テーマの説明(オプション)
+* `base` ... 明るいテーマか、暗いテーマか
+    * `light`にすると明るいテーマになり、`dark`にすると暗いテーマになります。
+    * テーマはここで設定されたベーステーマを継承します。
+* `props` ... テーマのスタイル定義。これから説明します。
+
+### テーマのスタイル定義
+`props`下にはテーマのスタイルを定義します。 キーがCSSの変数名になり、バリューで中身を指定します。 なお、この`props`オブジェクトはベーステーマから継承されます。 ベーステーマは、このテーマの`base`が`light`なら[_light.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_light.json5)で、`dark`なら[_dark.json5](https://github.com/syuilo/misskey/blob/develop/src/client/themes/_dark.json5)です。 つまり、このテーマ内の`props`に`panel`というキーが無くても、そこにはベーステーマの`panel`があると見なされます。
+
+#### バリューで使える構文
+* 16進数で表された色
+    * 例: `#00ff00`
+* `rgb(r, g, b)`形式で表された色
+    * 例: `rgb(0, 255, 0)`
+* `rgb(r, g, b, a)`形式で表された透明度を含む色
+    * 例: `rgba(0, 255, 0, 0.5)`
+* 他のキーの値の参照
+    * `@{キー名}`と書くと他のキーの値の参照になります。`{キー名}`は参照したいキーの名前に置き換えます。
+    * 例: `@panel`
+* 定数(後述)の参照
+    * `${定数名}`と書くと定数の参照になります。`{定数名}`は参照したい定数の名前に置き換えます。
+    * 例: `$main`
+* 関数(後述)
+    * `:{関数名}<{引数}<{色}`
+
+#### 定数
+「CSS変数として出力はしたくないが、他のCSS変数の値として使いまわしたい」値があるときは、定数を使うと便利です。 キー名を`$`で始めると、そのキーはCSS変数として出力されません。
+
+#### 関数
+wip

src/docs/it-IT/timelines.md

@@ -0,0 +1,15 @@
+# タイムラインの比較
+
+https://docs.google.com/spreadsheets/d/1lxQ2ugKrhz58Bg96HTDK_2F98BUritkMyIiBkOByjHA/edit?usp=sharing
+
+## ホーム
+自分のフォローしているユーザーの投稿
+
+## ローカル
+全てのローカルユーザーの「ホーム」指定されていない投稿
+
+## ソーシャル
+自分のフォローしているユーザーの投稿と、全てのローカルユーザーの「ホーム」指定されていない投稿
+
+## グローバル
+全てのローカルユーザーの「ホーム」指定されていない投稿と、サーバーに届いた全てのリモートユーザーの「ホーム」指定されていない投稿

src/docs/zh-CN/deck.md

@@ -1,18 +1,18 @@
 # Deck
 
-デッキは利用可能なUIのひとつです。「カラム」と呼ばれるビューを複数並べて表示させることで、カスタマイズ性が高く、情報量の多いUIが構築できることが特徴です。
+卡片是一种可用的用户界面。它的特点是能够通过并排显示多个视图（称为 "列"）来构建高度可定制和信息丰富的用户界面。
 
-## カラムの追加
-デッキの背景を右クリックし、「カラムを追加」して任意のカラムを追加できます。
+## 列的新增
+您可以在卡牌背景上点击右键单击「添加列」来新增任意的列。
 
-## カラムの移動
-カラムは、ドラッグアンドドロップで他のカラムと位置を入れ替えることが出来るほか、カラムメニュー(カラムのヘッダー右クリック)から位置を移動させることもできます。
+## 列的移动
+可以通过拖放列来与其他列互换位置，也可以从列菜单中移动列（右键单击列首）。
 
-## カラムの水平分割
-カラムは左右だけでなく、上下に並べることもできます。 カラムメニューを開き、「左に重ねる」を選択すると、左のカラムの下に現在のカラムが移動します。 上下分割を解除するには、カラムメニューの「右に出す」を選択します。
+## 列的水平分割
+列不仅可以从左到右叠加，还可以上下叠加。 如果打开列菜单，选择「向左折叠」，当前列将被移到左列下。 要解除垂直分割，请选择列菜单中的「向右弹出」。
 
-## カラムの設定
-カラムメニューの「編集」を選択するとカラムの設定を編集できます。カラムの名前を変えたり、幅を変えたりできます。
+## 列的设置
+选择列菜单的「编辑」时，可编辑当前列的设置。您可以重新命名列，或是改变列的宽度。
 
-## デッキの設定
-デッキに関する設定は、[settings/deck](/settings/deck)で行えます。
+## Deck的设置
+您可以在[settings/deck](/settings/deck)行中配置您Deck相关的设置。

src/docs/zh-CN/mfm.md

@@ -1,2 +1,2 @@
 # MFM
-MFMは、Misskey Flavored Markdownの略で、Misskeyの様々な場所で使用できる専用のマークアップ言語です。 MFMで使用可能な構文は[MFMチートシート](/mfm-cheat-sheet)で確認できます。
+MFM是Misskey Flavored Markdown的缩写，是一种专用的标记语言，可以用在Misskey的任何地方。 MFM中可用的语法可以在[MFMチートシート](/mfm-cheat-sheet)中找到。

src/server/api/endpoints/get-online-users-count.ts

@@ -0,0 +1,22 @@
+import define from '../define';
+import redis from '../../../db/redis';
+import config from '../../../config';
+
+export const meta = {
+	tags: ['meta'],
+
+	requireCredential: false as const,
+
+	params: {
+	}
+};
+
+export default define(meta, (ps, user) => {
+	return new Promise((res, rej) => {
+		redis.pubsub('numsub', config.host, (_, x) => {
+			res({
+				count: x[1]
+			});
+		});
+	});
+});

yarn.lock

@@ -64,6 +64,11 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@discoveryjs/json-ext@^0.5.0":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.2.tgz#8f03a22a04de437254e8ce8cc84ba39689288752"
+  integrity sha512-HyYEUDeIj5rRQU2Hk5HTB2uHsbRQpF70nvMhVzi+VJR0X+xNEhjPui4/kBf3VeH/wqD28PT4sVOm8qqLjBrSZg==
+
 "@elastic/elasticsearch@7.10.0":
   version "7.10.0"
   resolved "https://registry.yarnpkg.com/@elastic/elasticsearch/-/elasticsearch-7.10.0.tgz#da105a9c1f14146f9f2cab4e7026cb7949121b8d"
@@ -754,12 +759,10 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
   integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
 
-"@types/ratelimiter@3.4.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@types/ratelimiter/-/ratelimiter-3.4.0.tgz#e46c906a905f58aeecc92dccc16bb81687c5ec0c"
-  integrity sha512-r6ZXDiy8tDJPSxAnXV8d98jRCWYCNfA/NCIziDkQbzm4Rn0uJ8Nzm7194THpgmO9LX2YHN1n0iJGSpEt2t1BnQ==
-  dependencies:
-    "@types/redis" "*"
+"@types/ratelimiter@3.4.1":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@types/ratelimiter/-/ratelimiter-3.4.1.tgz#d8fb65c47a5c5625d8d8b04592370932dc6c0d4a"
+  integrity sha512-dFrZRKbL0IxIxobQbxoSyQkHWmy8B80PmVSxJL6tlOdD5Q8LqRRpEQ/t7uRkGfufOJF8kVkzBjyPr6Jp5msBgg==
 
 "@types/readable-stream@^2.3.9":
   version "2.3.9"
@@ -769,7 +772,7 @@
     "@types/node" "*"
     safe-buffer "*"
 
-"@types/redis@*", "@types/redis@2.8.28":
+"@types/redis@2.8.28":
   version "2.8.28"
   resolved "https://registry.yarnpkg.com/@types/redis/-/redis-2.8.28.tgz#5862b2b64aa7f7cbc76dafd7e6f06992b52c55e3"
   integrity sha512-8l2gr2OQ969ypa7hFOeKqtFoY70XkHxISV0pAwmQ2nm6CSPb1brmTmqJCGGrekCo+pAZyWlNXr+Kvo6L/1wijA==
@@ -1001,36 +1004,36 @@
   resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
   integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==
 
-"@vue/compiler-core@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.3.tgz#dbb4d5eb91f294038f0bed170a1c25f59f7dc74f"
-  integrity sha512-iWlRT8RYLmz7zkg84pTOriNUzjH7XACWN++ImFkskWXWeev29IKi7p76T9jKDaMZoPiGcUZ0k9wayuASWVxOwg==
+"@vue/compiler-core@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.5.tgz#a6e54cabe9536e74c6513acd2649f311af1d43ac"
+  integrity sha512-iFXwk2gmU/GGwN4hpBwDWWMLvpkIejf/AybcFtlQ5V1ur+5jwfBaV0Y1RXoR6ePfBPJixtKZ3PmN+M+HgMAtfQ==
   dependencies:
     "@babel/parser" "^7.12.0"
     "@babel/types" "^7.12.0"
-    "@vue/shared" "3.0.3"
+    "@vue/shared" "3.0.5"
     estree-walker "^2.0.1"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.3.tgz#582ba30bc82da8409868bc1153ff0e0e2be617e5"
-  integrity sha512-6GdUbDPjsc0MDZGAgpi4lox+d+aW9/brscwBOLOFfy9wcI9b6yLPmBbjdIsJq3pYdJWbdvACdJ77avBBdHEP8A==
+"@vue/compiler-dom@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.5.tgz#7885a13e6d18f64dde8ebceec052ed2c102696c2"
+  integrity sha512-HSOSe2XSPuCkp20h4+HXSiPH9qkhz6YbW9z9ZtL5vef2T2PMugH7/osIFVSrRZP/Ul5twFZ7MIRlp8tPX6e4/g==
   dependencies:
-    "@vue/compiler-core" "3.0.3"
-    "@vue/shared" "3.0.3"
+    "@vue/compiler-core" "3.0.5"
+    "@vue/shared" "3.0.5"
 
-"@vue/compiler-sfc@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.3.tgz#7fad9d40e139dd717713c0db701e1eb776f8349f"
-  integrity sha512-YocHSirye85kRVC4lU0+SE6uhrwGJzbhwkrqG4g6kmsAUopZ0qUjbICMlej5bYx2+AUz9yBIM7hpK8nIKFVFjg==
+"@vue/compiler-sfc@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.5.tgz#3ae08e60244a72faf9598361874fb7bdb5b1d37c"
+  integrity sha512-uOAC4X0Gx3SQ9YvDC7YMpbDvoCmPvP0afVhJoxRotDdJ+r8VO3q4hFf/2f7U62k4Vkdftp6DVni8QixrfYzs+w==
   dependencies:
     "@babel/parser" "^7.12.0"
     "@babel/types" "^7.12.0"
-    "@vue/compiler-core" "3.0.3"
-    "@vue/compiler-dom" "3.0.3"
-    "@vue/compiler-ssr" "3.0.3"
-    "@vue/shared" "3.0.3"
+    "@vue/compiler-core" "3.0.5"
+    "@vue/compiler-dom" "3.0.5"
+    "@vue/compiler-ssr" "3.0.5"
+    "@vue/shared" "3.0.5"
     consolidate "^0.16.0"
     estree-walker "^2.0.1"
     hash-sum "^2.0.0"
@@ -1042,42 +1045,42 @@
     postcss-selector-parser "^6.0.4"
     source-map "^0.6.1"
 
-"@vue/compiler-ssr@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.3.tgz#7d9e5c1b8c71d69865ac6c48d2e6eb2eecb68501"
-  integrity sha512-IjJMoHCiDk939Ix7Q5wrex59TVJr6JFQ95gf36f4G4UrVau0GGY/3HudnWT/6eyWJ7267+odqQs1uCZgDfL/Ww==
+"@vue/compiler-ssr@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.5.tgz#7661ad891a0be948726c7f7ad1e425253c587b83"
+  integrity sha512-Wm//Kuxa1DpgjE4P9W0coZr8wklOfJ35Jtq61CbU+t601CpPTK4+FL2QDBItaG7aoUUDCWL5nnxMkuaOgzTBKg==
   dependencies:
-    "@vue/compiler-dom" "3.0.3"
-    "@vue/shared" "3.0.3"
+    "@vue/compiler-dom" "3.0.5"
+    "@vue/shared" "3.0.5"
 
-"@vue/reactivity@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.3.tgz#681ee01ceff9219bc4da6bbb7d9c97d452e44d1d"
-  integrity sha512-t39Qmc42MX7wJtf8L6tHlu17eP9Rc5w4aRnxpLHNWoaRxddv/7FBhWqusJ2Bwkk8ixFHOQeejcLMt5G469WYJw==
+"@vue/reactivity@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.5.tgz#e3789e4d523d845f9ae0b4d770e2b45594742fd2"
+  integrity sha512-3xodUE3sEIJgS7ntwUbopIpzzvi7vDAOjVamfb2l+v1FUg0jpd3gf62N2wggJw3fxBMr+QvyxpD+dBoxLsmAjw==
   dependencies:
-    "@vue/shared" "3.0.3"
+    "@vue/shared" "3.0.5"
 
-"@vue/runtime-core@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.3.tgz#edab3c9ad122cf8afd034b174cd20c073fbf950a"
-  integrity sha512-Fd1JVnYI6at0W/2ERwJuTSq4S22gNt8bKEbICcvCAac7hJUZ1rylThlrhsvrgA+DVkWU01r0niNZQ4UddlNw7g==
+"@vue/runtime-core@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.5.tgz#da6331d5f300d5794e9e0ebdc8a8bd72a9e19962"
+  integrity sha512-Cnyi2NqREwOLcTEsIi1DQX1hHtkVj4eGm4hBG7HhokS05DqpK4/80jG6PCCnCH9rIJDB2FqtaODX397210plXg==
   dependencies:
-    "@vue/reactivity" "3.0.3"
-    "@vue/shared" "3.0.3"
+    "@vue/reactivity" "3.0.5"
+    "@vue/shared" "3.0.5"
 
-"@vue/runtime-dom@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.3.tgz#5e3e5e5418b9defcac988d2be0cf65596fa2cc03"
-  integrity sha512-ytTvSlRaEYvLQUkkpruIBizWIwuIeHER0Ch/evO6kUaPLjZjX3NerVxA40cqJx8rRjb9keQso21U2Jcpk8GsTg==
+"@vue/runtime-dom@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.5.tgz#1ce2c9c449e26ab06963da0064096e882a7a8935"
+  integrity sha512-iilX1KySeIzHHtErT6Y44db1rhWK5tAI0CiJIPr+SJoZ2jbjoOSE6ff/jfIQakchbm1d6jq6VtRVnp5xYdOXKA==
   dependencies:
-    "@vue/runtime-core" "3.0.3"
-    "@vue/shared" "3.0.3"
+    "@vue/runtime-core" "3.0.5"
+    "@vue/shared" "3.0.5"
     csstype "^2.6.8"
 
-"@vue/shared@3.0.3":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.3.tgz#ef12ebff93a446df281e8a0fd765b5aea8e7745b"
-  integrity sha512-yGgkF7u4W0Dmwri9XdeY50kOowN4UIX7aBQ///jbxx37itpzVjK7QzvD3ltQtPfWaJDGBfssGL0wpAgwX9OJpQ==
+"@vue/shared@3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.5.tgz#c131d88bd6713cc4d93b3bb1372edb1983225ff0"
+  integrity sha512-gYsNoGkWejBxNO6SNRjOh/xKeZ0H0V+TFzaPzODfBjkAIb0aQgBuixC1brandC/CDJy1wYPwSoYrXpvul7m6yw==
 
 "@webassemblyjs/ast@1.9.1":
   version "1.9.1"
@@ -1224,17 +1227,17 @@
     "@webassemblyjs/wast-parser" "1.9.1"
     "@xtuc/long" "4.2.2"
 
-"@webpack-cli/info@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.1.0.tgz#c596d5bc48418b39df00c5ed7341bf0f102dbff1"
-  integrity sha512-uNWSdaYHc+f3LdIZNwhdhkjjLDDl3jP2+XBqAq9H8DjrJUvlOKdP8TNruy1yEaDfgpAIgbSAN7pye4FEHg9tYQ==
+"@webpack-cli/info@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.2.0.tgz#6051d6adf3618df664f4945a2b76355c00f83f0d"
+  integrity sha512-+wA8lBKopgKmN76BSGJVJby5ZXDlsrO6p/nm7fUBsHznRNWB/ozotJP7Yfcz8JPfqeG2LxwYlTH2u6D9a/0XAw==
   dependencies:
     envinfo "^7.7.3"
 
-"@webpack-cli/serve@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.1.0.tgz#13ad38f89b6e53d1133bac0006a128217a6ebf92"
-  integrity sha512-7RfnMXCpJ/NThrhq4gYQYILB18xWyoQcBey81oIyVbmgbc6m5ZHHyFK+DyH7pLHJf0p14MxL4mTsoPAgBSTpIg==
+"@webpack-cli/serve@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.2.0.tgz#8cb2c1e95426f5caed1f3bf9d7ccf3ea41d85f52"
+  integrity sha512-jI3P7jMp/AXDSPkM+ClwRcJZbxnlvNC8bVZBmyRr4scMMZ4p5WQcXkw3Q+Hc7RQekomJlBMN+UQGliT4hhG8Vw==
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
@@ -1535,11 +1538,6 @@ arr-union@^3.1.0:
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
   integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
-array-back@^4.0.0, array-back@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/array-back/-/array-back-4.0.1.tgz#9b80312935a52062e1a233a9c7abeb5481b30e90"
-  integrity sha512-Z/JnaVEXv+A9xabHzN43FiiiWEE7gPCRXMrVmRm00tWbjZRul1iHm7ECzlyNq1p4a4ATXz+G9FJ3GqGOkOV3fg==
-
 array-each@^1.0.0, array-each@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/array-each/-/array-each-1.0.1.tgz#a794af0c05ab1752846ee753a1f211a05ba0c44f"
@@ -2613,16 +2611,6 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-command-line-usage@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/command-line-usage/-/command-line-usage-6.1.0.tgz#f28376a3da3361ff3d36cfd31c3c22c9a64c7cb6"
-  integrity sha512-Ew1clU4pkUeo6AFVDFxCbnN7GIZfXl48HIOQeFQnkO3oOqvpI7wdqtLRwv9iOCZ/7A+z4csVZeiDdEcj8g6Wiw==
-  dependencies:
-    array-back "^4.0.0"
-    chalk "^2.4.2"
-    table-layout "^1.0.0"
-    typical "^5.2.0"
-
 commander@4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
@@ -3201,7 +3189,7 @@ deep-equal@~1.0.1:
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
   integrity sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=
 
-deep-extend@^0.6.0, deep-extend@~0.6.0:
+deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
@@ -4016,6 +4004,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fastest-levenshtein@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
+  integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==
+
 fastq@^1.6.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.8.0.tgz#550e1f9f59bbc65fe185cb6a9b4d95357107f481"
@@ -5042,10 +5035,10 @@ insert-text-at-cursor@0.3.0:
   resolved "https://registry.yarnpkg.com/insert-text-at-cursor/-/insert-text-at-cursor-0.3.0.tgz#1819607680ec1570618347c4cd475e791faa25da"
   integrity sha512-/nPtyeX9xPUvxZf+r0518B7uqNKlP+LqNJqSiXFEaa2T71rWIwTVXGH7hB9xO/EVdwa5/pWlFCPwShOW81XIxQ==
 
-install-artifact-from-github@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/install-artifact-from-github/-/install-artifact-from-github-1.1.3.tgz#552f1ec3e693f970726e3f68018ff5885665ec9e"
-  integrity sha512-iNuncO/pI1w0UOrebs9dwwVpXqERkszPcb7AYq2hbsJDS3X+XdZ+E5kE91EBSc98mjvCMWOoBa1Zk3hVeP1ddA==
+install-artifact-from-github@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/install-artifact-from-github/-/install-artifact-from-github-1.2.0.tgz#adcbd123c16a4337ec44ea76d0ebf253cc16b074"
+  integrity sha512-3OxCPcY55XlVM3kkfIpeCgmoSKnMsz2A3Dbhsq0RXpIknKQmrX1YiznCeW9cD2ItFmDxziA3w6Eg8d80AoL3oA==
 
 interpret@^1.1.0:
   version "1.2.0"
@@ -5954,11 +5947,6 @@ lead@^1.0.0:
   dependencies:
     flush-write-stream "^1.0.2"
 
-leven@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
-  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
-
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -6591,12 +6579,7 @@ mz@^2.4.0, mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nan@^2.14.0:
-  version "2.14.1"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
-  integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
-
-nan@^2.14.2:
+nan@^2.14.0, nan@^2.14.2:
   version "2.14.2"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
@@ -8521,12 +8504,12 @@ rdf-canonize@^1.0.2:
     node-forge "^0.9.1"
     semver "^6.3.0"
 
-re2@1.15.8:
-  version "1.15.8"
-  resolved "https://registry.yarnpkg.com/re2/-/re2-1.15.8.tgz#654dfbd889acc2649773a2b32dfb9feb357ca9bc"
-  integrity sha512-CZm4HMuNbY+LP5LjFQvBxbQmvS7iJiVR3w23Bk3jYxZFUj6wPiYRvDikyVpqHYLioVAWcgjG6F90Pk4z7ehUSg==
+re2@1.15.9:
+  version "1.15.9"
+  resolved "https://registry.yarnpkg.com/re2/-/re2-1.15.9.tgz#9ed16171edcb0bc4f0e239bf55229ff3f26acbe3"
+  integrity sha512-AXWEhpMTBdC+3oqbjdU07dk0pBCvxh5vbOMLERL6Y8FYBSGn4vXlLe8cYszn64Yy7H8keVMrgPzoSvOd4mePpg==
   dependencies:
-    install-artifact-from-github "^1.1.3"
+    install-artifact-from-github "^1.2.0"
     nan "^2.14.2"
     node-gyp "^7.1.2"
 
@@ -8666,11 +8649,6 @@ reduce-css-calc@^1.2.6:
     math-expression-evaluator "^1.2.14"
     reduce-function-call "^1.0.1"
 
-reduce-flatten@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/reduce-flatten/-/reduce-flatten-2.0.0.tgz#734fd84e65f375d7ca4465c69798c25c9d10ae27"
-  integrity sha512-EJ4UNY/U1t2P/2k6oqotuX2Cc3T6nxJwsM0N0asT7dhrtH1ltUxDn4NalSYmPE2rCkVpcf/X6R0wDwcFpzhd4w==
-
 reduce-function-call@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.3.tgz#60350f7fb252c0a67eb10fd4694d16909971300f"
@@ -9857,16 +9835,6 @@ syuilo-password-strength@0.0.1:
   resolved "https://registry.yarnpkg.com/syuilo-password-strength/-/syuilo-password-strength-0.0.1.tgz#08f71a8f0ecb77db649f3d9a6424510d9d945f52"
   integrity sha1-CPcajw7Ld9tknz2aZCRRDZ2UX1I=
 
-table-layout@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/table-layout/-/table-layout-1.0.1.tgz#8411181ee951278ad0638aea2f779a9ce42894f9"
-  integrity sha512-dEquqYNJiGwY7iPfZ3wbXDI944iqanTSchrACLL2nOB+1r+h1Nzu2eH+DuPPvWvm5Ry7iAPeFlgEtP5bIp5U7Q==
-  dependencies:
-    array-back "^4.0.1"
-    deep-extend "~0.6.0"
-    typical "^5.2.0"
-    wordwrapjs "^4.0.0"
-
 table@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/table/-/table-6.0.4.tgz#c523dd182177e926c723eb20e1b341238188aa0d"
@@ -10052,16 +10020,11 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
-tinycolor2@1.4.2:
+tinycolor2@1.4.2, tinycolor2@^1.1.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
   integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
 
-tinycolor2@^1.1.2:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
-  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
-
 tmp@0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
@@ -10347,15 +10310,10 @@ typeorm@0.2.29:
     yargonaut "^1.1.2"
     yargs "^16.0.3"
 
-typescript@4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9"
-  integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ==
-
-typical@^5.0.0, typical@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/typical/-/typical-5.2.0.tgz#4daaac4f2b5315460804f0acf6cb69c52bb93066"
-  integrity sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==
+typescript@4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
+  integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==
 
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
@@ -10665,10 +10623,10 @@ void-elements@^2.0.1:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
   integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
 
-vue-color@2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.7.1.tgz#ca035109ea0010f0d60b889b97d63d37ac712f2d"
-  integrity sha512-u3yl46B2eEej9zfAOIRRSphX1QfeNQzMwO82EIA+aoi0AKX3o1KcfsmMzm4BFkkj2ukCxLVfQ41k7g1gSI7SlA==
+vue-color@2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.8.1.tgz#a090f3dcf8ed6f07afdb865cac84b19a73302e70"
+  integrity sha512-BoLCEHisXi2QgwlhZBg9UepvzZZmi4176vbr+31Shen5WWZwSLVgdScEPcB+yrAtuHAz42309C0A4+WiL9lNBw==
   dependencies:
     clamp "^1.0.1"
     lodash.throttle "^4.0.0"
@@ -10719,14 +10677,14 @@ vue-style-loader@4.1.2:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.3.tgz#ad94a475e6ebbf3904673b6a0ae46e47b957bd72"
-  integrity sha512-BZG5meD5vLWdvfnRL5WqfDy+cnXO1X/SweModGUna78bdFPZW6+ZO1tU9p0acrskX3DKFcfSp2s4SZnMjABx6w==
+vue@3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.5.tgz#de1b82eba24abfe71e0970fc9b8d4b2babdc3fe1"
+  integrity sha512-TfaprOmtsAfhQau7WsomXZ8d9op/dkQLNIq8qPV3A0Vxs6GR5E+c1rfJS1SDkXRQj+dFyfnec7+U0Be1huiScg==
   dependencies:
-    "@vue/compiler-dom" "3.0.3"
-    "@vue/runtime-dom" "3.0.3"
-    "@vue/shared" "3.0.3"
+    "@vue/compiler-dom" "3.0.5"
+    "@vue/runtime-dom" "3.0.5"
+    "@vue/shared" "3.0.5"
 
 vuedraggable@4.0.1:
   version "4.0.1"
@@ -10779,21 +10737,21 @@ webidl-conversions@^6.1.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
-webpack-cli@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.2.0.tgz#10a09030ad2bd4d8b0f78322fba6ea43ec56aaaa"
-  integrity sha512-EIl3k88vaF4fSxWSgtAQR+VwicfLMTZ9amQtqS4o+TDPW9HGaEpbFBbAZ4A3ZOT5SOnMxNOzROsSTPiE8tBJPA==
+webpack-cli@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.3.0.tgz#e39303bf9f8002de122903e97029f3443d0f9174"
+  integrity sha512-gve+BBKrzMPTOYDjupzV8JchUznhVWMKtWM1hFIQWi6XoeLvGNoQwkrtMWVb+aJ437GgCKdta7sIn10v621pKA==
   dependencies:
-    "@webpack-cli/info" "^1.1.0"
-    "@webpack-cli/serve" "^1.1.0"
+    "@discoveryjs/json-ext" "^0.5.0"
+    "@webpack-cli/info" "^1.2.0"
+    "@webpack-cli/serve" "^1.2.0"
     colorette "^1.2.1"
-    command-line-usage "^6.1.0"
     commander "^6.2.0"
     enquirer "^2.3.6"
     execa "^4.1.0"
+    fastest-levenshtein "^1.0.12"
     import-local "^3.0.2"
     interpret "^2.2.0"
-    leven "^3.1.0"
     rechoir "^0.7.0"
     v8-compile-cache "^2.2.0"
     webpack-merge "^4.2.2"
@@ -10948,14 +10906,6 @@ wordwrap@0.0.2:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
   integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=
 
-wordwrapjs@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrapjs/-/wordwrapjs-4.0.0.tgz#9aa9394155993476e831ba8e59fb5795ebde6800"
-  integrity sha512-Svqw723a3R34KvsMgpjFBYCgNOSdcW3mQFK4wIfhGQhtaFVOJmdYoXgi63ne3dTlWgatVcUc7t4HtQ/+bUVIzQ==
-  dependencies:
-    reduce-flatten "^2.0.0"
-    typical "^5.0.0"
-
 workerpool@6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.0.2.tgz#e241b43d8d033f1beb52c7851069456039d1d438"