12.41.3

fix(client): Fix #6526
fix(client): Fix #6540
2020-07-15 18:27:57 +09:00 · 2020-07-15 18:22:19 +09:00 · 2020-07-15 18:03:08 +09:00 · 2020-07-15 00:21:14 +09:00 · 2020-07-13 23:29:30 +09:00 · 2020-07-13 15:13:02 +09:00
148 changed files with 6246 additions and 2509 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -12,7 +12,7 @@ report.*.json
 # config
 /.config/*
 !/.config/example.yml
-!/.config/mongo_initdb_example.js
+!/.config/docker_example.env

 # misskey
 /build
--- a/.node-version
+++ b/.node-version
@@ -1 +1 @@
-v12.11.1
+v14.4.0
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,115 @@
 ChangeLog
 =========

+Next (2020/7/)
+-------------------
+### ✨Improvements
+- サウンドを追加 [b9e9631](https://github.com/syuilo/misskey/commit/b9e9631195a8ca5ed1386daeacdc835456d52975)
+
+### 🐛Fixes
+- 
+
+12.41.2 (2020/7/12)
+-------------------
+### ✨Improvements
+- モーダルにぼかし効果を使用するオプション [aae9bc4c](https://github.com/syuilo/misskey/commit/aae9bc4cf4c583b4d675391fe3da2fa53b7f18e0)
+- スタイルの調整 [eb84445](https://github.com/syuilo/misskey/commit/eb84445796039b93d124fa615e96c08fedcd9bf9), [dab7282](https://github.com/syuilo/misskey/commit/dab728278ca577622c575d1968eb6a22c7b444b9), [35a8c379](https://github.com/syuilo/misskey/commit/35a8c37922193317b3f6397562c762f9a9169b91)
+
+### 🐛Fixes
+- Deckのタイムラインを追加した直後のタイムライン種別の選択がキャンセルできない問題を修正 [#6535](https://github.com/syuilo/misskey/pull/6535)
+- ノート詳細 /notes/:id ページの直リンを踏むと Not Found になる問題を修正 [364bd9a](https://github.com/syuilo/misskey/commit/364bd9ae74226c46ccdad810884bce11b2bef156)
+- Deckでメインカラムの「投稿があります」をクリックしても上に行かない問題を修正 [5b5b64d](https://github.com/syuilo/misskey/commit/5b5b64d2514cf445aa81a6750ac4185f4e7dd8cd)
+- 翻訳の修正 [7555ab0](https://github.com/syuilo/misskey/commit/7555ab097a6aab68851782b641a33fb3fdf2f101), [426c2fa](https://github.com/syuilo/misskey/commit/426c2fa5d152610516337cc5a53810e136d573db)
+
+12.41.1 (2020/7/12)
+-------------------
+### ✨Improvements
+- ResizeObserver Polyfillを削除 [c89abda](https://github.com/syuilo/misskey/commit/c89abda3fb55857bb81c4f2163a4a0396a04fc27)
+  * Misskey Webのパフォーマンスが劇的に改善されました
+- スタイルの調整 [7cbe95a](https://github.com/syuilo/misskey/commit/7cbe95a1cf67f2536a6332bbccc7129afcd92f73), [320352b](https://github.com/syuilo/misskey/commit/320352bf4ba56ddd67c9c6bc0816dab94c53191b)
+
+### 🐛Fixes
+- サイドバーのホームを押すことでのトップへのスクロールが動作しなくなっている問題を修正 [3c66990](https://github.com/syuilo/misskey/commit/3c669902632570bb1354f6b53253037f183718b5)
+
+12.41.0 (2020/7/12)
+-------------------
+### ✨Improvements
+- デッキの実装 [#6504](https://github.com/syuilo/misskey/pull/6504), [065ec8e](https://github.com/syuilo/misskey/commit/065ec8e17080887814b1912233d38e412b2811d2), [debc008](https://github.com/syuilo/misskey/commit/debc0086fab6c131cf37f00e8b03fbe5d6f09c64)
+- テーマエディターの実装 [#6482](https://github.com/syuilo/misskey/pull/6482)
+- プラグインシステムの実装 [#6479](https://github.com/syuilo/misskey/pull/6479)
+- ウィジェットの位置を固定するオプションを追加 [3799708](https://github.com/syuilo/misskey/commit/3799708daf52c221c03ff0b1c11d8b888b22d32f)
+- ウィジェットの位置を固定しない場合、Twitterのようにstickyに画面追従するように [c25cf7f](https://github.com/syuilo/misskey/commit/c25cf7f89a1d3d7e55331396bbc3f44920a38de5)
+- サウンドを追加 (syuilo/pirori) [d4b4b61](https://github.com/syuilo/misskey/commit/d4b4b61535ee4f5f759ba3342b55e978e43f1c7b)
+- タイムライン上でTwitterの埋め込みプレビューを表示できるように [#6496](https://github.com/syuilo/misskey/pull/6496)
+- デザインや挙動の調整 [#6495](https://github.com/syuilo/misskey/pull/6495), [752669b](https://github.com/syuilo/misskey/commit/752669bf5ea83b81ddcabb804e795a24debe6dc0), [#6497](https://github.com/syuilo/misskey/pull/6497), [ade11aa](https://github.com/syuilo/misskey/commit/ade11aa447f0102c9202955e01c59fcb501f794e), [27a17b4](https://github.com/syuilo/misskey/commit/27a17b467d72aea81774c04b8ca3e01ed6874b24), [4fd0636](https://github.com/syuilo/misskey/commit/4fd06369d355f032b5eb245dfd98faadee2289f9), [ca2e53b](https://github.com/syuilo/misskey/commit/ca2e53bd6e3de50f2fdf62da16734873be37fcc4), [8ff2694](https://github.com/syuilo/misskey/commit/8ff2694cadd3ab3d51f96fc2ea3bbfde29475660), [11f8d74](https://github.com/syuilo/misskey/commit/11f8d742eb53e8b815abc8ed1c34627dcbaa9e2f)
+- ソースコードのリファクタ [a591a33](https://github.com/syuilo/misskey/commit/a591a334ed6fd7f8ed936bf7e7edfcce08de035a)
+
+### 🐛Fixes
+- 依存パッケージの更新 [#6491](https://github.com/syuilo/misskey/pull/6491), [#6516](https://github.com/syuilo/misskey/pull/6516), [d327bb8](https://github.com/syuilo/misskey/commit/d327bb8ff1b8765e92d6815d244e74f0793f6157)
+- サーバーへのファイルダウンロードのタイムアウトを11秒から60秒に緩和 [#6503](https://github.com/syuilo/misskey/pull/6503)
+- 非ログイン時にキーボードショートカットで投稿フォームが開けてしまう問題を修正 [#6508](https://github.com/syuilo/misskey/pull/6508)
+- キャッシュされてないリモートファイルのURLが相対URLで返ってくる問題を修正 [#6514](https://github.com/syuilo/misskey/pull/6514)
+  * リモートファイルをキャッシュしない設定のインスタンスにおいてサードパーティークライアントでリモートの画像が表示できない問題が修正されます
+- Mastodon v2.5.0未満からのActivityが受け取れない問題の修正 [#6518](https://github.com/syuilo/misskey/pull/6518)
+- music.youtube.comのURLプレビューの修正 [#6496](https://github.com/syuilo/misskey/pull/6496)
+- URLプレビューの翻訳を修正 [#6496](https://github.com/syuilo/misskey/pull/6496)
+- ノートの表示幅が狭いとTwitterウィジェットがはみ出すのをなんとか修正 [#6496](https://github.com/syuilo/misskey/pull/6496)
+- HiDPi環境でMisskey v12 Roomの家具を選択できない問題を修正 [#6507](https://github.com/syuilo/misskey/pull/6507)
+- Safariでの検索インプット・検索ボタンのデザインが適用されないのを修正 [#6484](https://github.com/syuilo/misskey/pull/6484)
+- フォロワーではないリモートユーザーに削除通知が配信されない問題を修正 [#6475](https://github.com/syuilo/misskey/pull/6475)
+
+12.40.0 (2020/7/5)
+-------------------
+### ✨Improvements
+- AP向けのアンケートのfallbackリンク（`リモートで結果を表示`）、`番号を返信して投票`、`_misskey_fallback_content`を削除 [#6466](https://github.com/syuilo/misskey/pull/6466)
+- 英語のNyaizeを改良 [#6456](https://github.com/syuilo/misskey/pull/6456)
+- プロフィールの「場所」「誕生日」を連合するように [#6463](https://github.com/syuilo/misskey/pull/6463)
+- リアクションピッカーの入力で空白を無視するように [90c07a2](https://github.com/syuilo/misskey/commit/90c07a220f1787cd25a17feefe2df667db5b630d)
+- ウィジェットを左に置けるように [624c9f3](https://github.com/syuilo/misskey/commit/624c9f3418ce1c2597fbe2cb75caf01939e4d845)
+- ウェルカムウィジェットの追加 [ea13efe](https://github.com/syuilo/misskey/commit/ea13efe495272fcfc9fb29c4f2127e4f908f9802)
+- 全体的なデザインの変更
+
+### 🐛Fixes
+- アカウント切り替え後にインスタンス設定の表示値が変わらないのを修正 [#6454](https://github.com/syuilo/misskey/pull/6454)
+- isCatがLD-Signatureの対象になってないのを修正 [#6463](https://github.com/syuilo/misskey/pull/6463)
+- タップ不可能なリアクションを押してもパーティクルが出るのを修正 [#6472](https://github.com/syuilo/misskey/pull/6472)
+- サイドバーの設定に不具合があるとページが表示できなくなる問題を修正 [#6473](https://github.com/syuilo/misskey/pull/6473)
+- 投稿詳細でTwitterウィジェットが表示されなくなっているのを修正 [#6488](https://github.com/syuilo/misskey/pull/6488)
+- 「すべて既読にする」でグループメッセージが既読にならない問題を修正 [#6476](https://github.com/syuilo/misskey/pull/6476)
+
+12.39.1 (2020/6/5)
+-------------------
+### ✨Improvements
+- メンションの色をテーマで指定できるように [071c7e6](https://github.com/syuilo/misskey/commit/071c7e6a581ca5d025d414869e03536011219370)
+
+### 🐛Fixes
+- リモートからのノートが受信できない問題を修正 [3c2d94ac](https://github.com/syuilo/misskey/commit/3c2d94ace31c0dbbbd18606d16828df60d0392eb), [7f76a73e](https://github.com/syuilo/misskey/commit/7f76a73eeef5df3b1fc02a00a0ca5710383a2429)
+  * MiAuthのレスポンスが返ってこない問題を修正を差し戻し
+- ドキュメントのMiAuthのURLを現状利用できるものに修正 [ddf92c3e](https://github.com/syuilo/misskey/commit/ddf92c3e2c5bdfc89e5c223a3cc2794f6a023400), [7f76a73e](https://github.com/syuilo/misskey/commit/7f76a73eeef5df3b1fc02a00a0ca5710383a2429)
+
+12.39.0 (2020/6/4)
+-------------------
+**12.39.0にはリモートからのノートが受信できないという重大なバグがありますので、使わないでください。**  
+**NEVER USE 12.39.0 because it has a serious bug that Misskey cannot recieve notes from remotes.**  
+
+### ✨Improvements
+- アラビア語を追加 [#6416](https://github.com/syuilo/misskey/pull/6416)
+- 自動でもっと見る [#6403](https://github.com/syuilo/misskey/pull/6403)
+- MFMのテキストノードは、HTMLではspanタグではなくテキストノードに変換するように [#6399](https://github.com/syuilo/misskey/pull/6399)
+- ローカルのみボタンを公開範囲ピッカーに統合 [#6428](https://github.com/syuilo/misskey/pull/6428)
+- ユーザーが画面を見てないと思われるとき（ブラウザやタブがアクティブではない時）は通知を既読にしないように [#6407](https://github.com/syuilo/misskey/pull/6407)
+- 通知一覧で、通知が画面に表示されると既読にするように [#6407](https://github.com/syuilo/misskey/pull/6407)
+- APIのNotificationでisRead（既読かどうか）を含めるように [#6407](https://github.com/syuilo/misskey/pull/6407)
+
+### 🐛Fixes
+- 引用ノートのフォントサイズがおかしいときがあるのを修正 [#6414](https://github.com/syuilo/misskey/pull/6414)
+- iOS Safari 上で アイコンおよびバナーのアップロードができない不具合を修正 [#6427](https://github.com/syuilo/misskey/pull/6427)
+- APで `HTTP-Signature検証失敗 かつ LD-Signatureなし` がキューに溜まってリトライし続けるのを修正 [#6437](https://github.com/syuilo/misskey/pull/6437)
+- MiAuthでトークンが利用できない問題を修正 [6b2c2890](https://github.com/syuilo/misskey/commit/6b2c289029cbf01537c2a67a3e61d615aad30c34)
+- Twitterのプレビューが利用できなくなっている問題を修正 [f296410](https://github.com/syuilo/misskey/commit/f2964101d162fb64ac9e7ad99123c5bb568ac52b)
+- IDの重複が起きてしまう問題を修正 [#6440](https://github.com/syuilo/misskey/pull/6440)
+- ※MiAuthのレスポンスが返ってこない問題を修正 [#6418](https://github.com/syuilo/misskey/issues/6418)
+
 12.38.0 (2020/5/17)
 -------------------
 ### ✨Improvements
--- a/2
+++ b/2
@@ -1,4 +1,4 @@
-FROM node:14.2.0-alpine AS base
+FROM node:14.4.0-alpine AS base

 ENV NODE_ENV=production

--- a/docs/examples/misskey.nginx
+++ b/docs/examples/misskey.nginx
@@ -53,7 +53,6 @@ server {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
-        proxy_set_header Accept-Encoding "";
        proxy_http_version 1.1;
        proxy_redirect off;

--- a/locales/ar-SA.yml
+++ b/locales/ar-SA.yml
@@ -28,12 +28,18 @@ favorite: "إضافة إلى المفضلة"
 favorites: "المفضلات"
 unfavorite: "إزالة من المفضلة"
 pin: "دبّسها على الصفحة الشخصية"
+copyContent: "انسخ المحتوى"
+copyLink: "انسخ الرابط"
 delete: "حذف"
 deleteAndEdit: "إزالة وإعادة الصياغة"
 addToList: "أضفه إلى قائمة"
+sendMessage: "أرسل رسالة"
+copyUsername: "انسخ اسم المستخدم"
 reply: "رد"
 loadMore: "عرض المزيد"
 youGotNewFollower: "يتابعك"
+mentions: "الإشارات"
+directNotes: "الملاحظات المباشرة"
 import: "استيراد"
 export: "تصدير"
 files: "الملفات"
@@ -52,17 +58,20 @@ retry: "حاول مجددًا"
 enterListName: "اسم القائمة"
 privacy: "الخصوصية"
 makeFollowManuallyApprove: "القبول يدويا طلبات الإشتراك"
+defaultNoteVisibility: "مدى الرؤية الافتراضي"
 follow: "تابِع"
 followRequest: "طلب اشتراك"
 followRequests: "طلبات الإشتراك"
 unfollow: "إلغاء الاشتراك"
 followRequestPending: "طلبات الإشتراك المعلّقة"
+unrenote: "إلغاء مشاركة الملاحظة"
 quote: "اقتبس"
 pinnedNote: "ملاحظة مدبسة"
 you: "أنت"
 clickToShow: "اضغط للعرض"
 sensitive: "محتوى حساس"
 add: "إضافة"
+rememberNoteVisibility: "تذكر إعدادت مدى رؤية الملاحظات"
 enterFileName: "ادخل اسم الملف"
 mute: "اكتم"
 unmute: "إلغاء الكتم"
@@ -72,6 +81,7 @@ selectList: "اختر قائمة"
 customEmojis: "إيموجي مخصص"
 addEmoji: "إضافة إيموجي"
 addAcount: "إضافة حساب"
+showOnRemote: "رؤيته على مثيل الخادم البُعدي"
 general: "الرئيسية"
 wallpaper: "خلفية الشاشة"
 setWallpaper: "استخدم خلفية الشاشة"
@@ -123,25 +133,34 @@ blocked: "محجوب"
 suspended: "مُعلّق"
 all: "الكل"
 notResponding: "لا يستجيب"
+changePassword: "تغيير الكلمة السرية"
 security: "الأمان"
 more: "المزيد!"
+featured: "المتداولة"
+usernameOrUserId: "اسم المستخدم أو معرّفه"
+noSuchUser: "لم يُعثَر على المستخدم"
 lookup: "البحث"
 announcements: "الإعلانات"
 imageUrl: "عنوان URL للصورة"
 remove: "حذف"
 removed: "تم حذفه بنجاح"
+removeAreYouSure: "متأكد من أنك تريد حذف {x}؟"
+saved: "تم حفظه"
 messaging: "الدردشة"
 upload: "تحميل"
 fromDrive: "من المخزن"
 fromUrl: "من عنوان URL"
+uploadFromUrl: "التحميل عبر URL"
 explore: "استكشاف"
 games: "ألعاب Misskey"
 messageRead: "مقروءة"
+startMessaging: "ابدأ الدردشة"
 tos: "شروط الخدمة"
 start: "البداية"
 home: "الرئيسي"
 activity: "النشاط"
 images: "الصور"
+birthday: "تاريخ الميلاد"
 yearsOld: "{age} سنة"
 registeredDate: "انظم في"
 location: "المكان"
@@ -152,9 +171,24 @@ light: "فاتح"
 dark: "داكن"
 lightThemes: "الحلة الفاتحة"
 darkThemes: "الحلة الداكنة"
+drive: "قرص التخرين"
+fileName: "اسم الملف"
+selectFile: "اختر ملفًا"
+selectFiles: "اختر ملفات"
+selectFolder: "اختر مجلدًا"
+selectFolders: "اختر مجلدات"
+renameFile: "إعادة تسمية الملف"
+folderName: "اسم المجلد"
+createFolder: "أنشئ مجلدًا"
+renameFolder: "إعادة تسمية المجلد"
+deleteFolder: "احذف هذا المجلد"
 addFile: "إضافة ملف"
+emptyDrive: "قرص التخزين فارغ"
+emptyFolder: "هذا المجلد فارغ"
+unableToDelete: "لا يمكن حذفه"
 inputNewFileName: "ادخل الإسم الجديد للملف"
 inputNewFolderName: "ادخل الإسم الجديد للمجلد"
+copyUrl: "انسخ عنوان URL"
 rename: "إعادة التسمية"
 avatar: "الصورة الرمزية"
 banner: "الصورة الرأسية"
@@ -197,12 +231,14 @@ manageAntennas: "إدارة الهوائيات"
 name: "الإسم"
 antennaSource: "مصدر الهوائي"
 antennaKeywords: "الكلمات المفتاحية للإستقبال"
+withReplies: "بالردود"
 notesAndReplies: "الملاحظات والردود"
 withFiles: "بالمرفقات"
 silence: "اكتم"
 unsilence: "إلغاء الكتم"
 popularUsers: "المستخدمون الشائعون"
 exploreFediverse: "استكشف الفديفرس"
+popularTags: "الوسوم الرائجة"
 userList: "القوائم"
 about: "عن"
 aboutMisskey: "عن Misskey"
@@ -211,12 +247,15 @@ administrator: "المدير"
 token: "الرمز المميز"
 twoStepAuthentication: "الإستيثاق بعاملَيْن"
 moderator: "مشرِف"
+nUsersMentioned: "{n} مستخدمين تمت الإشارة إليهم"
 securityKey: "مفتاح الأمان"
 securityKeyName: "اسم المفتاح"
 lastUsed: "آخر استخدام"
+unregister: "إلغاء التسجيل"
 passwordLessLogin: "لِج مِن دون كلمة سرية"
 resetPassword: "أعد تعيين كلمتك السرية"
 newPasswordIs: "كلمتك السرية الجديدة هي {password}"
+autoNoteWatch: "راقب الملاحظات تلقائيا"
 share: "شارِك"
 notFound: "غير موجود"
 help: "المساعدة"
@@ -229,6 +268,8 @@ invites: "دعوة"
 groupName: "اسم الفريق"
 members: "الأعضاء"
 transfer: "نقل"
+messagingWithUser: "الدردشة مع مستخدم آخر"
+messagingWithGroup: "دردشة جماعية"
 title: "العنوان"
 text: "النص"
 enable: "تشغيل"
@@ -236,6 +277,8 @@ next: "التالية"
 retype: "أعد الكتابة"
 noteOf: "ملاحظات {user}"
 inviteToGroup: "دعوة إلى فريق"
+noMessagesYet: "ليس هناك رسائل بعد"
+newMessageExists: "لقد تلقيت رسالة جديدة"
 invitationCode: "رمز الدعوة"
 checking: "التحقق جارٍ"
 available: "متوفر"
@@ -250,6 +293,10 @@ passwordNotMatched: "غير متطابقتان"
 signinWith: "الولوج عبر {x}"
 or: "أو"
 uiLanguage: "لغة واجهة المستخدم"
+aboutX: "عن {x}"
+useOsNativeEmojis: "استخدم الإيموجيات الخاصة بنظام التشغيل"
+youHaveNoGroups: "لا تمتلك أية فِرَق"
+noHistory: "السجل فارغ"
 doing: "انتظر لحظة"
 category: "الفئات"
 tags: "الوسوم"
@@ -285,16 +332,22 @@ lastUsedDate: "آخر استخدام"
 state: "الحالة"
 sort: "ترتيب حسب"
 output: "الخارجة"
+updateRemoteUser: "تحديث المعلومات عن المستخدم البعيد"
 sidebar: "الشريط الجانبي"
 addItem: "إضافة عنصر"
 rooms: "الغرفة"
 relays: "المُرَحلات"
 addRelay: "إضافة مُرحّل"
 addedRelays: "المرحلات التي تم إضافتها"
+deletedNote: "ملاحظة محذوفة"
+invisibleNote: "ملاحظة مخفية"
 _theme:
  explore: "استكشف قوالب المظهر"
+  keys:
+    messageBg: "خلفية الدردشة"
 _sfx:
  note: "الملاحظات"
+  noteMy: "ملاحظتي"
  notification: "الإشعارات"
  chat: "الدردشة"
 _ago:
@@ -368,11 +421,16 @@ _postForm:
 _profile:
  name: "الإسم"
  username: "اسم المستخدم"
+  youCanIncludeHashtags: "يمكنك أيضًا إضافة وسوم إلى نبذتك التعريفية."
 _exportOrImport:
+  allNotes: "كل الملاحظات"
  followingList: "المتابَعون"
  muteList: "اكتم"
  blockingList: "احجب"
  userLists: "القوائم"
+_charts:
+  usersTotal: "مجموع عدد المستخدمين والمستخدمات"
+  activeUsers: "المستخدمون النشطون"
 _timelines:
  home: "الرئيسي"
  local: "المحلي"
@@ -383,6 +441,7 @@ _rooms:
    default: "افتراضي"
  _furnitures:
    monitor: "شاشة التحكم"
+    banknote: "أوراق نقدية"
 _pages:
  blocks:
    image: "الصور"
@@ -390,6 +449,9 @@ _pages:
    categories:
      list: "القوائم"
    blocks:
+      _strReplace:
+        arg1: "نص"
+        arg3: "استُبدِل بـ"
      _join:
        arg1: "القوائم"
        arg2: "فاصل"
@@ -407,5 +469,14 @@ _pages:
    types:
      array: "القوائم"
 _notification:
+  youGotMessagingMessageFromUser: "لقد تلقيت رسالة مِن {name}"
+  youGotMessagingMessageFromGroup: "لقد أرسِلَت رسالة إلى الفريق {name}"
  youWereFollowed: "يتابعك"
-
+_deck:
+  _columns:
+    notifications: "الإشعارات"
+    tl: "الخيط الزمني"
+    antenna: "الهوائيات"
+    list: "القوائم"
+    mentions: "الإشارات"
+    direct: "مباشرة"
--- a/locales/cs-CZ.yml
+++ b/locales/cs-CZ.yml
@@ -1,3 +1,2 @@
 ---
 _lang_: "Čeština"
-
--- a/locales/da-DK.yml
+++ b/locales/da-DK.yml
@@ -1,3 +1,2 @@
 ---
 _lang_: "Dansk"
-
--- a/locales/de-DE.yml
+++ b/locales/de-DE.yml
@@ -205,7 +205,7 @@ remove: "Löschen"
 removed: "Erfolgreich gelöscht"
 removeAreYouSure: "Möchtest du \"{x}\" wirklich löschen?"
 saved: "Gespeichert"
-messaging: "Privatnachrichten"
+messaging: "Chat"
 upload: "Hochladen"
 fromDrive: "Aus Drive"
 fromUrl: "Von einer URL"
@@ -217,7 +217,7 @@ explore: "Erkunden"
 games: "Misskey Spiele"
 messageRead: "Gelesen"
 noMoreHistory: "Kein weiterer Verlauf vorhanden"
-startMessaging: "Neue Privatnachricht erstellen"
+startMessaging: "Neuen Chat erstellen"
 nUsersRead: "Von {n} gelesen"
 agreeTo: "Ich stimme {0} zu"
 tos: "Nutzungsbedingungen"
@@ -386,8 +386,8 @@ invites: "Einladungen"
 groupName: "Gruppenname"
 members: "Mitglieder"
 transfer: "Übertragen"
-messagingWithUser: "Privatnachrichten mit einem Benutzer"
-messagingWithGroup: "Privatnachrichten mit einer Gruppe"
+messagingWithUser: "Privatchat"
+messagingWithGroup: "Gruppenchat"
 title: "Betreff"
 text: "Text"
 enable: "Aktivieren"
@@ -515,19 +515,95 @@ enableInfiniteScroll: "Automatisch mehr Notizen laden"
 visibility: "Sichtbarkeit"
 poll: "Umfrage"
 useCw: "Inhalt verstecken"
+fixedWidgetsPosition: "Widgetposition fixieren"
+enablePlayer: "Video-Player öffnen"
+disablePlayer: "Video-Player schließen"
+expandTweet: "Tweet ausklappen"
+themeEditor: "Farbthemen-Editor"
+description: "Beschreibung"
+author: "Autor"
+leaveConfirm: "Es gibt unspeicherte Änderungen. Möchtest du diese verwerfen?"
+manage: "Verwaltung"
+plugins: "Plugins"
+pluginInstallWarn: "Installiere nur vertrauenswürdige Plugins."
+deck: "Deck"
+undeck: "Deck verlassen"
 _theme:
  explore: "Themen erforschen"
  install: "Thema installieren"
  manage: "Themaverwaltung"
-  code: "Themencode"
+  code: "Themen-Code"
  installed: "{name} wurde installiert"
  alreadyInstalled: "Dieses Thema ist bereits installiert"
  invalid: "Themenformat ist ungültig"
+  make: "Farbthema erstellen"
+  base: "Basis"
+  addConstant: "Konstante hinzufügen"
+  constant: "Konstante"
+  defaultValue: "Standardwert"
+  color: "Farbe"
+  refProp: "Eigenschaft referenzieren"
+  refConst: "Konstante referenzieren"
+  key: "Schlüssel"
+  func: "Funktionen"
+  funcKind: "Funktionstyp"
+  argument: "Parameter"
+  basedProp: "Name der referenzierten Eigenschaft"
+  alpha: "Transparenz"
+  darken: "Verdunkeln"
+  lighten: "Erhellen"
+  inputConstantName: "Name der Konstanten eingeben"
+  importInfo: "Du kannst hier Themen-Code einfügen, um ihn in den Editor zu importieren"
+  deleteConstantConfirm: "Die Konstante {const} wirklich löschen?"
+  keys:
+    accent: "Akzentfarbe"
+    bg: "Hintergrund"
+    fg: "Text"
+    focus: "Fokus"
+    indicator: "Indikator"
+    panel: "Panel"
+    shadow: "Schatten"
+    header: "Kopfzeile"
+    navBg: "Hintergrund der Seitenleiste"
+    navFg: "Text der Seitenleiste"
+    navHoverFg: "Text der Seitenleiste (Mouseover)"
+    navActive: "Text der Seitenleiste (Aktiv)"
+    navIndicator: "Indikator der Seitenleiste"
+    link: "Link"
+    hashtag: "Hashtag"
+    mention: "Erwähnungen"
+    mentionMe: "Erwähnungen (Ich)"
+    renote: "Renote"
+    modalBg: "Hintergrund des Modals"
+    divider: "Trenner"
+    scrollbarHandle: "Griff des Scrollbalkens"
+    scrollbarHandleHover: "Griff des Scrollbalkens (Mouseover)"
+    dateLabelFg: "Text von Datumsbeschriftungen"
+    infoBg: "Hintergrund von Informationen"
+    infoFg: "Text von Informationen"
+    infoWarnBg: "Hintergrund von Warnungen"
+    infoWarnFg: "Text von Informationen"
+    cwBg: "Hintergrund von versteckten Inhalten"
+    cwFg: "Text von versteckten Inhalten"
+    cwHoverBg: "Hintergrund von versteckten Inhalten (Mouseover)"
+    toastBg: "Hintergrund von Benachrichtigungen"
+    toastFg: "Text von Benachrichtigungen"
+    buttonBg: "Hintergrund von Schaltflächen"
+    buttonHoverBg: "Hintergrund von Schaltflächen (Mouseover)"
+    inputBorder: "Rahmen des Eingabefelds"
+    listItemHoverBg: "Hintergrund von Listeneinträgen (Mouseover)"
+    driveFolderBg: "Hintergrund von Drive-Ordnern"
+    wallpaperOverlay: "Hintergrundbild-Overlay"
+    badge: "Wappen"
+    messageBg: "Hintergrund von Chats"
+    accentDarken: "Akzent (Verdunkelt)"
+    accentLighten: "Akzent (Erhellt)"
+    fgHighlighted: "Hervorgehobener Text"
 _sfx:
  note: "Notizen"
  noteMy: "Meine Notizen"
  notification: "Benachrichtigungen"
-  chat: "Privatnachrichten"
+  chat: "Chat"
  chatBg: "Nachrichten (Hintergrund)"
  antenna: "Antennen"
 _ago:
@@ -589,8 +665,8 @@ _permissions:
  "write:favorites": "Deine Favoriten-Liste bearbeiten"
  "read:following": "Deine Follower-Liste lesen"
  "write:following": "Anderen Benutzern folgen oder entfolgen"
-  "read:messaging": "Privatnachrichten lesen"
-  "write:messaging": "Privatnachrichten schicken oder löschen"
+  "read:messaging": "Chats lesen"
+  "write:messaging": "Chatnachrichten schicken oder löschen"
  "read:mutes": "Stummschaltungen lesen"
  "write:mutes": "Stummschaltungen bearbeiten"
  "write:notes": "Notizen schreiben oder löschen"
@@ -636,6 +712,7 @@ _widgets:
  rss: "RSS-Reader"
  activity: "Aktivität"
  photos: "Fotos"
+  digitalClock: "Digitaluhr"
 _cw:
  hide: "Ausblenden"
  show: "Mehr anzeigen"
@@ -1083,10 +1160,21 @@ _notification:
  youGotQuote: "{name} hat dich zitiert"
  youRenoted: "Renote deiner Notiz von {name}"
  youGotPoll: "{name} hat auf deiner Umfrage abgestimmt"
-  youGotMessagingMessageFromUser: "{name} hat dir eine Privatnachricht gesendet"
-  youGotMessagingMessageFromGroup: "In die Gruppe {name} wurde eine Privatnachricht gesendet"
+  youGotMessagingMessageFromUser: "{name} hat dir eine Chatnachricht gesendet"
+  youGotMessagingMessageFromGroup: "In die Gruppe {name} wurde eine Chatnachricht gesendet"
  youWereFollowed: "Du hast einen neuen Follower"
  youReceivedFollowRequest: "Du hast eine Follow-Anfrage erhalten"
  yourFollowRequestAccepted: "Deine Follow-Anfrage wurde akzeptiert"
  youWereInvitedToGroup: "Du wurdest in eine Gruppe eingeladen"
-
+_deck:
+  alwaysShowMainColumn: "Hauptspalte immer zeigen"
+  columnAlign: "Spalten ausrichten"
+  addColumn: "Spalte hinzufügen"
+  _columns:
+    widgets: "Widgets"
+    notifications: "Benachrichtigungen"
+    tl: "Chronik"
+    antenna: "Antennen"
+    list: "Listen"
+    mentions: "Erwähnungen"
+    direct: "Direkt"
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -515,6 +515,19 @@ enableInfiniteScroll: "Enable infinite scrolling"
 visibility: "Visiblility"
 poll: "Poll"
 useCw: "Hide content"
+fixedWidgetsPosition: "Make widget position fixed"
+enablePlayer: "Open video player"
+disablePlayer: "Close video player"
+expandTweet: "Expand tweet"
+themeEditor: "Theme editor"
+description: "Description"
+author: "Author"
+leaveConfirm: "There are unsaved changes. Do you want to discard them?"
+manage: "Management"
+plugins: "Plugins"
+pluginInstallWarn: "Please do not install untrustworthy plugins."
+deck: "Deck"
+undeck: "Leave Deck"
 _theme:
  explore: "Explore Themes"
  install: "Install theme"
@@ -523,6 +536,69 @@ _theme:
  installed: "{name} has been installed"
  alreadyInstalled: "The theme is already installed"
  invalid: "Theme format is invalid"
+  make: "Make a theme"
+  base: "Base"
+  addConstant: "Add constant"
+  constant: "Constant"
+  defaultValue: "Default value"
+  color: "Color"
+  refProp: "Reference a property"
+  refConst: "Reference a constant"
+  key: "Key"
+  func: "Functions"
+  funcKind: "Function type"
+  argument: "Argument"
+  basedProp: "Name of the referenced property"
+  alpha: "Opacity"
+  darken: "Darken"
+  lighten: "Lighten"
+  inputConstantName: "Enter a name for the constant"
+  importInfo: "If you enter theme code here, you can import it to the theme editor"
+  deleteConstantConfirm: "Do you really want to delete the constant {const}?"
+  keys:
+    accent: "Accent"
+    bg: "Background"
+    fg: "Text"
+    focus: "Focus"
+    indicator: "Indicator"
+    panel: "Panel"
+    shadow: "Shadow"
+    header: "Header"
+    navBg: "Sidebar background"
+    navFg: "Sidebar text"
+    navHoverFg: "Sidebar text (Hover)"
+    navActive: "Sidebar text (Active)"
+    navIndicator: "Sidebar indicator"
+    link: "Link"
+    hashtag: "Hashtag"
+    mention: "Mention"
+    mentionMe: "Mentions (Me)"
+    renote: "Renote"
+    modalBg: "Modal background"
+    divider: "Divider"
+    scrollbarHandle: "Scrollbar handle"
+    scrollbarHandleHover: "Scrollbar handle (Hover)"
+    dateLabelFg: "Text of date labels"
+    infoBg: "Information background"
+    infoFg: "Information text"
+    infoWarnBg: "Warning background"
+    infoWarnFg: "Warning text"
+    cwBg: "CW background"
+    cwFg: "CW text"
+    cwHoverBg: "CW background (Hover)"
+    toastBg: "Notification background"
+    toastFg: "Notification text"
+    buttonBg: "Button background"
+    buttonHoverBg: "Button background (Hover)"
+    inputBorder: "Input field border"
+    listItemHoverBg: "List item background (Hover)"
+    driveFolderBg: "Drive folder background"
+    wallpaperOverlay: "Wallpaper overlay"
+    badge: "Badge"
+    messageBg: "Chat background"
+    accentDarken: "Accent (Darkened)"
+    accentLighten: "Accent (Lightened)"
+    fgHighlighted: "Highlighted Text"
 _sfx:
  note: "New note"
  noteMy: "My note"
@@ -636,6 +712,7 @@ _widgets:
  rss: "RSS reader"
  activity: "Activity"
  photos: "Photos"
+  digitalClock: "Digital clock"
 _cw:
  hide: "Hide"
  show: "Load more"
@@ -1089,4 +1166,15 @@ _notification:
  youReceivedFollowRequest: "You've received a follow request"
  yourFollowRequestAccepted: "Your follow request was accepted"
  youWereInvitedToGroup: "Invited to group"
-
+_deck:
+  alwaysShowMainColumn: "Always show main column"
+  columnAlign: "Align columns"
+  addColumn: "Add column"
+  _columns:
+    widgets: "Widgets"
+    notifications: "Notifications"
+    tl: "Timeline"
+    antenna: "Antennas"
+    list: "Lists"
+    mentions: "Mentions"
+    direct: "Direct"
--- a/locales/es-ES.yml
+++ b/locales/es-ES.yml
@@ -26,7 +26,7 @@ signup: "Registrarse"
 uploading: "Cargando"
 save: "Guardar"
 users: "Usuarios"
-addUser: "Añadir usuario"
+addUser: "Agregar usuario"
 favorite: "Favorito"
 favorites: "Favoritos"
 unfavorite: "Quitar de favoritos"
@@ -85,7 +85,7 @@ pinnedNote: "Nota fijada"
 you: "Tú"
 clickToShow: "Click para ver"
 sensitive: "Marcado como sensible"
-add: "Añadir"
+add: "Agregar"
 reaction: "Reacción"
 reactionSettingDescription: "Asigne sus reacción favoritas que desean anclar en el selector de reacciones."
 rememberNoteVisibility: "Recordar visibilidad"
@@ -108,14 +108,14 @@ customEmojis: "Emojis personalizados"
 emoji: "Emoji"
 emojiName: "Nombre del emoji"
 emojiUrl: "URL de la imágen del emoji"
-addEmoji: "Añadir emoji"
+addEmoji: "Agregar emoji"
 settingGuide: "Configuración sugerida"
 cacheRemoteFiles: "Mantener en cache los archivos remotos"
 cacheRemoteFilesDescription: "Si desactiva esta configuración, Los archivos remotos se cargarán desde el link directo sin usar la caché. Con eso se puede ahorrar almacenamiento del servidor, pero eso aumentará el tráfico al no crear miniaturas."
 flagAsBot: "Esta cuenta es un bot"
 flagAsCat: "Esta cuenta es un gato"
 autoAcceptFollowed: "Aceptar automáticamente las solicitudes de seguimiento de los usuarios que sigues"
-addAcount: "Añadir cuenta"
+addAcount: "Agregar cuenta"
 loginFailed: "Error al iniciar sesión."
 showOnRemote: "Ver en una instancia remota"
 general: "General"
@@ -249,7 +249,7 @@ folderName: "Nombre de la carpeta"
 createFolder: "Crear carpeta"
 renameFolder: "Renombrar carpeta"
 deleteFolder: "Borrar carpeta"
-addFile: "Añadir archivo"
+addFile: "Agregar archivo"
 emptyDrive: "El drive está vacío"
 emptyFolder: "La carpeta está vacía"
 unableToDelete: "No se puede borrar"
@@ -515,6 +515,17 @@ enableInfiniteScroll: "Activar scroll infinito"
 visibility: "Visibilidad"
 poll: "Encuesta"
 useCw: "Esconder contenidos"
+fixedWidgetsPosition: "Fijar la posición de los widgets"
+enablePlayer: "Abrir reproductor"
+disablePlayer: "Cerrar reproductor"
+expandTweet: "Expandir tweet"
+themeEditor: "Editor de temas"
+description: "Descripción"
+author: "Autor"
+leaveConfirm: "Hay modificaciones sin guardar. ¿Desea descartarlas?"
+manage: "Administrar"
+plugins: "Plugins"
+pluginInstallWarn: "Por favor no instale plugins que no son de confianza"
 _theme:
  explore: "Explorar temas"
  install: "Instalar tema"
@@ -523,6 +534,69 @@ _theme:
  installed: "{name} ha sido instalado"
  alreadyInstalled: "Este tema ya está instalado"
  invalid: "El formato del tema no es válido"
+  make: "Crear tema"
+  base: "Base"
+  addConstant: "Agregar constante"
+  constant: "Constante"
+  defaultValue: "Valor predeterminado"
+  color: "Color"
+  refProp: "Hacer referencia a propiedad"
+  refConst: "Hacer referencia a constante"
+  key: "Clave"
+  func: "funciones"
+  funcKind: "Tipo de función"
+  argument: "Argumento"
+  basedProp: "Nombre de la propiedad referenciada"
+  alpha: "Opacidad"
+  darken: "Oscuridad"
+  lighten: "Brillo"
+  inputConstantName: "Por favor ingrese el nombre de la constante"
+  importInfo: "Pegando el código del tema aquí, puede importarlo al editor"
+  deleteConstantConfirm: "¿Desea borrar la constante {const}?"
+  keys:
+    accent: "Acento"
+    bg: "Fondo"
+    fg: "Texto"
+    focus: "Enfoque"
+    indicator: "Indicador"
+    panel: "Panel"
+    shadow: "Sombra"
+    header: "Cabezal"
+    navBg: "Fondo de la barra lateral"
+    navFg: "Texto de la barra lateral"
+    navHoverFg: "Texto de la barra lateral (hover)"
+    navActive: "Texto de la barra lateral (activo)"
+    navIndicator: "Indicador de la barra lateral"
+    link: "Vínculo"
+    hashtag: "Hashtag"
+    mention: "Menciones"
+    mentionMe: "Menciones (yo)"
+    renote: "Renotar"
+    modalBg: "Fondo modal"
+    divider: "Divisor"
+    scrollbarHandle: "Cuadro de la barra de desplazamiento"
+    scrollbarHandleHover: "Cuadro de la barra de desplazamiento (hover)"
+    dateLabelFg: "Texto de la etiqueta de fecha"
+    infoBg: "Fondo de información"
+    infoFg: "Texto de información"
+    infoWarnBg: "Fondo de advertencias"
+    infoWarnFg: "Texto de advertencias"
+    cwBg: "Fondo del botón CW"
+    cwFg: "Texto del botón CW"
+    cwHoverBg: "Fondo del botón CW (hover)"
+    toastBg: "Fondo de notificaciones"
+    toastFg: "Texto de notificaciones"
+    buttonBg: "Fondo de botón"
+    buttonHoverBg: "Fondo de botón (hover)"
+    inputBorder: "Borde de los campos de entrada"
+    listItemHoverBg: "Fondo de elemento de listas (hover)"
+    driveFolderBg: "Fondo de capeta del drive"
+    wallpaperOverlay: "Transparencia del fondo de pantalla"
+    badge: "Medalla"
+    messageBg: "Fondo de chat"
+    accentDarken: "Acento (oscuro)"
+    accentLighten: "Acento (claro)"
+    fgHighlighted: "Texto resaltado"
 _sfx:
  note: "Notas"
  noteMy: "Nota (a mí mismo)"
@@ -636,6 +710,7 @@ _widgets:
  rss: "Lector RSS"
  activity: "Actividad"
  photos: "Fotos"
+  digitalClock: "Reloj digital"
 _cw:
  hide: "Ocultar"
  show: "Ver más"
@@ -1089,4 +1164,14 @@ _notification:
  youReceivedFollowRequest: "Has mandado una solicitud de seguimiento"
  yourFollowRequestAccepted: "Tu solicitud de seguimiento fue aceptada"
  youWereInvitedToGroup: "Invitado al grupo"
-
+_deck:
+  alwaysShowMainColumn: "Siempre mostrar la columna principal"
+  columnAlign: "Alinear columnas"
+  _columns:
+    widgets: "Widgets"
+    notifications: "Notificaciones"
+    tl: "Linea de tiempo"
+    antenna: "Antenas"
+    list: "Listas"
+    mentions: "Menciones"
+    direct: "Mensaje directo"
--- a/locales/fr-FR.yml
+++ b/locales/fr-FR.yml
@@ -123,7 +123,7 @@ wallpaper: "Fond d’écran"
 setWallpaper: "Définir le fond d’écran"
 removeWallpaper: "Supprimer le fond d’écran"
 searchWith: "Recherche : {q}"
-youHaveNoLists: "Vous n'avez aucune liste"
+youHaveNoLists: "Vous n’avez aucune liste"
 followConfirm: "Êtes-vous sûr·e de vouloir suivre {name} ?"
 proxyAccount: "Compte proxy"
 proxyAccountDescription: "Un compte proxy se comporte, dans certaines conditions, comme un·e abonné·e distant·e pour les utilisateurs d'autres instances. Par exemple, quand un·e utilisateur·rice ajoute un·e utilisateur·rice distant·e à une liste, ses notes ne seront pas visibles sur l'instance si personne ne suit cet·te utilisateur·rice. Le compte proxy va donc suivre cet·te utilisateur·rice pour que ses notes soient acheminées."
@@ -155,8 +155,8 @@ network: "Réseau"
 disk: "Disque"
 instanceInfo: "Informations sur l’instance"
 statistics: "Statistiques"
-clearQueue: "Vider la file d'attente"
-clearQueueConfirmTitle: "Êtes-vous sûr·e de vouloir vider la file d'attente ?"
+clearQueue: "Vider la file d’attente"
+clearQueueConfirmTitle: "Êtes-vous sûr·e de vouloir vider la file d’attente ?"
 clearQueueConfirmText: "Les notes non distribuées ne seront pas livrées. Normalement, vous n'avez PAS besoin d'effectuer cette opération."
 clearCachedFiles: "Vider le cache"
 clearCachedFilesConfirm: "Êtes-vous sûr·e de vouloir vider le cache de fichiers distants ?"
@@ -168,15 +168,15 @@ blockedUsers: "Utilisateur·rice·s bloqué·e·s"
 noUsers: "Il n’y a pas d’utilisateur·rice·s"
 editProfile: "Modifier votre profil"
 noteDeleteConfirm: "Êtes-vous sûr·e de vouloir supprimer cette note ?"
-pinLimitExceeded: "Vous ne pouvez plus épingler d'autres notes."
+pinLimitExceeded: "Vous ne pouvez plus épingler d’autres notes."
 intro: "L’installation de Misskey est terminée ! Veuillez créer un compte administrateur."
 done: "Terminé"
 processing: "Traitement en cours"
 preview: "Prévisualisation"
 default: "Par défaut"
 noCustomEmojis: "Il n'y a pas d’émoji"
-customEmojisOfRemote: "Émojis venant des autres instances"
-noJobs: "Il n'y a aucune tâche planifiée"
+customEmojisOfRemote: "Émojis provenant des autres instances"
+noJobs: "Il n’y a aucune tâche planifiée"
 federating: "En cours de fédération"
 blocked: "Bloqué·e"
 suspended: "Suspendu·e"
@@ -196,7 +196,7 @@ newPasswordRetype: "Répéter le nouveau mot de passe"
 attachFile: "Joindre un fichier"
 more: "Plus !"
 featured: "Tendances"
-usernameOrUserId: "Nom d'utilisateur ou ID utilisateur"
+usernameOrUserId: "Nom d’utilisateur·rice ou ID utilisateur"
 noSuchUser: "Utilisateur·rice non trouvé"
 lookup: "Recherche"
 announcements: "Annonces"
@@ -216,10 +216,10 @@ uploadFromUrlMayTakeTime: "Le téléversement de votre fichier peut prendre un c
 explore: "Découvrir"
 games: "Jeux de Misskey"
 messageRead: "Lus"
-noMoreHistory: "Il n'y a plus d'historique"
+noMoreHistory: "Il n’y a plus d’historique"
 startMessaging: "Commencer à discuter"
 nUsersRead: "Lu par {n} personnes"
-agreeTo: "J'accepte {0}"
+agreeTo: "J’accepte {0}"
 tos: "les conditions d’utilisation"
 start: "Commencer"
 home: "Principal"
@@ -416,13 +416,13 @@ passwordMatched: "Combinaison correcte !"
 passwordNotMatched: "Ne correspond pas"
 signinWith: "Connectez-vous avec {x}"
 signinFailed: "Échec d’authentification. Veuillez vérifier que votre nom d’utilisateur et mot de passe sont corrects."
-tapSecurityKey: "Touchez la clé de sécurité"
+tapSecurityKey: "Appuyez sur votre clé de sécurité"
 or: "OU"
 uiLanguage: "Langue d’affichage de l’interface"
 groupInvited: "Invité au groupe"
 aboutX: "À propos de {x}"
 useOsNativeEmojis: "Utiliser les émojis natifs du système"
-youHaveNoGroups: "Vous n'avez aucune groupe"
+youHaveNoGroups: "Vous n’avez aucun groupe"
 joinOrCreateGroup: "Soyez invité à rejoindre les groupes ou vous pouvez créer votre propre groupe."
 noHistory: "Pas d'historique"
 disableAnimatedMfm: "Désactiver MFM ayant des animations"
@@ -511,9 +511,19 @@ addedRelays: "Relais ajoutés"
 serviceworkerInfo: "Devrait être activé pour les notifications push."
 deletedNote: "Note supprimée"
 invisibleNote: "Note invisible"
+enableInfiniteScroll: "Activer le défilement infini"
 visibility: "Visibilité"
 poll: "Sondage"
 useCw: "Masquer le contenu"
+fixedWidgetsPosition: "Rendre la position du widget fixe"
+enablePlayer: "Activer le lecteur vidéo"
+disablePlayer: "Désactiver le lecteur vidéo"
+expandTweet: "Étendre le tweet"
+themeEditor: "Éditeur de thèmes"
+description: "Description"
+author: "Auteur·rice"
+manage: "Gestion"
+plugins: "Extensions"
 _theme:
  explore: "Explorer les thèmes"
  install: "Installer un thème"
@@ -522,6 +532,28 @@ _theme:
  installed: "{name} a été installé"
  alreadyInstalled: "Ce thème est déjà installé"
  invalid: "Le format du thème n'est pas valide"
+  make: "Créer un thème"
+  base: "Base"
+  defaultValue: "Valeur par défaut"
+  color: "Couleur"
+  func: "Fonction"
+  argument: "Argument"
+  alpha: "Transparence"
+  darken: "Assombrir"
+  keys:
+    bg: "Arrière-plan"
+    fg: "Texte"
+    focus: "Mise au point"
+    indicator: "Indicateur"
+    panel: "Panneau"
+    shadow: "Ombre"
+    header: "Entête"
+    navBg: "Fond de la barre latérale"
+    hashtag: "Hashtags"
+    mention: "Mentionner"
+    renote: "Renote"
+    divider: "Séparateur"
+    messageBg: "Arrière plan de la discussion"
 _sfx:
  note: "Nouvelle note"
  noteMy: "Ma note"
@@ -672,6 +704,7 @@ _visibility:
  specified: "Direct"
  specifiedDescription: "Publier uniquement aux utilisateur·rice·s mentionné·e·s"
  localOnly: "Local seulement"
+  localOnlyDescription: "Caché pour les utilisateurs distant"
 _postForm:
  replyPlaceholder: "Répondre à cette note ..."
  quotePlaceholder: "Citez cette note ..."
@@ -697,10 +730,10 @@ _exportOrImport:
  blockingList: "Bloquer"
  userLists: "Listes"
 _charts:
-  federationInstancesIncDec: "Variation du nombre d'instances"
-  federationInstancesTotal: "Nombre d'instances au total"
+  federationInstancesIncDec: "Variation du nombre des instances fédérées"
+  federationInstancesTotal: "Nombre total des instances fédérées"
  usersIncDec: "Variation du nombre d'utilisateur·rice·s"
-  usersTotal: "Nombre d'utilisateur·rice·s au total"
+  usersTotal: "Nombre des utilisateur·rice·s au total"
  activeUsers: "Utilisateur·rice·s actif·ve·s"
  notesIncDec: "Variation du nombre des notes"
  localNotesIncDec: "Variation du nombre de notes local"
@@ -882,7 +915,7 @@ _pages:
        pushEvent: "Envoyer un évènement"
        _pushEvent:
          event: "Nom de l’évènement"
-          message: "Message à afficher lorsque appuyé"
+          message: "Message à afficher lorsqu’il est activé"
          variable: "Variable à envoyer"
          no-variable: "Rien"
        callAiScript: "Appeler AiScript"
@@ -1079,6 +1112,7 @@ _notification:
  youGotMention: "{name} vous a mentionné"
  youGotReply: "Réponse de {name}"
  youGotQuote: "Cité·e par {name}"
+  youRenoted: "{name} vous a Renoté"
  youGotPoll: "{name} a participé à votre sondage"
  youGotMessagingMessageFromUser: "{name} vous envoyé un message"
  youGotMessagingMessageFromGroup: "Un message a été envoyé au groupe {name}"
@@ -1086,4 +1120,14 @@ _notification:
  youReceivedFollowRequest: "Vous avez reçu une demande d’abonnement"
  yourFollowRequestAccepted: "Votre demande d’abonnement a été accepté"
  youWereInvitedToGroup: "Invité au groupe"
-
+_deck:
+  alwaysShowMainColumn: "Toujours afficher la colonne principale"
+  columnAlign: "Aligner les colonnes"
+  _columns:
+    widgets: "Widgets"
+    notifications: "Notifications"
+    tl: "Fil"
+    antenna: "Antennes"
+    list: "Listes"
+    mentions: "Mentions"
+    direct: "Direct"
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -515,6 +515,20 @@ enableInfiniteScroll: "自動でもっと見る"
 visibility: "公開範囲"
 poll: "アンケート"
 useCw: "内容を隠す"
+fixedWidgetsPosition: "ウィジェットの位置を固定する"
+enablePlayer: "プレイヤーを開く"
+disablePlayer: "プレイヤーを閉じる"
+expandTweet: "ツイートを展開する"
+themeEditor: "テーマエディター"
+description: "説明"
+author: "作者"
+leaveConfirm: "未保存の変更があります。破棄しますか？"
+manage: "管理"
+plugins: "プラグイン"
+pluginInstallWarn: "信頼できないプラグインはインストールしないでください。"
+deck: "デッキ"
+undeck: "デッキ解除"
+useBlurEffectForModal: "モーダルにぼかし効果を使用"

 _theme:
  explore: "テーマを探す"
@@ -524,6 +538,70 @@ _theme:
  installed: "{name}をインストールしました"
  alreadyInstalled: "そのテーマは既にインストールされています"
  invalid: "テーマの形式が間違っています"
+  make: "テーマを作る"
+  base: "ベース"
+  addConstant: "定数を追加"
+  constant: "定数"
+  defaultValue: "デフォルト値"
+  color: "色"
+  refProp: "プロパティを参照"
+  refConst: "定数を参照"
+  key: "キー"
+  func: "関数"
+  funcKind: "関数の種類"
+  argument: "引数"
+  basedProp: "元にするプロパティの名前"
+  alpha: "不透明度"
+  darken: "暗さ"
+  lighten: "明るさ"
+  inputConstantName: "定数名を入力してください"
+  importInfo: "ここにテーマコードを貼り付けて、エディターにインポートできます"
+  deleteConstantConfirm: "定数 {const} を削除しても良いですか？"
+
+  keys:
+    accent: "アクセント"
+    bg: "背景"
+    fg: "文字"
+    focus: "フォーカス"
+    indicator: "インジケーター"
+    panel: "パネル"
+    shadow: "影"
+    header: "ヘッダー"
+    navBg: "サイドバーの背景"
+    navFg: "サイドバーの文字"
+    navHoverFg: "サイドバー文字(ホバー)"
+    navActive: "サイドバー文字(アクティブ)"
+    navIndicator: "サイドバーのインジケーター"
+    link: "リンク"
+    hashtag: "ハッシュタグ"
+    mention: "メンション"
+    mentionMe: "あなた宛てメンション"
+    renote: "Renote"
+    modalBg: "モーダルの背景"
+    divider: "分割線"
+    scrollbarHandle: "スクロールバーの取っ手"
+    scrollbarHandleHover: "スクロールバーの取っ手（ホバー)"
+    dateLabelFg: "日付ラベルの文字"
+    infoBg: "情報の背景"
+    infoFg: "情報の文字"
+    infoWarnBg: "警告の背景"
+    infoWarnFg: "警告の文字"
+    cwBg: "CW ボタンの背景"
+    cwFg: "CW ボタンの文字"
+    cwHoverBg: "CW ボタンの背景 (ホバー)"
+    toastBg: "通知トーストの背景"
+    toastFg: "通知トーストの文字"
+    buttonBg: "ボタンの背景"
+    buttonHoverBg: "ボタンの背景 (ホバー)"
+    inputBorder: "入力ボックスの縁取り"
+    listItemHoverBg: "リスト項目の背景 (ホバー)"
+    driveFolderBg: "ドライブフォルダーの背景"
+    wallpaperOverlay: "壁紙のオーバーレイ"
+    badge: "バッジ"
+    messageBg: "チャットの背景"
+    accentDarken: "アクセント (暗め)"
+    accentLighten: "アクセント (明るめ)"
+    fgHighlighted: "強調された文字"

 _sfx:
  note: "ノート"
@@ -647,6 +725,7 @@ _widgets:
  rss: "RSSリーダー"
  activity: "アクティビティ"
  photos: "フォト"
+  digitalClock: "デジタル時計"

 _cw:
  hide: "隠す"
@@ -1125,3 +1204,16 @@ _notification:
  yourFollowRequestAccepted: "フォローリクエストが承認されました"
  youWereInvitedToGroup: "グループに招待されました"

+_deck:
+  alwaysShowMainColumn: "常にメインカラムを表示"
+  columnAlign: "カラムの寄せ"
+  addColumn: "カラムを追加"
+
+  _columns:
+    widgets: "ウィジェット"
+    notifications: "通知"
+    tl: "タイムライン"
+    antenna: "アンテナ"
+    list: "リスト"
+    mentions: "あなた宛て"
+    direct: "ダイレクト"
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@@ -352,6 +352,9 @@ notFoundDescription: "指定されたURLに該当するページはあらへん
 close: "さいなら"
 joinedGroups: "参加しとるグループ"
 invites: "来てや"
+_theme:
+  keys:
+    renote: "Renote"
 _sfx:
  note: "ノート"
  notification: "通知"
@@ -431,4 +434,10 @@ _pages:
      array: "リスト"
 _notification:
  youWereFollowed: "フォローされたで"
-
+_deck:
+  _columns:
+    notifications: "通知"
+    tl: "タイムライン"
+    antenna: "アンテナ"
+    list: "リスト"
+    mentions: "あんた宛て"
--- a/locales/kab-KAB.yml
+++ b/locales/kab-KAB.yml
@@ -0,0 +1,86 @@
+---
+_lang_: "Taqbaylit"
+monthAndDay: "{day}/{month}"
+search: "Nadi"
+notifications: "Ilɣuyen"
+username: "Isem n umseqdac"
+password: "Awal uffir"
+ok: "IH"
+settings: "Iɣewwaṛen"
+profile: "Amaɣnu"
+save: "Sekles"
+delete: "Kkes"
+addToList: "Rnu ɣer tebdart"
+reply: "Err"
+loadMore: "Wali ugar"
+youGotNewFollower: "Yeṭṭafaṛ-ik·em-id"
+mention: "Bder"
+import: "Kter"
+export: "Sifeḍ"
+files: "Ifuyla"
+download: "Sider"
+lists: "Tibdarin"
+noLists: "Ulac ɣur-k·m ula d yiwet n tabdart"
+following: "Ig ṭṭafaṛ"
+followers: "Imeḍfaṛen"
+followsYou: "Yeṭṭafaṛ-ik·em-id"
+createList: "Snulfu-d tabdart"
+enterListName: "Isem n tebdart"
+follow: "Ḍfeṛ"
+you: "Kečči·mmi"
+selectList: "Fren tabdart"
+youHaveNoLists: "Ulac ɣur-k·m ula d yiwet n tabdart"
+remove: "Kkes"
+userList: "Tibdarin"
+uiLanguage: "Tutlayt n wegrudem"
+_theme:
+  keys:
+    mention: "Bder"
+_sfx:
+  notification: "Ilɣuyen"
+_widgets:
+  notifications: "Ilɣuyen"
+_cw:
+  show: "Wali ugar"
+_visibility:
+  followers: "Imeḍfaṛen"
+_profile:
+  username: "Isem n umseqdac"
+_exportOrImport:
+  followingList: "Ig ṭṭafaṛ"
+  muteList: "Sgugem"
+  blockingList: "Seḥbes"
+  userLists: "Tibdarin"
+_pages:
+  font: "Tasefsit"
+  fontSerif: "Serif"
+  fontSansSerif: "Sans Serif"
+  eyeCatchingImageRemove: "Kkes tugna i d-ijebden"
+  selectType: "Fren anaw"
+  contentBlocks: "Agbur"
+  inputBlocks: "Anekcum"
+  specialBlocks: "Uzzig"
+  script:
+    categories:
+      list: "Tibdarin"
+    blocks:
+      _join:
+        arg1: "Tibdarin"
+      _randomPick:
+        arg1: "Tibdarin"
+      _dailyRandomPick:
+        arg1: "Tibdarin"
+      _seedRandomPick:
+        arg2: "Tibdarin"
+      _pick:
+        arg1: "Tibdarin"
+      _listLen:
+        arg1: "Tibdarin"
+    types:
+      array: "Tibdarin"
+_notification:
+  youWereFollowed: "Yeṭṭafaṛ-ik·em-id"
+_deck:
+  _columns:
+    notifications: "Ilɣuyen"
+    list: "Tibdarin"
--- a/locales/kn-IN.yml
+++ b/locales/kn-IN.yml
@@ -65,4 +65,8 @@ _profile:
  username: "ಬಳಕೆಹೆಸರು"
 _notification:
  youWereFollowed: "ಹಿಂಬಾಲಿಸಿದರು"
-
+_deck:
+  _columns:
+    notifications: "ಅಧಿಸೂಚನೆಗಳು"
+    tl: "ಸಮಯಸಾಲು"
+    mentions: "ಹೆಸರಿಸಿದ"
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -45,6 +45,7 @@ loadMore: "더 보기"
 youGotNewFollower: "새로운 팔로워가 있습니다"
 receiveFollowRequest: "새로운 팔로우 요청이 있습니다"
 followRequestAccepted: "팔로우가 수락되었습니다"
+mention: "멘션"
 mentions: "받은 멘션"
 directNotes: "다이렉트 노트"
 importAndExport: "가져오기와 내보내기"
@@ -104,6 +105,7 @@ suspendConfirm: "이 계정을 정지하시겠습니까?"
 unsuspendConfirm: "이 계정의 정지를 해제하시겠습니까?"
 selectList: "리스트 선택"
 customEmojis: "커스텀 이모지"
+emoji: "이모지"
 emojiName: "이모지 이름"
 emojiUrl: "이모지 URL"
 addEmoji: "이모지 추가"
@@ -506,6 +508,26 @@ relays: "릴레이"
 addRelay: "릴레이 추가"
 inboxUrl: "Inbox 주소"
 addedRelays: "추가된 릴레이"
+serviceworkerInfo: "푸시 알림을 수행하려면 활성화해야 합니다."
+deletedNote: "삭제된 노트"
+invisibleNote: "비공개 노트"
+enableInfiniteScroll: "자동으로 좀 더 보기"
+visibility: "공개 범위"
+poll: "투표"
+useCw: "내용 숨기기"
+fixedWidgetsPosition: "위젯의 위치 고정"
+enablePlayer: "플레이어 열기"
+disablePlayer: "플레이어 닫기"
+expandTweet: "트윗 확장하기"
+themeEditor: "테마 에디터"
+description: "설명"
+author: "작성자"
+leaveConfirm: "저장하지 않은 변경사항이 있습니다. 취소하시겠습니까?"
+manage: "관리"
+plugins: "플러그인"
+pluginInstallWarn: "신뢰할 수 없는 플러그인은 설치하지 마십시오."
+deck: "덱"
+undeck: "덱 해제"
 _theme:
  explore: "테마 찾아보기"
  install: "테마 설치"
@@ -514,6 +536,22 @@ _theme:
  installed: "{name} 테마가 설치되었습니다"
  alreadyInstalled: "이미 설치된 테마입니다"
  invalid: "테마 형식이 올바르지 않습니다"
+  make: "테마 만들기"
+  base: "베이스"
+  addConstant: "상수 추가"
+  constant: "상수"
+  defaultValue: "기본값"
+  color: "색"
+  refProp: "프로퍼티를 참조"
+  refConst: "상수를 참조"
+  key: "키"
+  func: "함수"
+  funcKind: "함수 종류"
+  argument: "매개변수"
+  keys:
+    mention: "멘션"
+    renote: "Renote"
+    divider: "구분선"
 _sfx:
  note: "새 노트"
  noteMy: "내 노트"
@@ -664,6 +702,7 @@ _visibility:
  specified: "다이렉트"
  specifiedDescription: "지정한 유저에게만 공개"
  localOnly: "로컬에만"
+  localOnlyDescription: "리모트 유저에게 보이지 않기"
 _postForm:
  replyPlaceholder: "이 노트에 답글..."
  quotePlaceholder: "이 노트를 인용..."
@@ -1067,6 +1106,21 @@ _relayStatus:
  accepted: "승인됨"
  rejected: "거절됨"
 _notification:
+  fileUploaded: "파일이 업로드되었습니다"
+  youGotMention: "{name}님이 멘션함"
+  youGotReply: "{name}님이 답글함"
+  youGotQuote: "{name}님이 인용함"
+  youRenoted: "{name}님이 Renote"
+  youGotPoll: "{name}님이 투표함"
  youWereFollowed: "새로운 팔로워가 있습니다"
+  youReceivedFollowRequest: "새로운 팔로우 요청이 있습니다"
+  yourFollowRequestAccepted: "팔로우 요청이 수락되었습니다"
  youWereInvitedToGroup: "그룹에 초대되었습니다"
-
+_deck:
+  _columns:
+    notifications: "알림"
+    tl: "타임라인"
+    antenna: "안테나"
+    list: "리스트"
+    mentions: "받은 멘션"
+    direct: "다이렉트"
--- a/locales/nl-NL.yml
+++ b/locales/nl-NL.yml
@@ -1,3 +1,2 @@
 ---
 _lang_: "Nederlands"
-
--- a/locales/no-NO.yml
+++ b/locales/no-NO.yml
@@ -1,3 +1,2 @@
 ---
 _lang_: "Norsk Bokmål"
-
--- a/locales/pl-PL.yml
+++ b/locales/pl-PL.yml
@@ -1,3 +1,2 @@
 ---
 _lang_: "język polski"
-
--- a/locales/pt-PT.yml
+++ b/locales/pt-PT.yml
@@ -1,3 +1,2 @@
 ---
 _lang_: "Português"
-
--- a/locales/ru-RU.yml
+++ b/locales/ru-RU.yml
@@ -1,9 +1,13 @@
 ---
 _lang_: "Русский язык"
+introMisskey: "Добро пожаловать! Misskey - это децентрализованный сервис микроблогов с открытым исходным кодом.\nСоздавайте «записи», чтобы поделиться происходящим или рассказать всем о себе 📡\nТакже Вы можете добавить быструю реакцию на все записи с помощью функции «реакция» 👍\nОткройте для себя новый мир 🚀"
+monthAndDay: "{day}.{month}"
 search: "Поиск"
 notifications: "Уведомления"
 password: "Пароль"
+fetchingAsApObject: "Запрос на федерацию"
 ok: "Окей"
+gotIt: "Отлично"
 cancel: "Отмена"
 instance: "Экземпляр"
 settings: "Настройки"
@@ -34,4 +38,7 @@ _widgets:
  timeline: "Лента"
 _cw:
  show: "Показать еще"
-
+_deck:
+  _columns:
+    notifications: "Уведомления"
+    tl: "Лента"
--- a/locales/ug-CN.yml
+++ b/locales/ug-CN.yml
@@ -1,4 +1,3 @@
 ---
 _lang_: "ياپونچە"
 search: "ئىزدەش"
-
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@@ -1,6 +1,6 @@
 ---
 _lang_: "中文(简体)"
-introMisskey: "欢迎！Misskey是一个开源的分散型SNS服务。\n通过「帖子」来分享现在发生的事情吧！📡\n「反应」功能，可以让你快速的对大家的「帖子」来表达感情👍\n一起来探索新的世界吧！🚀"
+introMisskey: "欢迎！Misskey是一个开源的、去中心化的“微博客”服务。\n通过编写「帖文」来和大家分享你的以及你周围的事情吧！📡\n通过「回应」功能，可以让你快速地对大家的帖文表达反馈👍\n来探索新的世界吧！🚀"
 monthAndDay: "{month}月 {day}日"
 search: "搜索"
 notifications: "通知"
@@ -11,8 +11,8 @@ ok: "OK"
 gotIt: "我明白了"
 cancel: "取消"
 enterUsername: "输入用户名"
-renotedBy: "由 {user} 转贴"
-noNotes: "没有投稿"
+renotedBy: "{user} 转贴了"
+noNotes: "没有帖文"
 noNotifications: "无通知"
 instance: "实例"
 settings: "设置"
@@ -35,19 +35,19 @@ unpin: "取消置顶"
 copyContent: "复制内容"
 copyLink: "复制链接"
 delete: "删除"
-deleteAndEdit: "删除和编辑"
-deleteAndEditConfirm: "要删除此帖并再次编辑吗？对此帖的所有回应，转发和回复也将被删除。"
+deleteAndEdit: "删除并编辑"
+deleteAndEditConfirm: "要删除此帖并再次编辑吗？对此帖的所有回应、转发和回复也将被删除。"
 addToList: "添加至列表"
 sendMessage: "发送"
 copyUsername: "复制用户名"
 reply: "回复"
 loadMore: "查看更多"
 youGotNewFollower: "你有新的关注者"
-receiveFollowRequest: "收到关注请求"
-followRequestAccepted: "同意关注请求"
+receiveFollowRequest: "您收到了关注请求"
+followRequestAccepted: "您的关注请求被通过了"
 mention: "提及"
 mentions: "提及"
-directNotes: "指定用户可见"
+directNotes: "私信"
 importAndExport: "导入和导出"
 import: "导入"
 export: "导出"
@@ -515,6 +515,19 @@ enableInfiniteScroll: "启用自动滚动页面模式"
 visibility: "可见性"
 poll: "调查问卷"
 useCw: "隐藏内容"
+fixedWidgetsPosition: "固定小工具的位置"
+enablePlayer: "打开播放器"
+disablePlayer: "关闭播放器"
+expandTweet: "展开推文"
+themeEditor: "主题编辑器"
+description: "描述"
+author: "作者"
+leaveConfirm: "存在未保存的更改。要放弃更改吗？"
+manage: "管理"
+plugins: "插件"
+pluginInstallWarn: "请不要安装不明来源的插件"
+deck: "Deck"
+undeck: "取消Deck"
 _theme:
  explore: "寻找主题"
  install: "安装主题"
@@ -523,6 +536,67 @@ _theme:
  installed: "{name} 已安装"
  alreadyInstalled: "此主题已经安装"
  invalid: "主题格式错误"
+  make: "主题制作"
+  base: "基于"
+  addConstant: "添加常量"
+  constant: "常量"
+  defaultValue: "默认值"
+  color: "颜色"
+  refProp: "查看属性"
+  refConst: "查看常量"
+  key: "主要"
+  func: "函数"
+  funcKind: "功能类型"
+  argument: "参数"
+  basedProp: "基于的属性名称"
+  alpha: "不透明度"
+  darken: "暗色"
+  lighten: "亮色"
+  inputConstantName: "请输入常量名称"
+  importInfo: "您可以在此处粘贴主题代码，将其导入到编辑器中"
+  deleteConstantConfirm: "确定要删除常量{const}吗?"
+  keys:
+    accent: "强调色"
+    bg: "背景"
+    fg: "文本"
+    focus: "聚焦"
+    indicator: "标记"
+    panel: "面板"
+    shadow: "阴影"
+    header: "顶栏"
+    navBg: "侧边栏背景"
+    navFg: "侧栏文本"
+    navHoverFg: "侧栏文本（悬停）"
+    navActive: "侧栏文本（活动）"
+    navIndicator: "侧栏标记"
+    link: "链接"
+    hashtag: "话题标签"
+    mention: "提及"
+    mentionMe: "提及"
+    renote: "转发"
+    modalBg: "模块背景"
+    divider: "分割线"
+    scrollbarHandle: "滚动条"
+    scrollbarHandleHover: "滚动条（悬停）"
+    dateLabelFg: "日期标签文字"
+    infoBg: "信息背景"
+    infoFg: "信息文本"
+    infoWarnBg: "警告背景"
+    infoWarnFg: "警告文本"
+    cwBg: "CW 按钮背景"
+    cwFg: "CW 按钮文本"
+    cwHoverBg: "CW 按钮背景（悬停）"
+    toastBg: "吐司提示背景"
+    toastFg: "土司提示文本"
+    buttonBg: "按钮背景"
+    buttonHoverBg: "按钮背景（悬停）"
+    inputBorder: "输入框边框"
+    listItemHoverBg: "下拉列表项目背景（悬停）"
+    driveFolderBg: "驱动器文件夹背景"
+    wallpaperOverlay: "壁纸叠加层"
+    badge: "徽章"
+    messageBg: "聊天背景"
+    fgHighlighted: "高亮显示文本"
 _sfx:
  note: "帖子"
  noteMy: "我的帖子"
@@ -551,7 +625,7 @@ _tutorial:
  step1_1: "欢迎！"
  step1_2: "这个页面叫做「时间线」，它会按照时间顺序显示所有你「关注」的人所发的「帖子」。"
  step1_3: "如果你并没有发布任何帖子，也没有关注其他的人，你的时间线页面应当什么都没有显示。"
-  step2_1: "在你想发布一些帖子之前，让我们先进行一下个人资料设置。"
+  step2_1: "在您想要发帖或关注其他人之前，请先设置一下个人资料吧。"
  step2_2: "如果别人能够更加的了解你，关注你的概率也会得到提升。"
  step3_1: "已经设置完个人资料了吗？"
  step3_2: "那么接下来，试着写一些什么东西来发布吧。你可以通过点击屏幕上的铅笔图标来打开投稿页面。"
@@ -636,6 +710,7 @@ _widgets:
  rss: "RSS阅读器"
  activity: "活动"
  photos: "照片"
+  digitalClock: "数字时钟"
 _cw:
  hide: "隐藏"
  show: "查看更多"
@@ -1085,8 +1160,18 @@ _notification:
  youGotPoll: "来自{name}的投票"
  youGotMessagingMessageFromUser: "来自{name}的聊天"
  youGotMessagingMessageFromGroup: "来自{name}的群聊"
-  youWereFollowed: "您有新的关注者"
+  youWereFollowed: "关注了你。"
  youReceivedFollowRequest: "您有新的关注请求"
  yourFollowRequestAccepted: "您的关注请求已通过"
  youWereInvitedToGroup: "您有新的群组邀请"
-
+_deck:
+  alwaysShowMainColumn: "总是显示主列"
+  columnAlign: "列对齐"
+  _columns:
+    widgets: "小部件"
+    notifications: "通知"
+    tl: "时间线"
+    antenna: "天线"
+    list: "列表"
+    mentions: "提及"
+    direct: "指定用户"
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@@ -1,5 +1,6 @@
 ---
-_lang_: "中文(繁体)"
+_lang_: "中文（繁體）"
+introMisskey: "歡迎！ Misskey是一個開源的去中心化的社群網站。\n通過「貼文」來分享現在發生的事情吧！ 📡\n「反應」功能，可以讓你快速的對大家的「帖子」來表達感情👍\n一起來探索新的世界吧！ 🚀"
 monthAndDay: "{month}月 {day}日"
 search: "搜尋"
 notifications: "通知"
@@ -11,8 +12,9 @@ gotIt: "知道了"
 cancel: "取消"
 enterUsername: "輸入用戶名"
 renotedBy: "由{user}轉發"
-noNotes: "沒有筆記"
+noNotes: "貼文不可用。"
 noNotifications: "沒有通知"
+instance: "實例"
 settings: "設定"
 profile: "個人檔案"
 timeline: "時間軸"
@@ -33,29 +35,32 @@ unpin: "取消置頂"
 copyContent: "複製內容"
 copyLink: "複製連結"
 delete: "刪除"
+deleteAndEdit: "刪除並編輯"
+deleteAndEditConfirm: "要刪除並再次編輯嗎？此貼文的所有反應，轉發和回覆也將會消失。"
 addToList: "添加至清單"
 sendMessage: "發送訊息"
 copyUsername: "複製用戶名"
 reply: "回覆"
-loadMore: "載入更多"
+loadMore: "瀏覽更多"
 youGotNewFollower: "您有新的追隨者"
 receiveFollowRequest: "收到追隨請求"
 followRequestAccepted: "追隨請求已接受"
+mention: "提及"
 mentions: "提及"
 importAndExport: "匯入 / 匯出"
 import: "匯入"
 export: "匯出"
 files: "檔案"
 download: "下載"
-driveFileDeleteConfirm: "確定要刪除檔案「{name}」嗎？附加此檔案的筆記也會跟著不見。"
+driveFileDeleteConfirm: "確定要刪除檔案「{name}」嗎？使用此附件的貼文也會跟著消失。"
 unfollowConfirm: "確定要取消對{name}的追隨嗎？"
 exportRequested: "已請求匯出。這可能會花一點時間。結束後檔案將會被放到雲端裡。"
 importRequested: "已請求匯入。這可能會花一點時間"
 lists: "清單"
 noLists: "沒有清單"
-note: "筆記"
+note: "貼文"
 notes: "筆記"
-following: "關注中"
+following: "追隨中"
 followers: "追隨者"
 followsYou: "追隨你的人"
 createList: "建立清單"
@@ -72,15 +77,16 @@ followRequests: "追隨請求"
 unfollow: "取消追隨"
 followRequestPending: "追隨許可批准中"
 enterEmoji: "輸入表情符號"
-renote: "轉發筆記"
-unrenote: "取消轉發筆記"
+renote: "轉發貼文"
+unrenote: "取消轉發貼文"
 quote: "引用"
-pinnedNote: "已置頂筆記"
+pinnedNote: "已置頂的貼文"
 you: "您"
 clickToShow: "點擊查看"
 sensitive: "敏感內容"
 add: "新增"
 reaction: "反應"
+reactionSettingDescription: "置頂「反應」表情符號\n"
 rememberNoteVisibility: "記住筆記隱私設定"
 attachCancel: "移除附件"
 markAsSensitive: "標記為敏感內容"
@@ -98,25 +104,29 @@ suspendConfirm: "確定凍結此帳號？"
 unsuspendConfirm: "確定解凍此帳號？"
 selectList: "選擇清單"
 customEmojis: "自訂表情符號"
+emoji: "表情符號"
 emojiName: "表情符號名稱"
 emojiUrl: "表情符號URL"
 addEmoji: "新增表情符號"
+settingGuide: "推介設定"
 flagAsBot: "此帳戶是Bot"
 flagAsCat: "此帳戶是Cat"
-autoAcceptFollowed: "自動許可關注"
+autoAcceptFollowed: "自動許可追隨"
 addAcount: "新增帳戶"
 loginFailed: "登入失敗"
 general: "一般"
 wallpaper: "壁紙"
+setWallpaper: "設定桌布"
 removeWallpaper: "移除壁紙"
 searchWith: "搜尋: {q}"
 youHaveNoLists: "你沒有任何清單"
-followConfirm: "你真的要關注{name}嗎？"
+followConfirm: "你真的要追隨{name}嗎？"
 host: "主機"
 selectUser: "選擇用戶"
 recipient: "收件人"
 annotation: "註解"
 federation: "整合"
+instances: "實例"
 latestStatus: "最後狀態"
 storageUsage: "已使用容量"
 charts: "圖表"
@@ -127,29 +137,39 @@ software: "軟體"
 version: "版本"
 withNFiles: "{n}個檔案"
 monitor: "監視器"
+cpuAndMemory: "CPU及記憶體用量"
 network: "網路"
+instanceInfo: "實例資訊"
 statistics: "統計"
 clearQueue: "清除佇列"
 clearQueueConfirmTitle: "確定要清除佇列嗎？"
 clearCachedFiles: "清除快取資料"
+blockedInstances: "已封鎖的實例"
+blockedInstancesDescription: "請逐行輸入需要封鎖的實例。已封鎖的實例將無法與本實例進行通訊。"
 muteAndBlock: "禁言 / 封鎖"
 mutedUsers: "已禁言用戶"
 blockedUsers: "已封鎖用戶"
 noUsers: "無用戶"
 editProfile: "編輯個人檔案"
-noteDeleteConfirm: "確定刪除此筆記嗎？"
-pinLimitExceeded: "不能再置頂更多筆記了"
+noteDeleteConfirm: "確定刪除此貼文嗎？"
+pinLimitExceeded: "不能再置頂更多的貼文了"
 intro: "Misskey安裝作業完成！請創立管理員用戶"
 done: "完成"
 processing: "處理中"
 preview: "預覽"
+default: "預設"
 noCustomEmojis: "沒有表情符號"
+customEmojisOfRemote: "來自其他實例的表情符號"
 federating: "整合檢索中"
 blocked: "已封鎖"
 suspended: "已凍結"
 all: "全部"
 subscribing: "訂閱中"
+publishing: "現正直播"
 notResponding: "沒有回應"
+instanceFollowing: "追蹤實例"
+instanceFollowers: "追蹤實例"
+instanceUsers: "用戶"
 changePassword: "修改密碼"
 security: "安全性"
 retypedNotMatch: "不相符的輸入內容"
@@ -171,6 +191,8 @@ messaging: "傳送訊息"
 upload: "上傳"
 fromDrive: "從雲端"
 fromUrl: "從URL"
+uploadFromUrl: "從網址上傳"
+uploadFromUrlMayTakeTime: "還需要一些時間才能完成上傳。"
 explore: "探索"
 games: "Misskey 遊戲"
 messageRead: "已讀"
@@ -181,23 +203,33 @@ tos: "使用條款"
 start: "開始"
 home: "首頁"
 activity: "動態"
+images: "圖片"
 birthday: "生日"
 yearsOld: "{age}歲"
 registeredDate: "註冊日期"
 location: "位置"
 theme: "外觀主題"
+light: "淺色"
+dark: "灰暗"
 lightThemes: "明亮主題"
 darkThemes: "灰暗主題"
 drive: "雲端硬碟"
+fileName: "檔案名稱"
 selectFile: "選擇檔案"
 selectFiles: "選擇檔案"
+selectFolder: "選擇資料夾"
+selectFolders: "選擇資料夾"
 renameFile: "重新命名檔案"
+folderName: "資料夾名稱"
 createFolder: "新增資料夾"
 renameFolder: "重新命名資料夾"
 deleteFolder: "刪除資料夾"
 addFile: "添加檔案"
 emptyDrive: "雲端硬碟為空"
 emptyFolder: "空的資料夾"
+unableToDelete: "無法刪除"
+inputNewFileName: "輸入檔案名稱"
+inputNewFolderName: "輸入新資料夾的名稱"
 copyUrl: "複製URL"
 rename: "重新命名"
 avatar: "頭像"
@@ -208,9 +240,12 @@ reload: "重新載入"
 doNothing: "無視"
 reloadConfirm: "確定要重新嘗試嗎？"
 watch: "關注"
-unwatch: "取消關注"
+unwatch: "取消追隨"
 accept: "接受"
 reject: "拒絕"
+normal: "正常"
+instanceName: "實例名稱"
+instanceDescription: "實例描述"
 maintainerName: "管理員名稱"
 maintainerEmail: "管理員信箱"
 tosUrl: "服務條款URL"
@@ -221,6 +256,7 @@ dayX: "{day}天"
 monthX: "{month}月"
 yearX: "{year}年"
 pages: "頁面"
+integration: "整合"
 connectSerice: "連線"
 disconnectSerice: "中斷連線"
 enableLocalTimeline: "開啟本地時間軸"
@@ -230,11 +266,14 @@ enableRegistration: "開啟新用戶註冊"
 invite: "邀請"
 proxyRemoteFiles: "代理遠程檔案"
 driveCapacityPerLocalAccount: "每個本地用戶的雲端容量"
+driveCapacityPerRemoteAccount: "每個非本地用戶的雲端容量"
 inMb: "以Mbps為單位"
 iconUrl: "圖像URL"
 bannerUrl: "橫幅圖片URL"
 basicInfo: "基本資訊"
 pinnedUsers: "置頂用戶"
+hcaptcha: "hCaptcha"
+enableHcaptcha: "啟用 hCaptcha"
 hcaptchaSiteKey: "網站金鑰"
 hcaptchaSecretKey: "金鑰"
 recaptcha: "reCAPTCHA"
@@ -242,6 +281,9 @@ enableRecaptcha: "啟用 reCAPTCHA"
 recaptchaSiteKey: "網站金鑰"
 recaptchaSecretKey: "金鑰"
 name: "名稱"
+antennaKeywords: "包含的關鍵字"
+antennaExcludeKeywords: "排除關鍵字"
+notifyAntenna: "通知我有新的貼文"
 serviceworker: "ServiceWorker"
 enableServiceworker: "開啟 ServiceWorker"
 caseSensitive: "區分大小寫"
@@ -249,26 +291,46 @@ notesAndReplies: "貼文與回覆"
 withFiles: "附件"
 silence: "禁言"
 silenceConfirm: "確定要禁言此用戶嗎？"
+unsilence: "解除禁言"
 unsilenceConfirm: "確定要解除禁言嗎？"
 popularUsers: "熱門用戶"
 recentlyUpdatedUsers: "最近發文的用戶"
 recentlyRegisteredUsers: "新加入用戶"
 recentlyDiscoveredUsers: "最近發現的用戶"
+exploreUsersCount: "有{count}個用戶"
+exploreFediverse: "探索聯邦世界"
+popularTags: "熱門標籤"
 userList: "清單"
+about: "資訊"
+aboutMisskey: "關於 Misskey"
+misskeyTranslation: "幫助我們為Misskey的翻譯工作出一分力："
+misskeyDonate: "向Misskey捐款以支援我們開發工作："
+morePatrons: "感激你們的支持、 幫助。 🥰"
+patrons: "贊助者"
+administrator: "管理員"
+token: "令牌"
+twoStepAuthentication: "雙重身份驗證"
+moderator: "板主"
+nUsersMentioned: "提到了{n}"
+securityKey: "安全金鑰"
+securityKeyName: "金鑰名稱"
+registerSecurityKey: "註冊安全金鑰"
+lastUsed: "最後活躍時間"
+unregister: "刪除賬戶"
 passwordLessLogin: "設置無密碼登入"
 resetPassword: "重置密碼"
 newPasswordIs: "新密碼為「{password}」"
 autoReloadWhenDisconnected: "和伺服器斷線時自動重新載入"
-autoNoteWatch: "自動關注筆記"
-autoNoteWatchDescription: "收到反應或回覆過的筆記的通知"
+autoNoteWatch: "自動追隨貼文"
+autoNoteWatchDescription: "收到反應或回覆過的貼文的通知"
 reduceUiAnimation: "減少介面的動態視覺"
 share: "分享"
 notFound: "找不到"
 notFoundDescription: "找不到與指定URL回應的頁面"
 uploadFolder: "預設上傳資料夾"
-cacheClear: "清除暫存"
+cacheClear: "清除快取"
 markAsReadAllNotifications: "標記所有通知為已讀"
-markAsReadAllUnreadNotes: "標記所有筆記為已讀"
+markAsReadAllUnreadNotes: "標記所有貼文為已讀"
 markAsReadAllTalkMessages: "標記所有訊息為已讀"
 help: "幫助"
 inputMessageHere: "在此輸入訊息"
@@ -288,9 +350,9 @@ text: "文字"
 enable: "啟用"
 next: "下一步"
 retype: "重新輸入"
-noteOf: "{user}的筆記"
+noteOf: "{user}的貼文"
 inviteToGroup: "邀請至群組"
-maxNoteTextLength: "筆記的字數限制"
+maxNoteTextLength: "貼文的字數限制"
 quoteAttached: "引用"
 quoteQuestion: "是否要引用？"
 noMessagesYet: "沒有訊息"
@@ -303,12 +365,43 @@ available: "可用的"
 unavailable: "不可用的"
 usernameInvalidFormat: "可使用大小寫英文字母、數字和底線"
 tooShort: "過短"
+tooLong: "過長"
+weakPassword: "密碼強度過弱"
+normalPassword: "密碼強度普通"
+strongPassword: "密碼強度堅強"
+passwordMatched: "密碼一致"
+passwordNotMatched: "密碼不一致"
+signinFailed: "登入失敗。 請檢查用戶名和密碼。"
+uiLanguage: "介面語言"
+tags: "標籤"
+fontSize: "字體大小"
+total: "合計"
+clinetSettings: "用戶端設定"
+serverLogs: "伺服器日誌"
+deleteAll: "刪除所有記錄"
 none: "無"
 volume: "音量"
 details: "詳細資訊"
+chooseEmoji: "選擇您的表情符號\n"
+unableToProcess: "操作無法完成"
+recentUsed: "最近使用"
+install: "安裝"
+uninstall: "解除安裝"
+lastUsedDate: "最後上線日期"
+state: "狀態"
+output: "輸出"
+deleteAllFiles: "刪除所有檔案"
+deleteAllFilesConfirm: "要删除所有檔案吗？"
+userSilenced: "該用戶已被禁言。"
+deletedNote: "已删除的貼文"
+_theme:
+  func: "函数"
+  keys:
+    mention: "提及"
+    renote: "轉發貼文"
 _sfx:
-  note: "筆記"
-  noteMy: "我的筆記"
+  note: "貼文"
+  noteMy: "我的貼文"
  notification: "通知"
  chat: "傳送訊息"
 _ago:
@@ -330,7 +423,7 @@ _time:
 _tutorial:
  title: "Misskey使用方法"
  step1_1: "歡迎！"
-  step1_2: "此為「時間軸」頁面，它會按照時間順序顯示你「追隨」的人的「筆記」"
+  step1_2: "此為「時間軸」頁面，它會按照時間順序顯示你「追隨」的人的「貼文」"
  step1_3: "由於你沒有發布任何筆記，也沒有追隨任何人，所以你的時間軸目前是空的。"
  step2_1: "在發文或追隨其他人之前先讓我們設定一下個人資料吧。"
  step2_2: "提供一些關於自己的資訊來讓其他人更有追隨你的意願。"
@@ -339,7 +432,7 @@ _tutorial:
  step3_3: "輸入完內容後，按視窗右上角的按鈕來發文"
  step3_4: "不知道該寫什麼內容嗎？試試看「開始使用Misskey了」如何。"
  step4_1: "筆記發出去了嗎？"
-  step4_2: "如果你的筆記有顯示在時間軸上，就代表已經發文成功。"
+  step4_2: "如果你的貼文有顯示在時間軸上，就代表已經發文成功。"
  step5_1: "現在試試看追隨其他人來讓你的時間軸變得更生動吧。"
  step5_3: "想要追隨其他人，只要點擊他們的頭像並按「追隨」即可。"
  step5_4: "如果使用者的名字旁有鎖頭的圖示，代表他們需要手動核准你的追隨請求。"
@@ -348,14 +441,41 @@ _tutorial:
  step6_3: "在他人的貼文按下「+」的圖示即可選擇想要的表情符號來進行「反應」。"
  step7_1: "以上為Misskey的基本操作說明，教學在此告一段落。辛苦了。"
  step7_2: "歡迎到{help}來瞭解更多Misskey相關介紹。"
+_permissions:
+  "read:blocks": "已封鎖用戶名單"
+  "write:blocks": "編輯已封鎖用戶名單"
+  "read:drive": "存取雲端硬碟\n"
+  "write:drive": "編輯雲端硬碟的檔案"
+  "read:favorites": "瀏覽已收藏"
+  "write:favorites": "編輯收藏清單"
+  "write:following": "追隨/解除追隨"
+  "write:notes": "撰寫或刪除貼文"
+  "read:notifications": "查看通知"
+  "read:reactions": "查看反應"
+  "write:reactions": "編輯反應"
+  "write:votes": "投票"
+_weekday:
+  sunday: "週日"
+  monday: "週一"
+  tuesday: "週二"
+  wednesday: "週三"
+  thursday: "週四"
+  friday: "週五"
+  saturday: "週六"
 _widgets:
  notifications: "通知"
  timeline: "時間軸"
+  clock: "時鐘"
+  rss: "RSS閱讀器"
  activity: "動態"
+  photos: "照片"
 _cw:
-  show: "載入更多"
+  show: "瀏覽更多"
+  files: "{count} 個檔案"
 _poll:
  deadlineTime: "小時"
+  vote: "投票"
+  voted: "已投票"
 _visibility:
  home: "首頁"
  followers: "追隨者"
@@ -363,34 +483,183 @@ _profile:
  name: "名稱"
  username: "用戶名"
 _exportOrImport:
-  followingList: "關注中"
+  followingList: "追隨中"
  muteList: "禁言"
  blockingList: "封鎖"
  userLists: "清單"
+_instanceCharts:
+  cacheSize: "增加或減少快取用量"
+  cacheSizeTotal: "快取大小總計"
 _timelines:
  home: "首頁"
 _rooms:
+  _roomType:
+    default: "預設"
  _furnitures:
    monitor: "監視器"
+    keyboard: "鍵盤"
 _pages:
+  deleted: "頁面已被刪除"
+  like: "喜歡"
+  unlike: "收回喜歡"
+  blocks:
+    image: "圖片"
+    _textareaInput:
+      name: "變數名稱"
+    numberInput: "輸入數值"
+    _numberInput:
+      name: "變數名稱"
+    _canvas:
+      width: "寬度"
+    _counter:
+      text: "標題"
+    _button:
+      text: "標題"
  script:
    categories:
+      value: "數值 "
+      fn: "函数"
+      text: "文本操作"
+      convert: "轉換"
      list: "清單"
    blocks:
+      text: "文本"
+      multiLineText: "文本 (多行)"
+      textList: "文本列表"
+      _strPick:
+        arg1: "文本"
+        arg2: "字元位置"
+      _strReplace:
+        arg1: "文本"
+      _strReverse:
+        arg1: "本文"
      _join:
        arg1: "清單"
+      add: "加"
+      _add:
+        arg1: "A"
+        arg2: "B"
+      _subtract:
+        arg1: "A"
+        arg2: "B"
+      _multiply:
+        arg1: "A"
+        arg2: "B"
+      _divide:
+        arg1: "A"
+        arg2: "B"
+      _mod:
+        arg1: "A"
+        arg2: "B"
+      _round:
+        arg1: "數值"
+      eq: "A和B相等"
+      _eq:
+        arg1: "A"
+        arg2: "B"
+      notEq: "A和B不等"
+      _notEq:
+        arg1: "A"
+        arg2: "B"
+      and: "A和B"
+      _and:
+        arg1: "A"
+        arg2: "B"
+      or: "A或B"
+      _or:
+        arg1: "A"
+        arg2: "B"
+      lt: "< A小於B"
+      _lt:
+        arg1: "A"
+        arg2: "B"
+      gt: "> A大於B"
+      _gt:
+        arg1: "A"
+        arg2: "B"
+      ltEq: "<= A小於或等於B"
+      _ltEq:
+        arg1: "A"
+        arg2: "B"
+      gtEq: ">= A大於或等於B"
+      _gtEq:
+        arg1: "A"
+        arg2: "B"
+      if: "分支"
+      _if:
+        arg1: "如果"
+        arg2: "如果"
+      not: "否"
+      _not:
+        arg1: "否"
+      _random:
+        arg1: "機率"
+      rannum: "亂數"
+      _rannum:
+        arg1: "下限"
+        arg2: "上限"
      _randomPick:
        arg1: "清單"
+      _dailyRandom:
+        arg1: "機率"
+      _dailyRannum:
+        arg1: "下限"
+        arg2: "上限"
      _dailyRandomPick:
        arg1: "清單"
+      seedRandom: "隨機抽選種子碼"
+      _seedRandom:
+        arg1: "種子"
+        arg2: "機率"
+      seedRannum: "亂數 (種子)"
+      _seedRannum:
+        arg1: "種子"
+        arg2: "最小值"
+        arg3: "最大值"
+      seedRandomPick: "從列表中隨機選擇 (種子)"
      _seedRandomPick:
+        arg1: "種子"
        arg2: "清單"
+      _DRPWPM:
+        arg1: "文本列表"
+      pick: "從清單中選取"
      _pick:
        arg1: "清單"
+        arg2: "位置"
+      listLen: "取得清單長度"
      _listLen:
        arg1: "清單"
+      number: "數值"
+      _stringToNumber:
+        arg1: "文字"
+      _numberToString:
+        arg1: "數值"
+      ref: "變數"
+      aiScriptVar: "AiScript的變數"
+      fn: "函数"
+      _fn:
+        slots: "欄位"
+        arg1: "輸出"
+      _for:
+        arg1: "重複次數"
+        arg2: "處理"
    types:
+      string: "文字"
+      number: "数值"
      array: "清單"
+      stringArray: "文本列表"
+    enviromentVariables: "環境變數"
+_relayStatus:
+  requesting: "等待核准"
+  accepted: "已通過核准"
+  rejected: "已拒絕"
 _notification:
+  youGotPoll: "{name}已投票"
  youWereFollowed: "您有新的追隨者"
-
+  yourFollowRequestAccepted: "您的追隨請求已通過"
+_deck:
+  _columns:
+    notifications: "通知"
+    tl: "時間軸"
+    list: "清單"
+    mentions: "提及"
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.39.1",
+	"version": "12.41.3",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
@@ -31,35 +31,35 @@
 		"chokidar": "^3.3.1",
 		"constantinople": "^4.0.1",
 		"core-js": "^3.6.5",
-		"lodash": "^4.17.15",
-		"mocha": "^7.1.1"
+		"gulp/gulp-cli/yargs/yargs-parser": "5.0.0-security.0",
+		"lodash": "^4.17.19",
+		"mocha/serialize-javascript": "^3.1.0"
 	},
 	"dependencies": {
-		"@babel/plugin-transform-runtime": "7.9.6",
-		"@elastic/elasticsearch": "7.7.1",
-		"@fortawesome/fontawesome-svg-core": "1.2.28",
-		"@fortawesome/free-brands-svg-icons": "5.13.0",
-		"@fortawesome/free-regular-svg-icons": "5.13.0",
-		"@fortawesome/free-solid-svg-icons": "5.13.0",
-		"@fortawesome/vue-fontawesome": "0.1.9",
-		"@juggle/resize-observer": "3.1.3",
+		"@babel/plugin-transform-runtime": "7.10.3",
+		"@elastic/elasticsearch": "7.8.0",
+		"@fortawesome/fontawesome-svg-core": "1.2.29",
+		"@fortawesome/free-brands-svg-icons": "5.13.1",
+		"@fortawesome/free-regular-svg-icons": "5.13.1",
+		"@fortawesome/free-solid-svg-icons": "5.13.1",
+		"@fortawesome/vue-fontawesome": "0.1.10",
 		"@koa/cors": "3.1.0",
-		"@koa/multer": "2.0.2",
-		"@koa/router": "8.0.8",
+		"@koa/multer": "3.0.0",
+		"@koa/router": "9.0.1",
 		"@sinonjs/fake-timers": "6.0.1",
-		"@syuilo/aiscript": "0.6.1",
+		"@syuilo/aiscript": "0.7.2",
 		"@types/bcryptjs": "2.4.2",
-		"@types/bull": "3.13.0",
+		"@types/bull": "3.14.0",
 		"@types/cbor": "5.0.0",
 		"@types/dateformat": "3.0.1",
 		"@types/double-ended-queue": "2.1.1",
 		"@types/escape-regexp": "0.0.0",
-		"@types/glob": "7.1.1",
+		"@types/glob": "7.1.3",
 		"@types/gulp": "4.0.6",
 		"@types/gulp-rename": "0.0.33",
 		"@types/gulp-replace": "0.0.31",
 		"@types/is-url": "1.2.28",
-		"@types/js-yaml": "3.12.4",
+		"@types/js-yaml": "3.12.5",
 		"@types/jsdom": "16.2.3",
 		"@types/jsonld": "1.5.1",
 		"@types/katex": "0.11.0",
@@ -76,7 +76,7 @@
 		"@types/koa__router": "8.0.2",
 		"@types/markdown-it": "10.0.1",
 		"@types/mocha": "7.0.2",
-		"@types/node": "14.0.5",
+		"@types/node": "14.0.22",
 		"@types/node-fetch": "2.5.7",
 		"@types/nodemailer": "6.4.0",
 		"@types/nprogress": "0.2.0",
@@ -88,7 +88,7 @@
 		"@types/qrcode": "1.3.4",
 		"@types/random-seed": "0.3.3",
 		"@types/ratelimiter": "2.1.28",
-		"@types/redis": "2.8.21",
+		"@types/redis": "2.8.25",
 		"@types/rename": "1.0.1",
 		"@types/request-stats": "3.0.0",
 		"@types/rimraf": "3.0.0",
@@ -100,41 +100,41 @@
 		"@types/tmp": "0.2.0",
 		"@types/uuid": "8.0.0",
 		"@types/web-push": "3.3.0",
-		"@types/webpack": "4.41.13",
+		"@types/webpack": "4.41.18",
 		"@types/webpack-stream": "3.2.11",
-		"@types/websocket": "1.0.0",
-		"@types/ws": "7.2.4",
-		"@typescript-eslint/parser": "2.33.0",
+		"@types/websocket": "1.0.1",
+		"@types/ws": "7.2.6",
+		"@typescript-eslint/parser": "3.6.0",
 		"abort-controller": "3.0.0",
-		"apexcharts": "3.19.2",
+		"apexcharts": "3.19.3",
 		"autobind-decorator": "2.4.0",
 		"autosize": "4.0.2",
 		"autwh": "0.1.0",
-		"aws-sdk": "2.683.0",
+		"aws-sdk": "2.713.0",
 		"bcryptjs": "2.4.3",
-		"bull": "3.14.0",
+		"bull": "3.15.0",
 		"cafy": "15.2.1",
 		"cbor": "5.0.2",
-		"chalk": "4.0.0",
+		"chalk": "4.1.0",
 		"chart.js": "2.9.3",
 		"cli-highlight": "2.1.4",
 		"commander": "4.1.1",
 		"content-disposition": "0.5.3",
 		"core-js": "3.6.5",
 		"crc-32": "1.2.0",
-		"css-loader": "3.5.3",
+		"css-loader": "3.6.0",
 		"cssnano": "4.1.10",
 		"dateformat": "3.0.3",
 		"deep-entries": "3.1.0",
 		"diskusage": "1.1.3",
 		"double-ended-queue": "2.1.0-0",
 		"escape-regexp": "0.0.1",
-		"eslint": "6.8.0",
+		"eslint": "7.4.0",
 		"eslint-plugin-vue": "6.2.2",
 		"eventemitter3": "4.0.4",
-		"feed": "4.1.0",
+		"feed": "4.2.1",
 		"fibers": "5.0.0",
-		"file-type": "14.5.0",
+		"file-type": "14.6.2",
 		"fluent-ffmpeg": "2.1.2",
 		"glob": "7.1.6",
 		"gulp": "4.0.2",
@@ -147,7 +147,7 @@
 		"gulp-tslint": "8.1.4",
 		"gulp-typescript": "6.0.0-alpha.1",
 		"hard-source-webpack-plugin": "0.13.1",
-		"hcaptcha": "0.0.1",
+		"hcaptcha": "0.0.2",
 		"html-minifier": "4.0.0",
 		"http-proxy-agent": "4.0.1",
 		"http-signature": "1.3.4",
@@ -157,38 +157,38 @@
 		"is-root": "2.1.0",
 		"is-svg": "4.2.1",
 		"js-yaml": "3.14.0",
-		"jsdom": "16.2.2",
+		"jsdom": "16.3.0",
 		"json5": "2.1.3",
 		"json5-loader": "4.0.0",
 		"jsonld": "3.1.1",
-		"jsrsasign": "8.0.15",
+		"jsrsasign": "8.0.20",
 		"katex": "0.11.1",
-		"koa": "2.12.0",
+		"koa": "2.13.0",
 		"koa-bodyparser": "4.3.0",
 		"koa-favicon": "2.1.0",
 		"koa-json-body": "5.3.0",
 		"koa-logger": "3.2.1",
 		"koa-mount": "4.0.0",
-		"koa-send": "5.0.0",
+		"koa-send": "5.0.1",
 		"koa-slow": "2.1.0",
-		"koa-views": "6.2.2",
+		"koa-views": "6.3.0",
 		"langmap": "0.0.16",
 		"lookup-dns-cache": "2.1.0",
 		"markdown-it": "11.0.0",
 		"markdown-it-anchor": "5.3.0",
-		"mocha": "7.2.0",
+		"mocha": "8.0.1",
 		"moji": "0.5.1",
 		"ms": "2.1.2",
 		"multer": "1.4.2",
-		"nested-property": "2.0.0",
+		"nested-property": "2.0.1",
 		"node-fetch": "2.6.0",
-		"nodemailer": "6.4.6",
+		"nodemailer": "6.4.10",
 		"nprogress": "0.2.0",
 		"object-assign-deep": "0.4.0",
 		"os-utils": "0.0.14",
 		"parse5": "6.0.0",
-		"parsimmon": "1.13.0",
-		"pg": "8.2.1",
+		"parsimmon": "1.14.0",
+		"pg": "8.3.0",
 		"portal-vue": "2.1.7",
 		"portscanner": "2.2.0",
 		"postcss-loader": "3.0.0",
@@ -215,55 +215,55 @@
 		"rimraf": "3.0.2",
 		"rndstr": "1.0.0",
 		"s-age": "1.1.2",
-		"sass": "1.26.5",
-		"sass-loader": "8.0.2",
+		"sass": "1.26.10",
+		"sass-loader": "9.0.2",
 		"seedrandom": "3.0.5",
-		"sharp": "0.25.3",
+		"sharp": "0.25.4",
 		"speakeasy": "2.0.0",
 		"stringz": "2.1.0",
 		"style-loader": "1.2.1",
 		"summaly": "2.4.0",
 		"syslog-pro": "1.0.0",
-		"systeminformation": "4.26.4",
+		"systeminformation": "4.26.9",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
-		"three": "0.116.1",
+		"three": "0.117.1",
 		"tinycolor2": "1.4.1",
 		"tmp": "0.2.1",
-		"ts-loader": "7.0.4",
-		"ts-node": "8.10.1",
+		"ts-loader": "8.0.0",
+		"ts-node": "8.10.2",
 		"tslint": "6.1.2",
 		"tslint-sonarts": "1.9.0",
 		"typeorm": "0.2.25",
-		"typescript": "3.9.3",
+		"typescript": "3.9.6",
 		"ulid": "2.3.0",
 		"url-loader": "4.1.0",
-		"uuid": "8.1.0",
+		"uuid": "8.2.0",
 		"v-animate-css": "0.0.3",
 		"v-debounce": "0.1.2",
 		"vue": "2.6.11",
 		"vue-color": "2.7.1",
 		"vue-content-loading": "1.6.0",
 		"vue-cropperjs": "4.1.0",
-		"vue-i18n": "8.17.7",
-		"vue-json-pretty": "1.6.3",
-		"vue-loader": "15.9.2",
+		"vue-i18n": "8.18.2",
+		"vue-json-pretty": "1.6.5",
+		"vue-loader": "15.9.3",
 		"vue-marquee-text-component": "1.1.1",
-		"vue-meta": "2.3.3",
+		"vue-meta": "2.4.0",
 		"vue-prism-component": "1.2.0",
 		"vue-prism-editor": "0.6.1",
-		"vue-router": "3.2.0",
+		"vue-router": "3.3.4",
 		"vue-style-loader": "4.1.2",
 		"vue-svg-inline-loader-corejs3": "1.5.0",
 		"vue-template-compiler": "2.6.11",
-		"vuedraggable": "2.23.2",
-		"vuex": "3.4.0",
+		"vuedraggable": "2.24.0",
+		"vuex": "3.5.1",
 		"vuex-persistedstate": "3.0.1",
 		"web-push": "3.4.4",
-		"webpack": "5.0.0-beta.16",
-		"webpack-cli": "3.3.11",
+		"webpack": "5.0.0-beta.22",
+		"webpack-cli": "3.3.12",
 		"websocket": "1.0.31",
-		"ws": "7.3.0",
+		"ws": "7.3.1",
 		"xev": "2.0.1"
 	},
 	"devDependencies": {
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -29,47 +29,7 @@
 		</div>
 	</header>

-	<transition name="nav-back">
-		<div class="nav-back"
-			v-if="showNav"
-			@click="showNav = false"
-			@touchstart="showNav = false"
-		></div>
-	</transition>
-
-	<transition name="nav">
-		<nav class="nav" ref="nav" v-show="showNav">
-			<div>
-				<button class="item _button account" @click="openAccountMenu" v-if="$store.getters.isSignedIn">
-					<mk-avatar :user="$store.state.i" class="avatar"/><mk-acct class="text" :user="$store.state.i"/>
-				</button>
-				<button class="item _button index active" @click="top()" v-if="$route.name === 'index'">
-					<fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span>
-				</button>
-				<router-link class="item index" active-class="active" to="/" exact v-else>
-					<fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span>
-				</router-link>
-				<template v-for="item in menu">
-					<div v-if="item === '-'" class="divider"></div>
-					<component v-else-if="menuDef[item].show !== false" :is="menuDef[item].to ? 'router-link' : 'button'" class="item _button" :class="item" active-class="active" @click="() => { if (menuDef[item].action) menuDef[item].action() }" :to="menuDef[item].to">
-						<fa :icon="menuDef[item].icon" fixed-width/><span class="text">{{ $t(menuDef[item].title) }}</span>
-						<i v-if="menuDef[item].indicated"><fa :icon="faCircle"/></i>
-					</component>
-				</template>
-				<div class="divider"></div>
-				<button class="item _button" :class="{ active: $route.path === '/instance' || $route.path.startsWith('/instance/') }" v-if="$store.getters.isSignedIn && ($store.state.i.isAdmin || $store.state.i.isModerator)" @click="oepnInstanceMenu">
-					<fa :icon="faServer" fixed-width/><span class="text">{{ $t('instance') }}</span>
-				</button>
-				<button class="item _button" @click="more">
-					<fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $t('more') }}</span>
-					<i v-if="otherNavItemIndicated"><fa :icon="faCircle"/></i>
-				</button>
-				<router-link class="item" active-class="active" to="/preferences">
-					<fa :icon="faCog" fixed-width/><span class="text">{{ $t('settings') }}</span>
-				</router-link>
-			</div>
-		</nav>
-	</transition>
+	<x-sidebar ref="nav"/>

 	<div class="contents" ref="contents" :class="{ wallpaper }">
 		<main ref="main">
@@ -86,38 +46,37 @@
 			</div>
 		</main>

-		<div class="widgets">
-			<div ref="widgets" :class="{ edit: widgetsEditMode }">
-				<template v-if="isDesktop && $store.getters.isSignedIn">
-					<template v-if="widgetsEditMode">
-						<mk-button primary @click="addWidget" class="add"><fa :icon="faPlus"/></mk-button>
-						<x-draggable
-							:list="widgets"
-							handle=".handle"
-							animation="150"
-							class="sortable"
-							@sort="onWidgetSort"
-						>
-							<div v-for="widget in widgets" class="customize-container _panel" :key="widget.id">
-								<header>
-									<span class="handle"><fa :icon="faBars"/></span>{{ $t('_widgets.' + widget.name) }}<button class="remove _button" @click="removeWidget(widget)"><fa :icon="faTimes"/></button>
-								</header>
-								<div @click="widgetFunc(widget.id)">
-									<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true"/>
-								</div>
+		<template v-if="isDesktop">
+			<div v-for="place in ['left', 'right']" ref="widgets" class="widgets" :class="{ edit: widgetsEditMode, fixed: $store.state.device.fixedWidgetsPosition, empty: widgets[place].length === 0 && !widgetsEditMode }" :key="place">
+				<div class="spacer"></div>
+				<div class="container" v-if="widgetsEditMode">
+					<mk-button primary @click="addWidget(place)" class="add"><fa :icon="faPlus"/></mk-button>
+					<x-draggable
+						:list="widgets[place]"
+						handle=".handle"
+						animation="150"
+						class="sortable"
+						@sort="onWidgetSort"
+					>
+						<div v-for="widget in widgets[place]" class="customize-container _panel" :key="widget.id">
+							<header>
+								<span class="handle"><fa :icon="faBars"/></span>{{ $t('_widgets.' + widget.name) }}<button class="remove _button" @click="removeWidget(widget)"><fa :icon="faTimes"/></button>
+							</header>
+							<div @click="widgetFunc(widget.id)">
+								<component class="_close_ _forceContainerFull_" :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true"/>
 							</div>
-						</x-draggable>
-					</template>
-					<template v-else>
-						<component class="widget" v-for="widget in widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget"/>
-					</template>
-				</template>
+						</div>
+					</x-draggable>
+				</div>
+				<div class="container" v-else>
+					<component v-for="widget in widgets[place]" class="_close_ _forceContainerFull_" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget"/>
+				</div>
 			</div>
-		</div>
+		</template>
 	</div>

 	<div class="buttons">
-		<button class="button nav _button" @click="showNav = true" ref="navButton"><fa :icon="faBars"/><i v-if="navIndicated"><fa :icon="faCircle"/></i></button>
+		<button class="button nav _button" @click="showNav" ref="navButton"><fa :icon="faBars"/><i v-if="navIndicated"><fa :icon="faCircle"/></i></button>
 		<button v-if="$route.name === 'index'" class="button home _button" @click="top()"><fa :icon="faHome"/></button>
 		<button v-else class="button home _button" @click="$router.push('/')"><fa :icon="faHome"/></button>
 		<button v-if="$store.getters.isSignedIn" class="button notifications _button" @click="$router.push('/my/notifications')"><fa :icon="faBell"/><i v-if="$store.state.i.hasUnreadNotification"><fa :icon="faCircle"/></i></button>
@@ -134,15 +93,18 @@
 import Vue from 'vue';
 import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { v4 as uuid } from 'uuid';
-import { host, instanceName } from './config';
+import { host } from './config';
 import { search } from './scripts/search';
+import { StickySidebar } from './scripts/sticky-sidebar';
+import { widgets } from './widgets';
+import XSidebar from './components/sidebar.vue';

 const DESKTOP_THRESHOLD = 1100;

 export default Vue.extend({
 	components: {
+		XSidebar,
 		XClock: () => import('./components/header-clock.vue').then(m => m.default),
 		MkButton: () => import('./components/ui/button.vue').then(m => m.default),
 		XDraggable: () => import('vuedraggable'),
@@ -152,19 +114,14 @@ export default Vue.extend({
 		return {
 			host: host,
 			pageKey: 0,
-			showNav: false,
 			searching: false,
-			accounts: [],
-			lists: [],
 			connection: null,
 			searchQuery: '',
 			searchWait: false,
 			widgetsEditMode: false,
-			menuDef: this.$store.getters.nav({
-				search: this.search
-			}),
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
 			canBack: false,
+			menuDef: this.$store.getters.nav({}),
 			wallpaper: localStorage.getItem('wallpaper') != null,
 			faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faProjectDiagram
 		};
@@ -173,6 +130,10 @@ export default Vue.extend({
 	computed: {
 		keymap(): any {
 			return {
+				'd': () => {
+					if (this.$store.state.device.syncDeviceDarkMode) return;
+					this.$store.commit('device/set', { key: 'darkMode', value: !this.$store.state.device.darkMode });
+				},
 				'p': this.post,
 				'n': this.post,
 				's': this.search,
@@ -181,70 +142,83 @@ export default Vue.extend({
 		},

 		widgets(): any[] {
-			return this.$store.state.deviceUser.widgets;
+			if (this.$store.getters.isSignedIn) {
+				const widgets = this.$store.state.deviceUser.widgets;
+				return {
+					left: widgets.filter(x => x.place === 'left'),
+					right: widgets.filter(x => x.place == null || x.place === 'right'),
+					mobile: widgets.filter(x => x.place === 'mobile'),
+				};
+			} else {
+				return {
+					left: [],
+					right: [{
+						name: 'welcome',
+						id: 'a', place: 'right', data: {}
+					}, {
+						name: 'calendar',
+						id: 'b', place: 'right', data: {}
+					}, {
+						name: 'trends',
+						id: 'c', place: 'right', data: {}
+					}],
+					mobile: [],
+				};
+			}
 		},

 		menu(): string[] {
 			return this.$store.state.deviceUser.menu;
 		},

-		otherNavItemIndicated(): boolean {
-			if (!this.$store.getters.isSignedIn) return false;
-			for (const def in this.menuDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		},
-
 		navIndicated(): boolean {
 			if (!this.$store.getters.isSignedIn) return false;
 			for (const def in this.menuDef) {
-				if (def === 'timeline') continue;
-				if (def === 'notifications') continue;
+				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
 				if (this.menuDef[def].indicated) return true;
 			}
 			return false;
 		}
 	},

-	watch:{
+	watch: {
 		$route(to, from) {
 			this.pageKey++;
-			this.showNav = false;
 			this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
 		},

 		isDesktop() {
-			if (this.isDesktop) this.adjustWidgetsWidth();
+			this.$nextTick(() => {
+				this.attachSticky();
+			});
 		}
 	},

 	created() {
+		document.documentElement.style.overflowY = 'scroll';
+
 		if (this.$store.getters.isSignedIn) {
 			this.connection = this.$root.stream.useSharedConnection('main');
 			this.connection.on('notification', this.onNotification);

-			if (this.widgets.length === 0) {
+			if (this.$store.state.deviceUser.widgets.length === 0) {
 				this.$store.commit('deviceUser/setWidgets', [{
 					name: 'calendar',
-					id: 'a', data: {}
+					id: 'a', place: 'right', data: {}
 				}, {
 					name: 'notifications',
-					id: 'b', data: {}
+					id: 'b', place: 'right', data: {}
 				}, {
 					name: 'trends',
-					id: 'c', data: {}
+					id: 'c', place: 'right', data: {}
 				}]);
 			}
 		}
 	},

 	mounted() {
-		if (this.isDesktop) this.adjustWidgetsWidth();
-
 		const adjustTitlePosition = () => {
-			const left = this.$refs.main.getBoundingClientRect().left - this.$refs.nav.offsetWidth;
+			const left = this.$refs.main.getBoundingClientRect().left - this.$refs.nav.$el.offsetWidth;
 			if (left >= 0) {
 				this.$refs.title.style.left = left + 'px';
 			}
@@ -265,20 +239,26 @@ export default Vue.extend({
 				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
 			}, { passive: true });
 		}
+
+		// widget follow
+		this.attachSticky();
 	},

 	methods: {
-		adjustWidgetsWidth() {
-			// https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width
-			const adjust = () => {
-				const lastChild = this.$refs.widgets.children[this.$refs.widgets.children.length - 1];
-				if (lastChild == null) return;
+		showNav() {
+			this.$refs.nav.show();
+		},

-				const width = lastChild.offsetLeft + 300 + 16;
-				this.$refs.widgets.style.width = width + 'px';
-			};
-			setInterval(adjust, 1000);
-			setTimeout(adjust, 100);
+		attachSticky() {
+			if (!this.isDesktop) return;
+			if (this.$store.state.device.fixedWidgetsPosition) return;
+
+			const stickyWidgetColumns = this.$refs.widgets.map(w => new StickySidebar(w.children[1], w.children[0], w.offsetTop));
+			window.addEventListener('scroll', () => {
+				for (const stickyWidgetColumn of stickyWidgetColumns) {
+					stickyWidgetColumn.calc(window.scrollY);
+				}
+			}, { passive: true });
 		},

 		top() {
@@ -327,178 +307,6 @@ export default Vue.extend({
 			}
 		},

-		async openAccountMenu(ev) {
-			const accounts = (await this.$root.api('users/show', { userIds: this.$store.state.device.accounts.map(x => x.id) })).filter(x => x.id !== this.$store.state.i.id);
-
-			const accountItems = accounts.map(account => ({
-				type: 'user',
-				user: account,
-				action: () => { this.switchAccount(account); }
-			}));
-
-			this.$root.menu({
-				items: [...[{
-					type: 'link',
-					text: this.$t('profile'),
-					to: `/@${ this.$store.state.i.username }`,
-					avatar: this.$store.state.i,
-				}, {
-					type: 'link',
-					text: this.$t('accountSettings'),
-					to: '/my/settings',
-					icon: faCog,
-				}, null, ...accountItems, {
-					icon: faPlus,
-					text: this.$t('addAcount'),
-					action: () => {
-						this.$root.menu({
-							items: [{
-								text: this.$t('existingAcount'),
-								action: () => { this.addAcount(); },
-							}, {
-								text: this.$t('createAccount'),
-								action: () => { this.createAccount(); },
-							}],
-							align: 'left',
-							fixed: true,
-							width: 240,
-							source: ev.currentTarget || ev.target,
-						});
-					},
-				}]],
-				align: 'left',
-				fixed: true,
-				width: 240,
-				source: ev.currentTarget || ev.target,
-			});
-		},
-
-		oepnInstanceMenu(ev) {
-			this.$root.menu({
-				items: [{
-					type: 'link',
-					text: this.$t('dashboard'),
-					to: '/instance',
-					icon: faTachometerAlt,
-				}, null, {
-					type: 'link',
-					text: this.$t('settings'),
-					to: '/instance/settings',
-					icon: faCog,
-				}, {
-					type: 'link',
-					text: this.$t('customEmojis'),
-					to: '/instance/emojis',
-					icon: faLaugh,
-				}, {
-					type: 'link',
-					text: this.$t('users'),
-					to: '/instance/users',
-					icon: faUsers,
-				}, {
-					type: 'link',
-					text: this.$t('files'),
-					to: '/instance/files',
-					icon: faCloud,
-				}, {
-					type: 'link',
-					text: this.$t('jobQueue'),
-					to: '/instance/queue',
-					icon: faExchangeAlt,
-				}, {
-					type: 'link',
-					text: this.$t('federation'),
-					to: '/instance/federation',
-					icon: faGlobe,
-				}, {
-					type: 'link',
-					text: this.$t('relays'),
-					to: '/instance/relays',
-					icon: faProjectDiagram,
-				}, {
-					type: 'link',
-					text: this.$t('announcements'),
-					to: '/instance/announcements',
-					icon: faBroadcastTower,
-				}],
-				align: 'left',
-				fixed: true,
-				width: 200,
-				source: ev.currentTarget || ev.target,
-			});
-		},
-
-		more(ev) {
-			const items = Object.keys(this.menuDef).filter(k => !this.menu.includes(k)).map(k => this.menuDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
-				type: def.to ? 'link' : 'button',
-				text: this.$t(def.title),
-				icon: def.icon,
-				to: def.to,
-				action: def.action,
-				indicate: def.indicated,
-			}));
-			this.$root.menu({
-				items: [...items, null, {
-					type: 'link',
-					text: this.$t('help'),
-					to: '/docs',
-					icon: faQuestionCircle,
-				}, {
-					type: 'link',
-					text: this.$t('aboutX', { x: instanceName || host }),
-					to: '/about',
-					icon: faInfoCircle,
-				}, {
-					type: 'link',
-					text: this.$t('aboutMisskey'),
-					to: '/about-misskey',
-					icon: faInfoCircle,
-				}],
-				align: 'left',
-				fixed: true,
-				width: 200,
-				source: ev.currentTarget || ev.target,
-			});
-		},
-
-		async addAcount() {
-			this.$root.new(await import('./components/signin-dialog.vue').then(m => m.default)).$once('login', res => {
-				this.$store.dispatch('addAcount', res);
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			});
-		},
-
-		async createAccount() {
-			this.$root.new(await import('./components/signup-dialog.vue').then(m => m.default)).$once('signup', res => {
-				this.$store.dispatch('addAcount', res);
-				this.switchAccountWithToken(res.i);
-			});
-		},
-
-		async switchAccount(account: any) {
-			const token = this.$store.state.device.accounts.find((x: any) => x.id === account.id).token;
-			this.switchAccountWithToken(token);
-		},
-
-		switchAccountWithToken(token: string) {
-			this.$root.dialog({
-				type: 'waiting',
-				iconOnly: true
-			});
-
-			this.$root.api('i', {}, token).then((i: any) => {
-				this.$store.dispatch('switchAccount', {
-					...i,
-					token: token
-				}).then(() => {
-					location.reload();
-				});
-			});
-		},
-
 		async onNotification(notification) {
 			if (document.visibilityState === 'visible') {
 				this.$root.stream.send('readNotification', {
@@ -514,39 +322,32 @@ export default Vue.extend({
 		},

 		widgetFunc(id) {
-			const w = this.$refs[id][0];
-			if (w.func) w.func();
+			this.$refs[id][0].setting();
 		},

 		onWidgetSort() {
 			this.saveHome();
 		},

-		addWidget(ev) {
-			const widgets = [
-				'memo',
-				'notifications',
-				'timeline',
-				'calendar',
-				'rss',
-				'trends',
-				'clock',
-				'activity',
-				'photos',
-			];
+		async addWidget(place) {
+			const { canceled, result: widget } = await this.$root.dialog({
+				type: null,
+				title: this.$t('chooseWidget'),
+				select: {
+					items: widgets.map(widget => ({
+						value: widget,
+						text: this.$t('_widgets.' + widget),
+					}))
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;

-			this.$root.menu({
-				items: widgets.map(widget => ({
-					text: this.$t('_widgets.' + widget),
-					action: () => {
-						this.$store.commit('deviceUser/addWidget', {
-							name: widget,
-							id: uuid(),
-							data: {}
-						});
-					}
-				})),
-				source: ev.currentTarget || ev.target,
+			this.$store.commit('deviceUser/addWidget', {
+				name: widget,
+				id: uuid(),
+				place: place,
+				data: {}
 			});
 		},

@@ -555,46 +356,27 @@ export default Vue.extend({
 		},

 		saveHome() {
-			this.$store.commit('deviceUser/setWidgets', this.widgets);
+			this.$store.commit('deviceUser/setWidgets', [...this.widgets.left, ...this.widgets.right, ...this.widgets.mobile]);
 		}
 	}
 });
 </script>

 <style lang="scss" scoped>
-.nav-enter-active,
-.nav-leave-active {
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.nav-enter,
-.nav-leave-active {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.nav-back-enter-active,
-.nav-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.nav-back-enter,
-.nav-back-leave-active {
-	opacity: 0;
-}
-
 .mk-app {
 	$header-height: 60px;
-	$nav-width: 250px;
-	$nav-icon-only-width: 80px;
-	$main-width: 650px;
-	$ui-font-size: 1em;
-	$nav-icon-only-threshold: 1300px;
-	$nav-hide-threshold: 650px;
-	$side-hide-threshold: 1070px;
+	$nav-width: 250px; // TODO: どこかに集約したい
+	$nav-icon-only-width: 80px; // TODO: どこかに集約したい
+	$main-width: 670px;
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-icon-only-threshold: 1279px; // TODO: どこかに集約したい
+	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
+	$header-sub-hide-threshold: 1090px;
+	$left-widgets-hide-threshold: 1600px;
+	$right-widgets-hide-threshold: 1090px;

-	min-height: 100vh;
+	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+	min-height: calc(var(--vh, 1vh) * 100);
 	box-sizing: border-box;
 	padding-top: $header-height;

@@ -690,7 +472,7 @@ export default Vue.extend({
 			right: 16px;
 			height: $header-height;

-			@media (max-width: $side-hide-threshold) {
+			@media (max-width: $header-sub-hide-threshold) {
 				display: none;
 			}

@@ -716,6 +498,7 @@ export default Vue.extend({
 					border-radius: 38px;
 					color: var(--fg);
 					background: var(--bg);
+					-webkit-appearance: textfield;

 					&:focus {
 						outline: none;
@@ -746,176 +529,6 @@ export default Vue.extend({
 		}
 	}

-	> .nav-back {
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 1001;
-		width: 100%;
-		height: 100%;
-		background: var(--modalBg);
-	}
-
-	> .nav {
-		$avatar-size: 32px;
-		$avatar-margin: ($header-height - $avatar-size) / 2;
-
-		flex: 0 0 $nav-width;
-		width: $nav-width;
-		box-sizing: border-box;
-
-		@media (max-width: $nav-icon-only-threshold) {
-			flex: 0 0 $nav-icon-only-width;
-			width: $nav-icon-only-width;
-		}
-
-		@media (max-width: $nav-hide-threshold) {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-		}
-
-		@media (min-width: $nav-hide-threshold + 1px) {
-			display: block !important;
-		}
-
-		> div {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 1001;
-			width: $nav-width;
-			height: 100vh;
-			box-sizing: border-box;
-			overflow: auto;
-			background: var(--navBg);
-			border-right: solid 1px var(--divider);
-
-			> .divider {
-				margin: 16px 0;
-				border-top: solid 1px var(--divider);
-			}
-
-			@media (max-width: $nav-icon-only-threshold) and (min-width: $nav-hide-threshold + 1px) {
-				width: $nav-icon-only-width;
-
-				> .divider {
-					margin: 8px auto;
-					width: calc(100% - 32px);
-				}
-
-				> .item {
-					&:first-child {
-						margin-bottom: 8px;
-					}
-
-					&:last-child {
-						margin-top: 8px;
-					}
-				}
-			}
-
-			> .item {
-				position: relative;
-				display: block;
-				padding-left: 32px;
-				font-size: $ui-font-size;
-				line-height: 3.2rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				color: var(--navFg);
-
-				> [data-icon] {
-					width: ($header-height - ($avatar-margin * 2));
-				}
-
-				> [data-icon],
-				> .avatar {
-					margin-right: $avatar-margin;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> i {
-					position: absolute;
-					top: 0;
-					left: 20px;
-					color: var(--navIndicator);
-					font-size: 8px;
-					animation: blink 1s infinite;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&:first-child, &:last-child {
-					position: sticky;
-					z-index: 1;
-					padding-top: 8px;
-					padding-bottom: 8px;
-					background: var(--wboyroyc);
-					-webkit-backdrop-filter: blur(8px);
-					backdrop-filter: blur(8px);
-				}
-
-				&:first-child {
-					top: 0;
-					margin-bottom: 16px;
-					border-bottom: solid 1px var(--divider);
-				}
-
-				&:last-child {
-					bottom: 0;
-					margin-top: 16px;
-					border-top: solid 1px var(--divider);
-				}
-
-				@media (max-width: $nav-icon-only-threshold) and (min-width: $nav-hide-threshold + 1px) {
-					padding-left: 0;
-					width: 100%;
-					text-align: center;
-					font-size: $ui-font-size * 1.2;
-					line-height: 3.7rem;
-
-					> [data-icon],
-					> .avatar {
-						margin-right: 0;
-					}
-
-					> i {
-						left: 10px;
-					}
-
-					> .text {
-						display: none;
-					}
-				}
-			}
-
-			@media (max-width: $nav-hide-threshold) {
-				> .index,
-				> .notifications {
-					display: none;
-				}
-			}
-		}
-	}
-
 	> .contents {
 		display: flex;
 		margin: 0 auto;
@@ -923,25 +536,22 @@ export default Vue.extend({

 		&.wallpaper {
 			background: var(--wallpaperOverlay);
+			backdrop-filter: blur(4px);
 		}

 		> main {
 			width: $main-width;
-			min-width: $main-width;
-			box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
-
-			@media (max-width: $side-hide-threshold) {
-				min-width: 0;
-			}
+			min-width: 0;

 			> .content {
 				> * {
-					&:not(.full) {
-						padding: var(--margin) 0;
-					}
+					// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+					min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
+					box-sizing: border-box;
+					padding: var(--margin);

-					&:not(.naked) {
-						background: var(--pageBg);
+					&.full {
+						padding: 0 var(--margin);
 					}

 					&.naked {
@@ -983,67 +593,85 @@ export default Vue.extend({
 		}

 		> .widgets {
-			box-sizing: border-box;
-			margin-left: var(--margin);
+			padding: 0 var(--margin);
+			box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);

-			@media (max-width: $side-hide-threshold) {
+			&.fixed {
+				position: sticky;
+				overflow: auto;
+				// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+				height: calc((var(--vh, 1vh) * 100) - #{$header-height});
+				top: $header-height;
+			}
+
+			&:first-of-type {
+				order: -1;
+
+				@media (max-width: $left-widgets-hide-threshold) {
+					display: none;
+				}
+			}
+
+			&.empty {
 				display: none;
 			}

-			> div {
+			@media (max-width: $right-widgets-hide-threshold) {
+				display: none;
+			}
+
+			> .container {
 				position: sticky;
-				top: calc(#{$header-height} + var(--margin));
-				height: calc(100vh - #{$header-height} - var(--margin));
-
-				&.edit {
-					overflow: auto;
-					width: auto !important;
-				}
-
-				&:not(.edit) {
-					display: inline-flex;
-					flex-wrap: wrap;
-					flex-direction: column;
-					place-content: flex-start;
-				}
+				height: min-content;
+				// ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+				min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
+				padding: var(--margin) 0;
+				box-sizing: border-box;

 				> * {
-					margin: 0 var(--margin) var(--margin) 0;
+					margin: var(--margin) 0;
 					width: 300px;
-				}

-				> .add {
-					margin: 0 auto;
-				}
-
-				.customize-container {
-					margin: 8px 0;
-					background: #fff;
-
-					> header {
-						position: relative;
-						line-height: 32px;
-
-						> .handle {
-							padding: 0 8px;
-							cursor: move;
-						}
-
-						> .remove {
-							position: absolute;
-							top: 0;
-							right: 0;
-							padding: 0 8px;
-							line-height: 32px;
-						}
+					&:first-child {
+						margin-top: 0;
 					}

-					> div {
-						padding: 8px;
+					&:last-child {
+						margin-bottom: 0;
+					}
+				}
+			}

-						> * {
-							pointer-events: none;
-						}
+			> .add {
+				margin: 0 auto;
+			}
+
+			.customize-container {
+				margin: 8px 0;
+
+				> header {
+					position: relative;
+					line-height: 32px;
+
+					> .handle {
+						padding: 0 8px;
+						cursor: move;
+					}
+
+					> .remove {
+						position: absolute;
+						top: 0;
+						right: 0;
+						padding: 0 8px;
+						line-height: 32px;
+					}
+				}
+
+				> div {
+					padding: 8px;
+
+					> * {
+						pointer-events: none;
 					}
 				}
 			}
@@ -1066,7 +694,7 @@ export default Vue.extend({
 			display: block;
 		}

-		@media (min-width: ($side-hide-threshold + 1px)) {
+		@media (min-width: ($header-sub-hide-threshold + 1px)) {
 			display: none;
 		}
 	}
@@ -1079,7 +707,7 @@ export default Vue.extend({
 		display: flex;
 		width: 100%;
 		box-sizing: border-box;
-		background: linear-gradient(0deg, var(--bg), var(--bonzsgfz));
+		background: linear-gradient(0deg, var(--bg), var(--X1));

 		@media (max-width: 500px) {
 			padding: 0 16px 16px 16px;
@@ -1123,7 +751,7 @@ export default Vue.extend({
 				color: var(--fg);

 				&:hover {
-					background: var(--pcncwizz);
+					background: var(--X2);
 				}

 				> i {
--- a/src/client/assets/sounds/syuilo/pirori-square-wet.mp3
+++ b/src/client/assets/sounds/syuilo/pirori-square-wet.mp3
--- a/src/client/assets/sounds/syuilo/pirori-wet.mp3
+++ b/src/client/assets/sounds/syuilo/pirori-wet.mp3
--- a/src/client/assets/sounds/syuilo/pirori.mp3
+++ b/src/client/assets/sounds/syuilo/pirori.mp3
--- a/src/client/components/autocomplete.vue
+++ b/src/client/components/autocomplete.vue
@@ -426,7 +426,7 @@ export default Vue.extend({
 			}

 			&:hover {
-				background: var(--yrnqrguo);
+				background: var(--X3);
 			}

 			&[data-selected='true'] {
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -1,5 +1,5 @@
 <template>
-<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv" name="list" tag="div" :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
+<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv _list_" name="list" tag="div" :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
 	<template v-for="(item, i) in items">
 		<slot :item="item"></slot>
 		<div class="separator" v-if="showDate(i, item)" :key="item.id + '_date'">
@@ -69,6 +69,10 @@ export default Vue.extend({

 <style lang="scss">
 .sqadhkmv {
+	> *:not(:last-child) {
+		margin-bottom: var(--margin);
+	}
+
 	> .list-move {
 		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 	}
--- a/src/client/components/deck/antenna-column.vue
+++ b/src/client/components/deck/antenna-column.vue
@@ -0,0 +1,80 @@
+<template>
+<x-column :menu="menu" :column="column" :is-stacked="isStacked">
+	<template #header>
+		<fa :icon="faSatellite"/><span style="margin-left: 8px;">{{ column.name }}</span>
+	</template>
+
+	<x-timeline ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => $emit('loaded')"/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
+import XColumn from './column.vue';
+import XTimeline from '../timeline.vue';
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XTimeline,
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			menu: null,
+			faSatellite
+		};
+	},
+
+	watch: {
+		mediaOnly() {
+			(this.$refs.timeline as any).reload();
+		}
+	},
+
+	created() {
+		this.menu = [{
+			icon: faCog,
+			text: this.$t('antenna'),
+			action: async () => {
+				const antennas = await this.$root.api('antennas/list');
+				this.$root.dialog({
+					title: this.$t('antenna'),
+					type: null,
+					select: {
+						items: antennas.map(x => ({
+							value: x, text: x.name
+						}))
+					},
+					showCancelButton: true
+				}).then(({ canceled, result: antenna }) => {
+					if (canceled) return;
+					this.column.antennaId = antenna.id;
+					this.$store.commit('deviceUser/updateDeckColumn', this.column);
+				});
+			}
+		}];
+	},
+
+	methods: {
+		focus() {
+			(this.$refs.timeline as any).focus();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/client/components/deck/column-core.vue
+++ b/src/client/components/deck/column-core.vue
@@ -0,0 +1,50 @@
+<template>
+<!-- TODO: リファクタの余地がありそう -->
+<x-widgets-column v-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-notifications-column v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-tl-column v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-list-column v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-antenna-column v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<!-- TODO: <x-tl-column v-else-if="column.type === 'hashtag'" :column="column" :is-stacked="isStacked" v-on="$listeners"/> -->
+<x-mentions-column v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+<x-direct-column v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" v-on="$listeners"/>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XTlColumn from './tl-column.vue';
+import XAntennaColumn from './antenna-column.vue';
+import XListColumn from './list-column.vue';
+import XNotificationsColumn from './notifications-column.vue';
+import XWidgetsColumn from './widgets-column.vue';
+import XMentionsColumn from './mentions-column.vue';
+import XDirectColumn from './direct-column.vue';
+
+export default Vue.extend({
+	components: {
+		XTlColumn,
+		XAntennaColumn,
+		XListColumn,
+		XNotificationsColumn,
+		XWidgetsColumn,
+		XMentionsColumn,
+		XDirectColumn
+	},
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	methods: {
+		focus() {
+			this.$children[0].focus();
+		}
+	}
+});
+</script>
--- a/src/client/components/deck/column.vue
+++ b/src/client/components/deck/column.vue
@@ -0,0 +1,426 @@
+<template>
+<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
+<section class="dnpfarvg _panel _narrow_" :class="{ naked, paged: isMainColumn, _close_: !isMainColumn, active, isStacked, draghover, dragging, dropready }"
+	@dragover.prevent.stop="onDragover"
+	@dragleave="onDragleave"
+	@drop.prevent.stop="onDrop"
+	v-hotkey="keymap"
+	:style="{ width: `${width}px` }"
+>
+	<header :class="{ indicated }"
+		draggable="true"
+		@click="goTop"
+		@dragstart="onDragstart"
+		@dragend="onDragend"
+		@contextmenu.prevent.stop="onContextmenu"
+	>
+		<button class="toggleActive _button" @click="toggleActive" v-if="isStacked">
+			<template v-if="active"><fa :icon="faAngleUp"/></template>
+			<template v-else><fa :icon="faAngleDown"/></template>
+		</button>
+		<div class="action">
+			<slot name="action"></slot>
+		</div>
+		<span class="header"><slot name="header"></slot></span>
+		<button v-if="!isMainColumn" class="menu _button" ref="menu" @click.stop="showMenu"><fa :icon="faCaretDown"/></button>
+		<button v-else-if="$route.name !== 'index'" class="close _button" @click.stop="close"><fa :icon="faTimes"/></button>
+	</header>
+	<div ref="body" v-show="active">
+		<slot></slot>
+	</div>
+</section>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
+import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
+
+export default Vue.extend({
+	props: {
+		column: {
+			type: Object,
+			required: false,
+			default: null
+		},
+		isStacked: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		menu: {
+			type: Array,
+			required: false,
+			default: null
+		},
+		naked: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		indicated: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+
+	data() {
+		return {
+			active: true,
+			dragging: false,
+			draghover: false,
+			dropready: false,
+			faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes,
+		};
+	},
+
+	computed: {
+		isMainColumn(): boolean {
+			return this.column == null;
+		},
+
+		width(): number {
+			return this.isMainColumn ? 350 : this.column.width;
+		},
+
+		keymap(): any {
+			return {
+				'shift+up': () => this.$parent.$emit('parentFocus', 'up'),
+				'shift+down': () => this.$parent.$emit('parentFocus', 'down'),
+				'shift+left': () => this.$parent.$emit('parentFocus', 'left'),
+				'shift+right': () => this.$parent.$emit('parentFocus', 'right'),
+			};
+		}
+	},
+
+	watch: {
+		active(v) {
+			this.$emit('change-active-state', v);
+		},
+
+		dragging(v) {
+			this.$root.$emit(v ? 'deck.column.dragStart' : 'deck.column.dragEnd');
+		}
+	},
+
+	mounted() {
+		if (!this.isMainColumn) {
+			this.$root.$on('deck.column.dragStart', this.onOtherDragStart);
+			this.$root.$on('deck.column.dragEnd', this.onOtherDragEnd);
+		}
+	},
+
+	beforeDestroy() {
+		if (!this.isMainColumn) {
+			this.$root.$off('deck.column.dragStart', this.onOtherDragStart);
+			this.$root.$off('deck.column.dragEnd', this.onOtherDragEnd);
+		}
+	},
+
+	methods: {
+		onOtherDragStart() {
+			this.dropready = true;
+		},
+
+		onOtherDragEnd() {
+			this.dropready = false;
+		},
+
+		toggleActive() {
+			if (!this.isStacked) return;
+			this.active = !this.active;
+		},
+
+		getMenu() {
+			const items = [{
+				icon: faPencilAlt,
+				text: this.$t('rename'),
+				action: () => {
+					this.$root.dialog({
+						title: this.$t('rename'),
+						input: {
+							default: this.column.name,
+							allowEmpty: false
+						}
+					}).then(({ canceled, result: name }) => {
+						if (canceled) return;
+						this.$store.commit('deviceUser/renameDeckColumn', { id: this.column.id, name });
+					});
+				}
+			}, null, {
+				icon: faArrowLeft,
+				text: this.$t('swap-left'),
+				action: () => {
+					this.$store.commit('deviceUser/swapLeftDeckColumn', this.column.id);
+				}
+			}, {
+				icon: faArrowRight,
+				text: this.$t('swap-right'),
+				action: () => {
+					this.$store.commit('deviceUser/swapRightDeckColumn', this.column.id);
+				}
+			}, this.isStacked ? {
+				icon: faArrowUp,
+				text: this.$t('swap-up'),
+				action: () => {
+					this.$store.commit('deviceUser/swapUpDeckColumn', this.column.id);
+				}
+			} : undefined, this.isStacked ? {
+				icon: faArrowDown,
+				text: this.$t('swap-down'),
+				action: () => {
+					this.$store.commit('deviceUser/swapDownDeckColumn', this.column.id);
+				}
+			} : undefined, null, {
+				icon: faWindowRestore,
+				text: this.$t('stack-left'),
+				action: () => {
+					this.$store.commit('deviceUser/stackLeftDeckColumn', this.column.id);
+				}
+			}, this.isStacked ? {
+				icon: faWindowMaximize,
+				text: this.$t('pop-right'),
+				action: () => {
+					this.$store.commit('deviceUser/popRightDeckColumn', this.column.id);
+				}
+			} : undefined, null, {
+				icon: faTrashAlt,
+				text: this.$t('remove'),
+				action: () => {
+					this.$store.commit('deviceUser/removeDeckColumn', this.column.id);
+				}
+			}];
+
+			if (this.menu) {
+				for (const i of this.menu.reverse()) {
+					items.unshift(i);
+				}
+			}
+
+			return items;
+		},
+
+		onContextmenu(e) {
+			if (this.isMainColumn) return;
+			this.showMenu();
+		},
+
+		showMenu() {
+			this.$root.menu({
+				items: this.getMenu(),
+				source: this.$refs.menu,
+			});
+		},
+
+		close() {
+			this.$router.push('/');
+		},
+
+		goTop() {
+			this.$refs.body.scrollTo({
+				top: 0,
+				behavior: 'smooth'
+			});
+		},
+
+		onDragstart(e) {
+			// メインカラムはドラッグさせない
+			if (this.isMainColumn) {
+				e.preventDefault();
+				return;
+			}
+
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('mk-deck-column', this.column.id);
+			this.dragging = true;
+		},
+
+		onDragend(e) {
+			this.dragging = false;
+		},
+
+		onDragover(e) {
+			// メインカラムにはドロップさせない
+			if (this.isMainColumn) {
+				e.dataTransfer.dropEffect = 'none';
+				return;
+			}
+
+			// 自分自身がドラッグされている場合
+			if (this.dragging) {
+				// 自分自身にはドロップさせない
+				e.dataTransfer.dropEffect = 'none';
+				return;
+			}
+
+			const isDeckColumn = e.dataTransfer.types[0] == 'mk-deck-column';
+
+			e.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
+
+			if (!this.dragging && isDeckColumn) this.draghover = true;
+		},
+
+		onDragleave() {
+			this.draghover = false;
+		},
+
+		onDrop(e) {
+			this.draghover = false;
+			this.$root.$emit('deck.column.dragEnd');
+
+			const id = e.dataTransfer.getData('mk-deck-column');
+			if (id != null && id != '') {
+				this.$store.commit('deviceUser/swapDeckColumn', {
+					a: this.column.id,
+					b: id
+				});
+			}
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.dnpfarvg {
+	$header-height: 42px;
+
+	height: 100%;
+	overflow: hidden;
+	box-shadow: 0 0 0 1px var(--deckColumnBorder);
+
+	&.draghover {
+		box-shadow: 0 0 0 2px var(--focus);
+
+		&:after {
+			content: "";
+			display: block;
+			position: absolute;
+			z-index: 1000;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: var(--focus);
+		}
+	}
+
+	&.dragging {
+		box-shadow: 0 0 0 2px var(--focus);
+	}
+
+	&.dropready {
+		* {
+			pointer-events: none;
+		}
+	}
+
+	&:not(.active) {
+		flex-basis: $header-height;
+		min-height: $header-height;
+
+		> header.indicated {
+			box-shadow: 4px 0px var(--accent) inset;
+		}
+	}
+
+	&.naked {
+		//background: var(--deckAcrylicColumnBg);
+		background: transparent !important;
+
+		> header {
+			background: transparent;
+			box-shadow: none;
+
+			> button {
+				color: var(--fg);
+			}
+		}
+	}
+
+	&.paged {
+		> div {
+			background: var(--bg);
+			padding: var(--margin);
+		}
+	}
+
+	> header {
+		position: relative;
+		display: flex;
+		z-index: 2;
+		line-height: $header-height;
+		padding: 0 16px;
+		font-size: 0.9em;
+		color: var(--panelHeaderFg);
+		background: var(--panelHeaderBg);
+		box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
+		cursor: pointer;
+
+		&, * {
+			user-select: none;
+		}
+
+		&.indicated {
+			box-shadow: 0 3px 0 0 var(--accent);
+		}
+
+		> .header {
+			display: inline-block;
+			align-items: center;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		> span:only-of-type {
+			width: 100%;
+		}
+
+		> .toggleActive,
+		> .action > *,
+		> .menu,
+		> .close {
+			z-index: 1;
+			width: $header-height;
+			line-height: $header-height;
+			font-size: 16px;
+			color: var(--faceTextButton);
+
+			&:hover {
+				color: var(--faceTextButtonHover);
+			}
+
+			&:active {
+				color: var(--faceTextButtonActive);
+			}
+		}
+
+		> .toggleActive, > .action {
+			margin-left: -16px;
+		}
+
+		> .action {
+			z-index: 1;
+		}
+
+		> .action:empty {
+			display: none;
+		}
+
+		> .menu,
+		> .close {
+			margin-left: auto;
+			margin-right: -16px;
+		}
+	}
+
+	> div {
+		height: calc(100% - #{$header-height});
+		overflow: auto;
+		overflow-x: hidden;
+		-webkit-overflow-scrolling: touch;
+		box-sizing: border-box;
+	}
+}
+</style>
--- a/src/client/components/deck/direct-column.vue
+++ b/src/client/components/deck/direct-column.vue
@@ -0,0 +1,39 @@
+<template>
+<x-column :name="name" :column="column" :is-stacked="isStacked" :menu="menu">
+	<template #header><fa :icon="faEnvelope" style="margin-right: 8px;"/>{{ column.name }}</template>
+
+	<x-direct/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import XColumn from './column.vue';
+import XDirect from '../../pages/messages.vue';
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XDirect
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			menu: null,
+			faEnvelope
+		}
+	},
+});
+</script>
--- a/src/client/components/deck/list-column.vue
+++ b/src/client/components/deck/list-column.vue
@@ -0,0 +1,87 @@
+<template>
+<x-column :menu="menu" :column="column" :is-stacked="isStacked">
+	<template #header>
+		<fa :icon="faListUl"/><span style="margin-left: 8px;">{{ column.name }}</span>
+	</template>
+
+	<x-timeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => $emit('loaded')"/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
+import XColumn from './column.vue';
+import XTimeline from '../timeline.vue';
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XTimeline,
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			faListUl
+		};
+	},
+
+	watch: {
+		mediaOnly() {
+			(this.$refs.timeline as any).reload();
+		}
+	},
+
+	created() {
+		this.menu = [{
+			icon: faCog,
+			text: this.$t('list'),
+			action: this.setList
+		}];
+	},
+
+	mounted() {
+		if (this.column.listId == null) {
+			this.setList();
+		}
+	},
+
+	methods: {
+		async setList() {
+			const lists = await this.$root.api('users/lists/list');
+			const { canceled, result: list } = await this.$root.dialog({
+				title: this.$t('list'),
+				type: null,
+				select: {
+					items: lists.map(x => ({
+						value: x, text: x.name
+					})),
+					default: this.column.listId
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+			Vue.set(this.column, 'listId', list.id);
+			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+		},
+
+		focus() {
+			(this.$refs.timeline as any).focus();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/client/components/deck/mentions-column.vue
+++ b/src/client/components/deck/mentions-column.vue
@@ -0,0 +1,39 @@
+<template>
+<x-column :column="column" :is-stacked="isStacked" :menu="menu">
+	<template #header><fa :icon="faAt" style="margin-right: 8px;"/>{{ column.name }}</template>
+
+	<x-mentions/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faAt } from '@fortawesome/free-solid-svg-icons';
+import XColumn from './column.vue';
+import XMentions from '../../pages/mentions.vue';
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XMentions
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			menu: null,
+			faAt
+		}
+	},
+});
+</script>
--- a/src/client/components/deck/notifications-column.vue
+++ b/src/client/components/deck/notifications-column.vue
@@ -0,0 +1,69 @@
+<template>
+<x-column :column="column" :is-stacked="isStacked" :menu="menu">
+	<template #header><fa :icon="faBell" style="margin-right: 8px;"/>{{ column.name }}</template>
+
+	<x-notifications/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faCog } from '@fortawesome/free-solid-svg-icons';
+import { faBell } from '@fortawesome/free-regular-svg-icons';
+import XColumn from './column.vue';
+import XNotifications from '../notifications.vue';
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XNotifications
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			menu: null,
+			faBell
+		}
+	},
+
+	created() {
+		if (this.column.notificationType == null) {
+			this.column.notificationType = 'all';
+			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+		}
+
+		this.menu = [{
+			icon: faCog,
+			text: this.$t('@.notification-type'),
+			action: () => {
+				this.$root.dialog({
+					title: this.$t('@.notification-type'),
+					type: null,
+					select: {
+						items: ['all', 'follow', 'mention', 'reply', 'renote', 'quote', 'reaction', 'pollVote', 'receiveFollowRequest'].map(x => ({
+							value: x, text: this.$t('@.notification-types.' + x)
+						}))
+						default: this.column.notificationType,
+					},
+					showCancelButton: true
+				}).then(({ canceled, result: type }) => {
+					if (canceled) return;
+					this.column.notificationType = type;
+					this.$store.commit('deviceUser/updateDeckColumn', this.column);
+				});
+			}
+		}];
+	},
+});
+</script>
--- a/src/client/components/deck/tl-column.vue
+++ b/src/client/components/deck/tl-column.vue
@@ -0,0 +1,145 @@
+<template>
+<x-column :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState">
+	<template #header>
+		<fa v-if="column.tl === 'home'" :icon="faHome"/>
+		<fa v-else-if="column.tl === 'local'" :icon="faComments"/>
+		<fa v-else-if="column.tl === 'social'" :icon="faShareAlt"/>
+		<fa v-else-if="column.tl === 'global'" :icon="faGlobe"/>
+		<span style="margin-left: 8px;">{{ column.name }}</span>
+	</template>
+
+	<div class="iwaalbte" v-if="disabled">
+		<p>
+			<fa :icon="faMinusCircle"/>
+			{{ $t('disabled-timeline.title') }}
+		</p>
+		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
+	</div>
+	<x-timeline v-else-if="column.tl" ref="timeline" :src="column.tl" @after="() => $emit('loaded')" @queue="queueUpdated" @note="onNote" :key="column.tl"/>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@fortawesome/free-solid-svg-icons';
+import XColumn from './column.vue';
+import XTimeline from '../timeline.vue';
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XTimeline,
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true
+		},
+		isStacked: {
+			type: Boolean,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			menu: null,
+			disabled: false,
+			indicated: false,
+			columnActive: true,
+			faMinusCircle, faHome, faComments, faShareAlt, faGlobe,
+		};
+	},
+
+	watch: {
+		mediaOnly() {
+			(this.$refs.timeline as any).reload();
+		}
+	},
+
+	created() {
+		this.menu = [{
+			icon: faCog,
+			text: this.$t('timeline'),
+			action: this.setType
+		}];
+	},
+
+	mounted() {
+		if (this.column.tl == null) {
+			this.setType();
+		} else {
+			this.disabled = !this.$store.state.i.isModerator && !this.$store.state.i.isAdmin && (
+				this.$store.state.instance.meta.disableLocalTimeline && ['local', 'social'].includes(this.column.tl) ||
+				this.$store.state.instance.meta.disableGlobalTimeline && ['global'].includes(this.column.tl));
+		}
+	},
+
+	methods: {
+		async setType() {
+			const { canceled, result: src } = await this.$root.dialog({
+				title: this.$t('timeline'),
+				type: null,
+				select: {
+					items: [{
+						value: 'home', text: this.$t('_timelines.home')
+					}, {
+						value: 'local', text: this.$t('_timelines.local')
+					}, {
+						value: 'social', text: this.$t('_timelines.social')
+					}, {
+						value: 'global', text: this.$t('_timelines.global')
+					}]
+				},
+			});
+			if (canceled) {
+				if (this.column.tl == null) {
+					this.$store.commit('deviceUser/removeDeckColumn', this.column.id);
+				}
+				return;
+			}
+			Vue.set(this.column, 'tl', src);
+			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+		},
+
+		queueUpdated(q) {
+			if (this.columnActive) {
+				this.indicated = q !== 0;
+			}
+		},
+
+		onNote() {
+			if (!this.columnActive) {
+				this.indicated = true;
+			}
+		},
+
+		onChangeActiveState(state) {
+			this.columnActive = state;
+
+			if (this.columnActive) {
+				this.indicated = false;
+			}
+		},
+
+		focus() {
+			(this.$refs.timeline as any).focus();
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.iwaalbte {
+	text-align: center;
+
+	> p {
+		margin: 16px;
+
+		&.desc {
+			font-size: 14px;
+		}
+	}
+}
+</style>
--- a/src/client/components/deck/widgets-column.vue
+++ b/src/client/components/deck/widgets-column.vue
@@ -0,0 +1,151 @@
+<template>
+<x-column :menu="menu" :naked="true" :column="column" :is-stacked="isStacked">
+	<template #header><fa :icon="faWindowMaximize" style="margin-right: 8px;"/>{{ column.name }}</template>
+
+	<div class="wtdtxvec">
+		<template v-if="edit">
+			<header>
+				<select v-model="widgetAdderSelected" @change="addWidget">
+					<option v-for="widget in widgets" :value="widget" :key="widget">{{ widget }}</option>
+				</select>
+			</header>
+			<x-draggable
+				:list="column.widgets"
+				animation="150"
+				@sort="onWidgetSort"
+			>
+				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @click="widgetFunc(widget.id)">
+					<button class="remove _button" @click="removeWidget(widget)"><fa :icon="faTimes"/></button>
+					<component :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :is-customize-mode="true" :column="column"/>
+				</div>
+			</x-draggable>
+		</template>
+		<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" :column="column"/>
+	</div>
+</x-column>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as XDraggable from 'vuedraggable';
+import { v4 as uuid } from 'uuid';
+import { faWindowMaximize, faTimes, faCog } from '@fortawesome/free-solid-svg-icons';
+import XColumn from './column.vue';
+import { widgets } from '../../widgets';
+
+export default Vue.extend({
+	components: {
+		XColumn,
+		XDraggable,
+	},
+
+	props: {
+		column: {
+			type: Object,
+			required: true,
+		},
+		isStacked: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			edit: false,
+			menu: null,
+			widgetAdderSelected: null,
+			widgets,
+			faWindowMaximize, faTimes
+		};
+	},
+
+	created() {
+		this.menu = [{
+			icon: faCog,
+			text: this.$t('edit'),
+			action: () => {
+				this.edit = !this.edit;
+			}
+		}];
+	},
+
+	methods: {
+		widgetFunc(id) {
+			this.$refs[id][0].setting();
+		},
+
+		onWidgetSort() {
+			this.saveWidgets();
+		},
+
+		addWidget() {
+			this.$store.commit('deviceUser/addDeckWidget', {
+				id: this.column.id,
+				widget: {
+					name: this.widgetAdderSelected,
+					id: uuid(),
+					data: {}
+				}
+			});
+
+			this.widgetAdderSelected = null;
+		},
+
+		removeWidget(widget) {
+			this.$store.commit('deviceUser/removeDeckWidget', {
+				id: this.column.id,
+				widget
+			});
+		},
+
+		saveWidgets() {
+			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.wtdtxvec {
+	padding-top: 1px; // ウィジェットのbox-shadowを利用した1px borderを隠さないようにするため
+
+	> header {
+		padding: 16px;
+
+		> * {
+			width: 100%;
+			padding: 4px;
+		}
+	}
+
+	> .widget, .customize-container {
+		margin: 8px;
+
+		&:first-of-type {
+			margin-top: 0;
+		}
+	}
+
+	.customize-container {
+		position: relative;
+		cursor: move;
+
+		> *:not(.remove) {
+			pointer-events: none;
+		}
+
+		> .remove {
+			position: absolute;
+			z-index: 2;
+			top: 8px;
+			right: 8px;
+			width: 32px;
+			height: 32px;
+			color: #fff;
+			background: rgba(#000, 0.7);
+			border-radius: 4px;
+		}
+	}
+}
+</style>
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-dialog" :class="{ iconOnly }">
 	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg" ref="bg" @click="onBgClick" v-if="show"></div>
+		<div class="bg _modalBg" ref="bg" @click="onBgClick" v-if="show"></div>
 	</transition>
 	<transition :name="$store.state.device.animation ? 'dialog' : ''" appear @after-leave="() => { destroyDom(); }">
 		<div class="main" ref="main" v-if="show">
@@ -245,16 +245,6 @@ export default Vue.extend({
 		width: initial;
 	}

-	> .bg {
-		display: block;
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(0,0,0,0.7);
-	}
-
 	> .main {
 		display: block;
 		position: fixed;
--- a/src/client/components/error.vue
+++ b/src/client/components/error.vue
@@ -1,9 +1,11 @@
 <template>
-<div class="mjndxjcg _panel">
-	<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-	<p><fa :icon="faExclamationTriangle"/> {{ $t('error') }}</p>
-	<mk-button @click="() => $emit('retry')" class="button">{{ $t('retry') }}</mk-button>
-</div>
+<transition :name="$store.state.device.animation ? 'zoom' : ''" appear>
+	<div class="mjndxjcg _panel">
+		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
+		<p><fa :icon="faExclamationTriangle"/> {{ $t('error') }}</p>
+		<mk-button @click="() => $emit('retry')" class="button">{{ $t('retry') }}</mk-button>
+	</div>
+</transition>
 </template>

 <script lang="ts">
@@ -38,7 +40,7 @@ export default Vue.extend({

 	> img {
 		vertical-align: bottom;
-		height: 150px;
+		height: 128px;
 		margin-bottom: 16px;
 		border-radius: 16px;
 	}
--- a/src/client/components/form-window.vue
+++ b/src/client/components/form-window.vue
@@ -0,0 +1,71 @@
+<template>
+<x-window ref="window" :width="400" :height="450" :no-padding="true" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="false" @ok="ok()" :can-close="false">
+	<template #header>
+		{{ title }}
+	</template>
+	<div class="xkpnjxcv">
+		<label v-for="item in Object.keys(form).filter(item => !form[item].hidden)" :key="item">
+			<mk-input v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1"><span v-text="form[item].label || item"></span></mk-input>
+			<mk-input v-else-if="form[item].type === 'string' && !item.multiline" v-model="values[item]" type="text"><span v-text="form[item].label || item"></span></mk-input>
+			<mk-textarea v-else-if="form[item].type === 'string' && item.multiline" v-model="values[item]"><span v-text="form[item].label || item"></span></mk-textarea>
+			<mk-switch v-else-if="form[item].type === 'boolean'" v-model="values[item]"><span v-text="form[item].label || item"></span></mk-switch>
+		</label>
+	</div>
+</x-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XWindow from './window.vue';
+import MkInput from './ui/input.vue';
+import MkTextarea from './ui/textarea.vue';
+import MkSwitch from './ui/switch.vue';
+
+export default Vue.extend({
+	components: {
+		XWindow,
+		MkInput,
+		MkTextarea,
+		MkSwitch,
+	},
+
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+		form: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			values: {}
+		};
+	},
+
+	created() {
+		for (const item in this.form) {
+			Vue.set(this.values, item, this.form[item].default || null);
+		}
+	},
+
+	methods: {
+		ok() {
+			this.$emit('ok', this.values);
+			this.$refs.window.close();
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.xkpnjxcv {
+	> label {
+		display: block;
+		padding: 16px 24px;
+	}
+}
+</style>
--- a/src/client/components/google.vue
+++ b/src/client/components/google.vue
@@ -44,10 +44,12 @@ export default Vue.extend({
 		font-size: 16px;
 		border: solid 1px var(--divider);
 		border-radius: 4px 0 0 4px;
+		-webkit-appearance: textfield;
 	}

 	> button {
 		flex-shrink: 0;
+		margin: 0;
 		padding: 0 16px;
 		border: solid 1px var(--divider);
 		border-left: none;
--- a/src/client/components/modal.vue
+++ b/src/client/components/modal.vue
@@ -1,10 +1,10 @@
 <template>
 <div class="mk-modal" v-hotkey.global="keymap">
 	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg" ref="bg" v-if="show" @click="close()"></div>
+		<div class="bg _modalBg" ref="bg" v-if="show" @click="canClose ? close() : () => {}"></div>
 	</transition>
 	<transition :name="$store.state.device.animation ? 'modal' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
-		<div class="content" ref="content" v-if="show" @click.self="close()"><slot></slot></div>
+		<div class="content" ref="content" v-if="show" @click.self="canClose ? close() : () => {}"><slot></slot></div>
 	</transition>
 </div>
 </template>
@@ -14,6 +14,11 @@ import Vue from 'vue';

 export default Vue.extend({
 	props: {
+		canClose: {
+			type: Boolean,
+			required: false,
+			default: true,
+		},
 	},
 	data() {
 		return {
@@ -55,13 +60,7 @@ export default Vue.extend({

 .mk-modal {
 	> .bg {
-		position: fixed;
-		top: 0;
-		left: 0;
 		z-index: 10000;
-		width: 100%;
-		height: 100%;
-		background: var(--modalBg)
 	}

 	> .content {
--- a/src/client/components/note-header.vue
+++ b/src/client/components/note-header.vue
@@ -54,7 +54,6 @@ export default Vue.extend({
 		margin: 0 .5em 0 0;
 		padding: 0;
 		overflow: hidden;
-		color: var(--noteHeaderName);
 		font-size: 1em;
 		font-weight: bold;
 		text-decoration: none;
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -53,7 +53,7 @@
 						<x-media-list :media-list="appearNote.files" :parent-element="noteBody"/>
 					</div>
 					<x-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
-					<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="true" class="url-preview"/>
+					<mk-url-preview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="detail" class="url-preview"/>
 					<div class="renote" v-if="appearNote.renote"><x-note-preview :note="appearNote.renote"/></div>
 				</div>
 			</div>
@@ -89,7 +89,7 @@

 <script lang="ts">
 import Vue from 'vue';
-import { faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
+import { faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { parse } from '../../mfm/parse';
 import { sum, unique } from '../../prelude/array';
@@ -108,7 +108,6 @@ import { url } from '../config';
 import copyToClipboard from '../scripts/copy-to-clipboard';

 export default Vue.extend({
-	
 	components: {
 		XSub,
 		XNoteHeader,
@@ -145,7 +144,7 @@ export default Vue.extend({
 			showContent: false,
 			hideThisNote: false,
 			noteBody: this.$refs.noteBody,
-			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faEllipsisH
+			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug
 		};
 	},

@@ -612,6 +611,16 @@ export default Vue.extend({
 				.filter(x => x !== undefined);
 			}

+			if (this.$store.state.noteActions.length > 0) {
+				menu = menu.concat([null, ...this.$store.state.noteActions.map(action => ({
+					icon: faPlug,
+					text: action.title,
+					action: () => {
+						action.handler(this.appearNote);
+					}
+				}))]);
+			}
+
 			this.$root.menu({
 				items: menu,
 				source: this.$refs.menuButton,
@@ -724,61 +733,6 @@ export default Vue.extend({
 	transition: box-shadow 0.1s ease;
 	overflow: hidden;

-	&.max-width_500px {
-		font-size: 0.9em;
-	}
-
-	&.max-width_450px {
-		> .renote {
-			padding: 8px 16px 0 16px;
-		}
-
-		> .article {
-			padding: 14px 16px 9px;
-
-			> .avatar {
-				margin: 0 10px 8px 0;
-				width: 50px;
-				height: 50px;
-			}
-		}
-	}
-
-	&.max-width_350px {
-		> .article {
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 18px;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	&.max-width_300px {
-		font-size: 0.825em;
-
-		> .article {
-			> .avatar {
-				width: 44px;
-				height: 44px;
-			}
-
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 12px;
-						}
-					}
-				}
-			}
-		}
-	}
-
 	&:focus {
 		outline: none;
 		box-shadow: 0 0 0 3px var(--focus);
@@ -797,10 +751,6 @@ export default Vue.extend({
 		white-space: pre;
 		color: #d28a3f;

-		@media (max-width: 450px) {
-			padding: 8px 16px 0 16px;
-		}
-
 		> [data-icon] {
 			margin-right: 4px;
 		}
@@ -985,5 +935,64 @@ export default Vue.extend({
 	> .reply {
 		border-top: solid 1px var(--divider);
 	}
+
+	&.max-width_500px {
+		font-size: 0.9em;
+	}
+
+	&.max-width_450px {
+		> .renote {
+			padding: 8px 16px 0 16px;
+		}
+
+		> .info {
+			padding: 8px 16px 0 16px;
+		}
+
+		> .article {
+			padding: 14px 16px 9px;
+
+			> .avatar {
+				margin: 0 10px 8px 0;
+				width: 50px;
+				height: 50px;
+			}
+		}
+	}
+
+	&.max-width_350px {
+		> .article {
+			> .main {
+				> .footer {
+					> .button {
+						&:not(:last-child) {
+							margin-right: 18px;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&.max-width_300px {
+		font-size: 0.825em;
+
+		> .article {
+			> .avatar {
+				width: 44px;
+				height: 44px;
+			}
+
+			> .main {
+				> .footer {
+					> .button {
+						&:not(:last-child) {
+							margin-right: 12px;
+						}
+					}
+				}
+			}
+		}
+	}
 }
 </style>
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-notes" v-size="[{ max: 500 }]">
+<div class="mk-notes">
 	<div class="_fullinfo" v-if="empty">
 		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 		<div>{{ $t('noNotes') }}</div>
@@ -14,7 +14,7 @@
 		</button>
 	</div>

-	<x-list ref="notes" class="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
+	<x-list ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
 		<x-note :note="note" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
 	</x-list>

@@ -85,21 +85,3 @@ export default Vue.extend({
 });
 </script>

-<style lang="scss" scoped>
-.mk-notes {
-	> .notes {
-		> ::v-deep *:not(:last-child) {
-			margin-bottom: var(--marginFull);
-		}
-	}
-
-	&.max-width_500px {
-		> .notes {
-			> ::v-deep *:not(:last-child) {
-				//margin-bottom: var(--marginHalf);
-				margin-bottom: 0;
-			}
-		}
-	}
-}
-</style>
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -87,13 +87,6 @@ export default Vue.extend({

 <style lang="scss" scoped>
 .mfcuwfyp {
-	> .notifications {
-		> ::v-deep * {
-			//margin-bottom: var(--margin);
-			margin-bottom: 0;
-		}
-	}
-
 	> .empty {
 		margin: 0;
 		padding: 16px;
--- a/src/client/components/popup.vue
+++ b/src/client/components/popup.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-popup" v-hotkey.global="keymap">
 	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<div class="bg" ref="bg" @click="close()" v-if="show"></div>
+		<div class="bg _modalBg" ref="bg" @click="close()" v-if="show"></div>
 	</transition>
 	<transition :name="$store.state.device.animation ? 'popup' : ''" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
 		<div class="content" :class="{ fixed }" ref="content" v-if="show" :style="{ width: width ? width + 'px' : 'auto' }"><slot></slot></div>
@@ -128,13 +128,7 @@ export default Vue.extend({

 .mk-popup {
 	> .bg {
-		position: fixed;
-		top: 0;
-		left: 0;
 		z-index: 10000;
-		width: 100%;
-		height: 100%;
-		background: var(--modalBg)
 	}

 	> .content {
--- a/src/client/components/post-form-dialog.vue
+++ b/src/client/components/post-form-dialog.vue
@@ -1,7 +1,7 @@
 <template>
-<div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
+<div class="ulveipgl">
 	<transition :name="$store.state.device.animation ? 'form-fade' : ''" appear @after-leave="$emit('closed');">
-		<div class="bg" ref="bg" v-if="show" @click="close()"></div>
+		<div class="bg _modalBg" ref="bg" v-if="show" @click="close()"></div>
 	</transition>
 	<div class="main" ref="main" @click.self="close()" @keydown="onKeydown">
 		<transition :name="$store.state.device.animation ? 'form' : ''" appear
@@ -119,16 +119,9 @@ export default Vue.extend({
 	opacity: 0;
 }

-.ulveipglmagnxfgvitaxyszerjwiqmwl {
+.ulveipgl {
 	> .bg {
-		display: block;
-		position: fixed;
 		z-index: 10000;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(#000, 0.7);
 	}

 	> .main {
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -44,6 +44,7 @@
 			<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$t('useCw')"><fa :icon="faEyeSlash"/></button>
 			<button class="_button" @click="insertMention" v-tooltip="$t('mention')"><fa :icon="faAt"/></button>
 			<button class="_button" @click="insertEmoji" v-tooltip="$t('emoji')"><fa :icon="faLaughSquint"/></button>
+			<button class="_button" @click="showActions" v-tooltip="$t('plugin')" v-if="$store.state.postFormActions.length > 0"><fa :icon="faPlug"/></button>
 		</footer>
 		<input ref="file" class="file _button" type="file" multiple="multiple" @change="onChangeFile"/>
 	</div>
@@ -52,7 +53,7 @@

 <script lang="ts">
 import Vue from 'vue';
-import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faCloud, faLink, faAt, faBiohazard } from '@fortawesome/free-solid-svg-icons';
+import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faCloud, faLink, faAt, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faEyeSlash, faLaughSquint } from '@fortawesome/free-regular-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { length } from 'stringz';
@@ -133,7 +134,7 @@ export default Vue.extend({
 			draghover: false,
 			quoteId: null,
 			recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'),
-			faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faEyeSlash, faLaughSquint, faPlus, faPhotoVideo, faCloud, faLink, faAt, faBiohazard
+			faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faEyeSlash, faLaughSquint, faPlus, faPhotoVideo, faCloud, faLink, faAt, faBiohazard, faPlug
 		};
 	},

@@ -580,6 +581,22 @@ export default Vue.extend({
 				vm.close();
 			});
 		},
+
+		showActions(ev) {
+			this.$root.menu({
+				items: this.$store.state.postFormActions.map(action => ({
+					text: action.title,
+					action: () => {
+						action.handler({
+							text: this.text
+						}, (key, value) => {
+							if (key === 'text') { this.text = value; }
+						});
+					}
+				})),
+				source: ev.currentTarget || ev.target,
+			});
+		}
 	}
 });
 </script>
@@ -713,7 +730,7 @@ export default Vue.extend({
 					margin-right: 14px;
 					padding: 8px 0 8px 8px;
 					border-radius: 8px;
-					background: var(--nwjktjjq);
+					background: var(--X4);

 					> button {
 						padding: 4px 8px;
@@ -795,7 +812,7 @@ export default Vue.extend({
 				border-radius: 6px;

 				&:hover {
-					background: var(--geavgsxy);
+					background: var(--X5);
 				}

 				&.active {
--- a/src/client/components/reaction-picker.vue
+++ b/src/client/components/reaction-picker.vue
@@ -4,7 +4,7 @@
 		<div class="buttons" ref="buttons" :class="{ showFocus }">
 			<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="reaction" v-particle><x-reaction-icon :reaction="reaction"/></button>
 		</div>
-		<input class="text" v-model="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
+		<input class="text" v-model.trim="text" :placeholder="$t('enterEmoji')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
 	</div>
 </x-popup>
 </template>
--- a/src/client/components/reactions-viewer.reaction.vue
+++ b/src/client/components/reactions-viewer.reaction.vue
@@ -9,9 +9,9 @@
 	@mouseleave="onMouseleave"
 	@touchend="onMouseleave"
 	ref="reaction"
-	v-particle
+	v-particle="canToggle"
 >
-	<x-reaction-icon :reaction="reaction" :customEmojis="note.emojis" ref="icon"/>
+	<x-reaction-icon :reaction="reaction" :custom-emojis="note.emojis" ref="icon"/>
 	<span>{{ count }}</span>
 </button>
 </template>
@@ -55,21 +55,20 @@ export default Vue.extend({
 			return this.$store.getters.isSignedIn && this.$store.state.i.id === this.note.userId;
 		},
 		canToggle(): boolean {
-			return !this.reaction.match(/@\w/);
+			return !this.reaction.match(/@\w/) && !this.isMe && this.$store.getters.isSignedIn;
 		},
 	},
-	mounted() {
-		if (!this.isInitial) this.anime();
-	},
 	watch: {
 		count(newCount, oldCount) {
 			if (oldCount < newCount) this.anime();
 			if (this.details != null) this.openDetails();
 		},
 	},
+	mounted() {
+		if (!this.isInitial) this.anime();
+	},
 	methods: {
 		toggleReaction() {
-			if (this.isMe) return;
 			if (!this.canToggle) return;

 			const oldReaction = this.note.myReaction;
--- a/src/client/components/sidebar.vue
+++ b/src/client/components/sidebar.vue
@@ -0,0 +1,487 @@
+<template>
+<div class="mvcprjjd">
+	<transition name="nav-back">
+		<div class="nav-back _modalBg"
+			v-if="showing"
+			@click="showing = false"
+			@touchstart="showing = false"
+		></div>
+	</transition>
+
+	<transition name="nav">
+		<nav class="nav" v-show="showing">
+			<div>
+				<button class="item _button account" @click="openAccountMenu" v-if="$store.getters.isSignedIn">
+					<mk-avatar :user="$store.state.i" class="avatar"/><mk-acct class="text" :user="$store.state.i"/>
+				</button>
+				<button class="item _button index active" @click="top()" v-if="$route.name === 'index'">
+					<fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span>
+				</button>
+				<router-link class="item index" active-class="active" to="/" exact v-else>
+					<fa :icon="faHome" fixed-width/><span class="text">{{ $store.getters.isSignedIn ? $t('timeline') : $t('home') }}</span>
+				</router-link>
+				<template v-for="item in menu">
+					<div v-if="item === '-'" class="divider"></div>
+					<component v-else-if="menuDef[item] && (menuDef[item].show !== false)" :is="menuDef[item].to ? 'router-link' : 'button'" class="item _button" :class="item" active-class="active" @click="() => { if (menuDef[item].action) menuDef[item].action() }" :to="menuDef[item].to">
+						<fa :icon="menuDef[item].icon" fixed-width/><span class="text">{{ $t(menuDef[item].title) }}</span>
+						<i v-if="menuDef[item].indicated"><fa :icon="faCircle"/></i>
+					</component>
+				</template>
+				<div class="divider"></div>
+				<button class="item _button" :class="{ active: $route.path === '/instance' || $route.path.startsWith('/instance/') }" v-if="$store.getters.isSignedIn && ($store.state.i.isAdmin || $store.state.i.isModerator)" @click="oepnInstanceMenu">
+					<fa :icon="faServer" fixed-width/><span class="text">{{ $t('instance') }}</span>
+				</button>
+				<button class="item _button" @click="more">
+					<fa :icon="faEllipsisH" fixed-width/><span class="text">{{ $t('more') }}</span>
+					<i v-if="otherNavItemIndicated"><fa :icon="faCircle"/></i>
+				</button>
+				<router-link class="item" active-class="active" to="/preferences">
+					<fa :icon="faCog" fixed-width/><span class="text">{{ $t('settings') }}</span>
+				</router-link>
+			</div>
+		</nav>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
+import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
+import { host, instanceName } from '../config';
+import { search } from '../scripts/search';
+
+export default Vue.extend({
+	data() {
+		return {
+			host: host,
+			showing: false,
+			searching: false,
+			accounts: [],
+			connection: null,
+			menuDef: this.$store.getters.nav({
+				search: this.search
+			}),
+			faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faProjectDiagram
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.deviceUser.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			if (!this.$store.getters.isSignedIn) return false;
+			for (const def in this.menuDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.showing = false;
+		},
+	},
+
+	methods: {
+		show() {
+			this.showing = true;
+		},
+
+		top() {
+			window.scroll({ top: 0, behavior: 'smooth' });
+		},
+
+		search() {
+			if (this.searching) return;
+
+			this.$root.dialog({
+				title: this.$t('search'),
+				input: true
+			}).then(async ({ canceled, result: query }) => {
+				if (canceled || query == null || query === '') return;
+
+				this.searching = true;
+				search(this, query).finally(() => {
+					this.searching = false;
+				});
+			});
+		},
+
+		async openAccountMenu(ev) {
+			const accounts = (await this.$root.api('users/show', { userIds: this.$store.state.device.accounts.map(x => x.id) })).filter(x => x.id !== this.$store.state.i.id);
+
+			const accountItems = accounts.map(account => ({
+				type: 'user',
+				user: account,
+				action: () => { this.switchAccount(account); }
+			}));
+
+			this.$root.menu({
+				items: [...[{
+					type: 'link',
+					text: this.$t('profile'),
+					to: `/@${ this.$store.state.i.username }`,
+					avatar: this.$store.state.i,
+				}, {
+					type: 'link',
+					text: this.$t('accountSettings'),
+					to: '/my/settings',
+					icon: faCog,
+				}, null, ...accountItems, {
+					icon: faPlus,
+					text: this.$t('addAcount'),
+					action: () => {
+						this.$root.menu({
+							items: [{
+								text: this.$t('existingAcount'),
+								action: () => { this.addAcount(); },
+							}, {
+								text: this.$t('createAccount'),
+								action: () => { this.createAccount(); },
+							}],
+							align: 'left',
+							fixed: true,
+							width: 240,
+							source: ev.currentTarget || ev.target,
+						});
+					},
+				}]],
+				align: 'left',
+				fixed: true,
+				width: 240,
+				source: ev.currentTarget || ev.target,
+			});
+		},
+
+		oepnInstanceMenu(ev) {
+			this.$root.menu({
+				items: [{
+					type: 'link',
+					text: this.$t('dashboard'),
+					to: '/instance',
+					icon: faTachometerAlt,
+				}, null, {
+					type: 'link',
+					text: this.$t('settings'),
+					to: '/instance/settings',
+					icon: faCog,
+				}, {
+					type: 'link',
+					text: this.$t('customEmojis'),
+					to: '/instance/emojis',
+					icon: faLaugh,
+				}, {
+					type: 'link',
+					text: this.$t('users'),
+					to: '/instance/users',
+					icon: faUsers,
+				}, {
+					type: 'link',
+					text: this.$t('files'),
+					to: '/instance/files',
+					icon: faCloud,
+				}, {
+					type: 'link',
+					text: this.$t('jobQueue'),
+					to: '/instance/queue',
+					icon: faExchangeAlt,
+				}, {
+					type: 'link',
+					text: this.$t('federation'),
+					to: '/instance/federation',
+					icon: faGlobe,
+				}, {
+					type: 'link',
+					text: this.$t('relays'),
+					to: '/instance/relays',
+					icon: faProjectDiagram,
+				}, {
+					type: 'link',
+					text: this.$t('announcements'),
+					to: '/instance/announcements',
+					icon: faBroadcastTower,
+				}],
+				align: 'left',
+				fixed: true,
+				width: 200,
+				source: ev.currentTarget || ev.target,
+			});
+		},
+
+		more(ev) {
+			const items = Object.keys(this.menuDef).filter(k => !this.menu.includes(k)).map(k => this.menuDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
+				type: def.to ? 'link' : 'button',
+				text: this.$t(def.title),
+				icon: def.icon,
+				to: def.to,
+				action: def.action,
+				indicate: def.indicated,
+			}));
+			this.$root.menu({
+				items: [...items, null, {
+					type: 'link',
+					text: this.$t('help'),
+					to: '/docs',
+					icon: faQuestionCircle,
+				}, {
+					type: 'link',
+					text: this.$t('aboutX', { x: instanceName || host }),
+					to: '/about',
+					icon: faInfoCircle,
+				}, {
+					type: 'link',
+					text: this.$t('aboutMisskey'),
+					to: '/about-misskey',
+					icon: faInfoCircle,
+				}],
+				align: 'left',
+				fixed: true,
+				width: 200,
+				source: ev.currentTarget || ev.target,
+			});
+		},
+
+		async addAcount() {
+			this.$root.new(await import('./signin-dialog.vue').then(m => m.default)).$once('login', res => {
+				this.$store.dispatch('addAcount', res);
+				this.$root.dialog({
+					type: 'success',
+					iconOnly: true, autoClose: true
+				});
+			});
+		},
+
+		async createAccount() {
+			this.$root.new(await import('./signup-dialog.vue').then(m => m.default)).$once('signup', res => {
+				this.$store.dispatch('addAcount', res);
+				this.switchAccountWithToken(res.i);
+			});
+		},
+
+		async switchAccount(account: any) {
+			const token = this.$store.state.device.accounts.find((x: any) => x.id === account.id).token;
+			this.switchAccountWithToken(token);
+		},
+
+		switchAccountWithToken(token: string) {
+			this.$root.dialog({
+				type: 'waiting',
+				iconOnly: true
+			});
+
+			this.$root.api('i', {}, token).then((i: any) => {
+				this.$store.dispatch('switchAccount', {
+					...i,
+					token: token
+				}).then(() => {
+					this.$nextTick(() => {
+						location.reload();
+					});
+				});
+			});
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.nav-enter-active,
+.nav-leave-active {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.nav-enter,
+.nav-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.nav-back-enter-active,
+.nav-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.nav-back-enter,
+.nav-back-leave-active {
+	opacity: 0;
+}
+
+.mvcprjjd {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-width: 250px; // TODO: どこかに集約したい
+	$nav-icon-only-width: 80px; // TODO: どこかに集約したい
+	$nav-icon-only-threshold: 1279px; // TODO: どこかに集約したい
+	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
+
+	> .nav-back {
+		z-index: 1001;
+	}
+
+	> .nav {
+		$avatar-size: 32px;
+		$avatar-margin: 8px;
+
+		flex: 0 0 $nav-width;
+		width: $nav-width;
+		box-sizing: border-box;
+
+		@media (max-width: $nav-icon-only-threshold) {
+			flex: 0 0 $nav-icon-only-width;
+			width: $nav-icon-only-width;
+		}
+
+		@media (max-width: $nav-hide-threshold) {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1001;
+		}
+
+		@media (min-width: $nav-hide-threshold + 1px) {
+			display: block !important;
+		}
+
+		> div {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 1001;
+			width: $nav-width;
+			// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+			height: calc(var(--vh, 1vh) * 100);
+			box-sizing: border-box;
+			overflow: auto;
+			background: var(--navBg);
+			border-right: solid 1px var(--divider);
+
+			> .divider {
+				margin: 16px 0;
+				border-top: solid 1px var(--divider);
+			}
+
+			@media (max-width: $nav-icon-only-threshold) and (min-width: $nav-hide-threshold + 1px) {
+				width: $nav-icon-only-width;
+
+				> .divider {
+					margin: 8px auto;
+					width: calc(100% - 32px);
+				}
+
+				> .item {
+					&:first-child {
+						margin-bottom: 8px;
+					}
+
+					&:last-child {
+						margin-top: 8px;
+					}
+				}
+			}
+
+			> .item {
+				position: relative;
+				display: block;
+				padding-left: 32px;
+				font-size: $ui-font-size;
+				line-height: 3.2rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				color: var(--navFg);
+
+				> [data-icon] {
+					width: 32px;
+				}
+
+				> [data-icon],
+				> .avatar {
+					margin-right: $avatar-margin;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> i {
+					position: absolute;
+					top: 0;
+					left: 20px;
+					color: var(--navIndicator);
+					font-size: 8px;
+					animation: blink 1s infinite;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&:first-child, &:last-child {
+					position: sticky;
+					z-index: 1;
+					padding-top: 8px;
+					padding-bottom: 8px;
+					background: var(--X14);
+					-webkit-backdrop-filter: blur(8px);
+					backdrop-filter: blur(8px);
+				}
+
+				&:first-child {
+					top: 0;
+					margin-bottom: 16px;
+					border-bottom: solid 1px var(--divider);
+				}
+
+				&:last-child {
+					bottom: 0;
+					margin-top: 16px;
+					border-top: solid 1px var(--divider);
+				}
+
+				@media (max-width: $nav-icon-only-threshold) and (min-width: $nav-hide-threshold + 1px) {
+					padding-left: 0;
+					width: 100%;
+					text-align: center;
+					font-size: $ui-font-size * 1.2;
+					line-height: 3.7rem;
+
+					> [data-icon],
+					> .avatar {
+						margin-right: 0;
+					}
+
+					> i {
+						left: 10px;
+					}
+
+					> .text {
+						display: none;
+					}
+				}
+			}
+
+			@media (max-width: $nav-hide-threshold) {
+				> .index,
+				> .notifications {
+					display: none;
+				}
+			}
+		}
+	}
+}
+</style>
--- a/src/client/components/time.vue
+++ b/src/client/components/time.vue
@@ -61,6 +61,7 @@ export default Vue.extend({
 	},
 	methods: {
 		tick() {
+			// TODO: パフォーマンス向上のため、このコンポーネントが画面内に表示されている場合のみ更新する
 			this.now = new Date();

 			this.tickId = setTimeout(() => {
--- a/src/client/components/timeline.vue
+++ b/src/client/components/timeline.vue
@@ -17,9 +17,11 @@ export default Vue.extend({
 			required: true
 		},
 		list: {
+			type: String,
 			required: false
 		},
 		antenna: {
+			type: String,
 			required: false
 		},
 		sound: {
@@ -53,6 +55,8 @@ export default Vue.extend({
 			const _note = JSON.parse(JSON.stringify(note));	// deepcopy
 			(this.$refs.tl as any).prepend(_note);

+			this.$emit('note');
+
 			if (this.sound) {
 				this.$root.sound(note.userId === this.$store.state.i.id ? 'noteMy' : 'note');
 			}
@@ -77,10 +81,10 @@ export default Vue.extend({
 		if (this.src == 'antenna') {
 			endpoint = 'antennas/notes';
 			this.query = {
-				antennaId: this.antenna.id
+				antennaId: this.antenna
 			};
 			this.connection = this.$root.stream.connectToChannel('antenna', {
-				antennaId: this.antenna.id
+				antennaId: this.antenna
 			});
 			this.connection.on('note', prepend);
 		} else if (this.src == 'home') {
@@ -106,10 +110,10 @@ export default Vue.extend({
 		} else if (this.src == 'list') {
 			endpoint = 'notes/user-list-timeline';
 			this.query = {
-				listId: this.list.id
+				listId: this.list
 			};
 			this.connection = this.$root.stream.connectToChannel('userList', {
-				listId: this.list.id
+				listId: this.list
 			});
 			this.connection.on('note', prepend);
 			this.connection.on('userAdded', onUserAdded);
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -126,11 +126,11 @@ export default Vue.extend({
 		background: var(--accent);

 		&:not(:disabled):hover {
-			background: var(--jkhztclx);
+			background: var(--X8);
 		}

 		&:not(:disabled):active {
-			background: var(--jkhztclx);
+			background: var(--X8);
 		}
 	}

--- a/src/client/components/ui/container.vue
+++ b/src/client/components/ui/container.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader }">
+<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader, scrollable }" v-size="[{ max: 500 }]">
 	<header v-if="showHeader">
 		<div class="title"><slot name="header"></slot></div>
 		<slot name="func"></slot>
@@ -47,6 +47,11 @@ export default Vue.extend({
 			required: false,
 			default: true
 		},
+		scrollable: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
 	data() {
 		return {
@@ -107,19 +112,26 @@ export default Vue.extend({
 		box-shadow: none !important;
 	}

+	&.scrollable {
+		display: flex;
+		flex-direction: column;
+
+		> div {
+			overflow: auto;
+		}
+	}
+
 	> header {
 		position: relative;
-		box-shadow: 0 1px 0 0 var(--divider);
-		z-index: 1;
+		box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
+		z-index: 2;
+		background: var(--panelHeaderBg);
+		color: var(--panelHeaderFg);

 		> .title {
 			margin: 0;
 			padding: 12px 16px;

-			@media (max-width: 500px) {
-				padding: 8px 10px;
-			}
-
 			> [data-icon] {
 				margin-right: 6px;
 			}
@@ -139,5 +151,29 @@ export default Vue.extend({
 			height: 100%;
 		}
 	}
+
+	&.max-width_500px {
+		> header {
+			> .title {
+				padding: 8px 10px;
+			}
+		}
+	}
+}
+
+._forceContainerFull_ .ukygtjoj {
+	> header {
+		> .title {
+			padding: 12px 16px !important;
+		}
+	}
+}
+
+._forceContainerFull_.ukygtjoj {
+	> header {
+		> .title {
+			padding: 12px 16px !important;
+		}
+	}
 }
 </style>
--- a/src/client/components/ui/input.vue
+++ b/src/client/components/ui/input.vue
@@ -20,6 +20,7 @@
 				:pattern="pattern"
 				:autocomplete="autocomplete"
 				:spellcheck="spellcheck"
+				:step="step"
 				@focus="focused = true"
 				@blur="focused = false"
 				@keydown="$emit('keydown', $event)"
@@ -36,6 +37,7 @@
 				:pattern="pattern"
 				:autocomplete="autocomplete"
 				:spellcheck="spellcheck"
+				:step="step"
 				@focus="focused = true"
 				@blur="focused = false"
 				@keydown="$emit('keydown', $event)"
@@ -114,6 +116,9 @@ export default Vue.extend({
 		spellcheck: {
 			required: false
 		},
+		step: {
+			required: false
+		},
 		debounce: {
 			required: false
 		},
@@ -164,7 +169,7 @@ export default Vue.extend({
 		},
 		v(v) {
 			if (this.type === 'number') {
-				this.$emit('input', parseInt(v, 10));
+				this.$emit('input', parseFloat(v));
 			} else {
 				this.$emit('input', v);
 			}
@@ -297,7 +302,7 @@ export default Vue.extend({
 			pointer-events: none;
 			transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 			transition-duration: 0.3s;
-			font-size: 16px;
+			font-size: 1em;
 			line-height: 32px;
 			color: var(--inputLabel);
 			pointer-events: none;
@@ -312,7 +317,7 @@ export default Vue.extend({
 			top: -17px;
 			left: 0 !important;
 			pointer-events: none;
-			font-size: 16px;
+			font-size: 1em;
 			line-height: 32px;
 			color: var(--inputLabel);
 			pointer-events: none;
@@ -343,7 +348,7 @@ export default Vue.extend({
 			padding: 0;
 			font: inherit;
 			font-weight: normal;
-			font-size: 16px;
+			font-size: 1em;
 			line-height: $height;
 			color: var(--inputText);
 			background: transparent;
@@ -364,7 +369,7 @@ export default Vue.extend({
 			position: absolute;
 			z-index: 1;
 			top: 0;
-			font-size: 16px;
+			font-size: 1em;
 			line-height: 32px;
 			color: var(--inputLabel);
 			pointer-events: none;
--- a/src/client/components/ui/range.vue
+++ b/src/client/components/ui/range.vue
@@ -95,7 +95,7 @@ export default Vue.extend({
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
-		background: var(--xxubwiul);
+		background: var(--X10);
 		height: 7px;
 		margin: 0 8px;
 		outline: 0;
--- a/src/client/components/ui/select.vue
+++ b/src/client/components/ui/select.vue
@@ -135,7 +135,7 @@ export default Vue.extend({
 			pointer-events: none;
 			transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 			transition-duration: 0.3s;
-			font-size: 16px;
+			font-size: 1em;
 			line-height: 32px;
 			pointer-events: none;
 			//will-change transform
@@ -150,7 +150,7 @@ export default Vue.extend({
 			padding: 0;
 			font: inherit;
 			font-weight: normal;
-			font-size: 16px;
+			font-size: 1em;
 			height: 32px;
 			background: none;
 			border: none;
@@ -170,7 +170,7 @@ export default Vue.extend({
 			display: block;
 			align-self: center;
 			justify-self: center;
-			font-size: 16px;
+			font-size: 1em;
 			line-height: 32px;
 			color: rgba(#000, 0.54);
 			pointer-events: none;
--- a/src/client/components/ui/switch.vue
+++ b/src/client/components/ui/switch.vue
@@ -5,7 +5,7 @@
 	role="switch"
 	:aria-checked="checked"
 	:aria-disabled="disabled"
-	@click="toggle"
+	@click.prevent="toggle"
 >
 	<input
 		type="checkbox"
@@ -83,8 +83,8 @@ export default Vue.extend({

 	&.checked {
 		> .button {
-			background-color: var(--xxubwiul);
-			border-color: var(--xxubwiul);
+			background-color: var(--X10);
+			border-color: var(--X10);

 			> * {
 				background-color: var(--accent);
@@ -108,7 +108,7 @@ export default Vue.extend({
 		margin: 3px 0 0 0;
 		width: 34px;
 		height: 14px;
-		background: var(--nhzhphzx);
+		background: var(--X6);
 		outline: none;
 		border-radius: 14px;
 		transition: inherit;
--- a/src/client/components/ui/textarea.vue
+++ b/src/client/components/ui/textarea.vue
@@ -133,7 +133,7 @@ export default Vue.extend({
 			pointer-events: none;
 			transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
 			transition-duration: 0.3s;
-			font-size: 16px;
+			font-size: 1em;
 			line-height: 32px;
 			pointer-events: none;
 			//will-change transform
@@ -151,7 +151,7 @@ export default Vue.extend({
 			box-sizing: border-box;
 			font: inherit;
 			font-weight: normal;
-			font-size: 16px;
+			font-size: 1em;
 			background: transparent;
 			border: none;
 			border-radius: 0;
--- a/src/client/components/uploader.vue
+++ b/src/client/components/uploader.vue
@@ -11,9 +11,7 @@
 					<span class="percentage" v-if="ctx.progressValue !== undefined">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
 				</p>
 			</div>
-			<progress v-if="ctx.progressValue !== undefined && ctx.progressValue !== ctx.progressMax" :value="ctx.progressValue" :max="ctx.progressMax"></progress>
-			<div class="progress initing" v-if="ctx.progressValue === undefined"></div>
-			<div class="progress waiting" v-if="ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax"></div>
+			<progress :value="ctx.progressValue" :max="ctx.progressMax" :class="{ initing: ctx.progressValue === undefined, waiting: ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax }"></progress>
 		</li>
 	</ol>
 </div>
@@ -117,7 +115,6 @@ export default Vue.extend({
  padding: 0;
  height: 36px;
  width: 100%;
-  box-shadow: 0 -1px 0 var(--accentAlpha01);
  border-top: solid 8px transparent;
  grid-template-columns: 36px calc(100% - 44px);
  grid-template-rows: 1fr 8px;
@@ -146,7 +143,6 @@ export default Vue.extend({
  padding: 0 8px 0 0;
  margin: 0;
  font-size: 0.8em;
-  color: var(--accentAlpha07);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
@@ -163,16 +159,13 @@ export default Vue.extend({
  flex-shrink: 0;
 }
 .mk-uploader > ol > li > .top > .status > .initing {
-  color: var(--accentAlpha05);
 }
 .mk-uploader > ol > li > .top > .status > .kb {
-  color: var(--accentAlpha05);
 }
 .mk-uploader > ol > li > .top > .status > .percentage {
  display: inline-block;
  width: 48px;
  text-align: right;
-  color: var(--accentAlpha07);
 }
 .mk-uploader > ol > li > .top > .status > .percentage:after {
  content: '%';
@@ -186,57 +179,14 @@ export default Vue.extend({
  grid-column: 2/3;
  grid-row: 2/3;
  z-index: 2;
+	width: 100%;
+	height: 8px;
 }
 .mk-uploader > ol > li > progress::-webkit-progress-value {
  background: var(--accent);
 }
 .mk-uploader > ol > li > progress::-webkit-progress-bar {
-  background: var(--accentAlpha01);
-}
-.mk-uploader > ol > li > .progress {
-  display: block;
-  border: none;
-  border-radius: 4px;
-  background: linear-gradient(45deg, var(--accentLighten30) 25%, var(--accent) 25%, var(--accent) 50%, var(--accentLighten30) 50%, var(--accentLighten30) 75%, var(--accent) 75%, var(--accent));
-  background-size: 32px 32px;
-  animation: bg 1.5s linear infinite;
-  grid-column: 2/3;
-  grid-row: 2/3;
-  z-index: 1;
-}
-.mk-uploader > ol > li > .progress.initing {
-  opacity: 0.3;
-}
-@-moz-keyframes bg {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: -64px 32px;
-  }
-}
-@-webkit-keyframes bg {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: -64px 32px;
-  }
-}
-@-o-keyframes bg {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: -64px 32px;
-  }
-}
-@keyframes bg {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: -64px 32px;
-  }
+  //background: var(--accentAlpha01);
+	background: transparent;
 }
 </style>
--- a/src/client/components/url-preview-popup.vue
+++ b/src/client/components/url-preview-popup.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="fgmtyycl _panel" :style="{ top: top + 'px', left: left + 'px' }">
+<div class="fgmtyycl _panel _shadow" :style="{ top: top + 'px', left: left + 'px' }">
 	<mk-url-preview :url="url"/>
 </div>
 </template>
--- a/src/client/components/url-preview.vue
+++ b/src/client/components/url-preview.vue
@@ -1,18 +1,16 @@
 <template>
 <div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
-	<button class="disablePlayer" @click="playerEnabled = false" :title="$t('disable-player')"><fa icon="times"/></button>
+	<button class="disablePlayer" @click="playerEnabled = false" :title="$t('disablePlayer')"><fa icon="times"/></button>
 	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen />
 </div>
-<div v-else-if="tweetUrl && detail" class="twitter">
-	<blockquote ref="tweet" class="twitter-tweet" :data-theme="$store.state.device.darkMode ? 'dark' : null">
-		<a :href="url"></a>
-	</blockquote>
+<div v-else-if="tweetId && tweetExpanded" class="twitter" ref="twitter">
+	<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', left: `${tweetLeft}px`, width: `${tweetLeft < 0 ? 'auto' : '100%'}`, height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.device.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
 </div>
 <div v-else class="mk-url-preview" v-size="[{ max: 400 }, { max: 350 }]">
 	<transition name="zoom" mode="out-in">
 		<component :is="self ? 'router-link' : 'a'" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url" v-if="!fetching">
 			<div class="thumbnail" v-if="thumbnail" :style="`background-image: url('${thumbnail}')`">
-				<button class="_button" v-if="!playerEnabled && player.url" @click.prevent="playerEnabled = true" :title="$t('enable-player')"><fa :icon="faPlayCircle"/></button>
+				<button class="_button" v-if="!playerEnabled && player.url" @click.prevent="playerEnabled = true" :title="$t('enablePlayer')"><fa :icon="faPlayCircle"/></button>
 			</div>
 			<article>
 				<header>
@@ -26,12 +24,18 @@
 			</article>
 		</component>
 	</transition>
+	<div class="expandTweet" v-if="tweetId">
+		<a @click="tweetExpanded = true">
+			<fa :icon="faTwitter"/> {{ $t('expandTweet') }}
+		</a>
+	</div>
 </div>
 </template>

 <script lang="ts">
 import Vue from 'vue';
 import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
+import { faTwitter } from '@fortawesome/free-brands-svg-icons'; 
 import { url as local, lang } from '../config';

 export default Vue.extend({
@@ -69,42 +73,29 @@ export default Vue.extend({
 				width: null,
 				height: null
 			},
-			tweetUrl: null,
+			tweetId: null,
+			tweetExpanded: this.detail,
+			embedId: `embed${Math.random().toString().replace(/\D/,'')}`,
+			tweetHeight: 150,
+ 			tweetLeft: 0,
 			playerEnabled: false,
 			self: self,
 			attr: self ? 'to' : 'href',
 			target: self ? null : '_blank',
-			faPlayCircle
+			faPlayCircle, faTwitter
 		};
 	},

 	created() {
 		const requestUrl = new URL(this.url);

-		if (this.detail && requestUrl.hostname == 'twitter.com' && /^\/.+\/status(es)?\/\d+/.test(requestUrl.pathname)) {
-			this.tweetUrl = requestUrl;
-			const twttr = (window as any).twttr || {};
-			const loadTweet = () => twttr.widgets.load(this.$refs.tweet);
-
-			if (twttr.widgets) {
-				Vue.nextTick(loadTweet);
-			} else {
-				const wjsId = 'twitter-wjs';
-				if (!document.getElementById(wjsId)) {
-					const head = document.getElementsByTagName('head')[0];
-					const script = document.createElement('script');
-					script.setAttribute('id', wjsId);
-					script.setAttribute('src', 'https://platform.twitter.com/widgets.js');
-					head.appendChild(script);
-				}
-				twttr.ready = loadTweet;
-				(window as any).twttr = twttr;
-			}
-			return;
+		if (requestUrl.hostname == 'twitter.com') {
+			const m = requestUrl.pathname.match(/^\/.+\/status(?:es)?\/(\d+)/);
+			if (m) this.tweetId = m[1];
 		}

-		if (requestUrl.hostname === 'music.youtube.com') {
-			requestUrl.hostname = 'youtube.com';
+		if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {
+			requestUrl.hostname = 'www.youtube.com';
 		}

 		const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP');
@@ -123,7 +114,30 @@ export default Vue.extend({
 				this.player = info.player;
 			})
 		});
-	}
+
+		(window as any).addEventListener('message', this.adjustTweetHeight);
+	},
+
+	mounted() {
+		// 300pxないと絶対右にはみ出るので左に移動してしまう
+		const areaWidth = (this.$el as any)?.clientWidth;
+		if (areaWidth && areaWidth < 300) this.tweetLeft = areaWidth - 241;
+	},
+
+	methods: {
+		adjustTweetHeight(message: any) {
+			if (message.origin !== 'https://platform.twitter.com') return;
+			const embed = message.data?.['twttr.embed'];
+			if (embed?.method !== 'twttr.private.resize') return;
+			if (embed?.id !== this.embedId) return;
+			const height = embed?.params[0]?.height;
+			if (height) this.tweetHeight = height;
+ 		},
+	},
+
+	beforeDestroy() {
+		(window as any).removeEventListener('message', this.adjustTweetHeight);
+	},
 });
 </script>

--- a/src/client/components/user-menu.vue
+++ b/src/client/components/user-menu.vue
@@ -4,7 +4,7 @@

 <script lang="ts">
 import Vue from 'vue';
-import { faAt, faListUl, faEye, faEyeSlash, faBan, faPencilAlt, faComments, faUsers, faMicrophoneSlash } from '@fortawesome/free-solid-svg-icons';
+import { faAt, faListUl, faEye, faEyeSlash, faBan, faPencilAlt, faComments, faUsers, faMicrophoneSlash, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faSnowflake, faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import XMenu from './menu.vue';
 import copyToClipboard from '../scripts/copy-to-clipboard';
@@ -80,6 +80,16 @@ export default Vue.extend({
 			}]);
 		}

+		if (this.$store.state.userActions.length > 0) {
+			menu = menu.concat([null, ...this.$store.state.userActions.map(action => ({
+				icon: faPlug,
+				text: action.title,
+				action: () => {
+					action.handler(this.user);
+				}
+			}))]);
+		}
+
 		return {
 			items: menu
 		};
--- a/src/client/components/user-preview.vue
+++ b/src/client/components/user-preview.vue
@@ -1,6 +1,6 @@
 <template>
 <transition name="popup" appear @after-leave="() => { $emit('closed'); destroyDom(); }">
-	<div v-if="show" class="fxxzrfni _panel" ref="content" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
+	<div v-if="show" class="fxxzrfni _panel _shadow" ref="content" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
 		<div class="banner" :style="u.bannerUrl ? `background-image: url(${u.bannerUrl})` : ''"></div>
 		<mk-avatar class="avatar" :user="u" :disable-preview="true"/>
 		<div class="title">
--- a/src/client/components/user-select.vue
+++ b/src/client/components/user-select.vue
@@ -112,7 +112,7 @@ export default Vue.extend({
 			font-size: 14px;

 			&:hover {
-				background: var(--bwqtlupy);
+				background: var(--X7);
 			}

 			&.selected {
--- a/src/client/components/window.vue
+++ b/src/client/components/window.vue
@@ -1,5 +1,5 @@
 <template>
-<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }">
+<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }" :can-close="canClose">
 	<div class="ebkgoccj" :class="{ noPadding }" @keydown="onKeydown" :style="{ width: `${width}px`, height: `${height}px` }">
 		<div class="header">
 			<button class="_button" v-if="withOkButton" @click="close()"><fa :icon="faTimes"/></button>
@@ -57,6 +57,11 @@ export default Vue.extend({
 			required: false,
 			default: 400
 		},
+		canClose: {
+			type: Boolean,
+			required: false,
+			default: true,
+		},
 	},

 	data() {
--- a/src/client/config.ts
+++ b/src/client/config.ts
@@ -18,3 +18,4 @@ export const getLocale = async () => Object.fromEntries((await entries(clientDb.
 export const version = _VERSION_;
 export const env = _ENV_;
 export const instanceName = siteName === 'Misskey' ? null : siteName;
+export const deckmode = localStorage.getItem('deckmode') === 'true';
--- a/src/client/deck.vue
+++ b/src/client/deck.vue
@@ -0,0 +1,313 @@
+<template>
+<div class="mk-deck" :class="`${$store.state.device.deckColumnAlign}`" v-hotkey.global="keymap">
+	<x-sidebar ref="nav"/>
+
+	<!-- TODO: deckMainColumnPlace を見て位置変える -->
+	<deck-column class="column" v-if="$store.state.device.deckAlwaysShowMainColumn || $route.name !== 'index'">
+		<template #action>
+			<button class="_button back" v-if="canBack" @click="back()"><fa :icon="faChevronLeft"/></button>
+		</template>
+
+		<template #header>
+			<div class="iwnjqeul">
+				<div class="default">
+					<portal-target name="avatar" slim/>
+					<span class="title"><portal-target name="icon" slim/><portal-target name="title" slim/></span>
+				</div>
+				<div class="custom">
+					<portal-target name="header" slim/>
+				</div>
+			</div>
+		</template>
+
+		<router-view></router-view>
+	</deck-column>
+
+	<template v-for="ids in layout">
+		<div v-if="ids.length > 1" class="folder column">
+			<deck-column-core v-for="id, i in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
+		</div>
+		<deck-column-core v-else class="column" :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id === ids[0])" @parent-focus="moveFocus(ids[0], $event)"/>
+	</template>
+
+	<button @click="addColumn" class="_button add"><fa :icon="faPlus"/></button>
+
+	<button v-if="$store.getters.isSignedIn" class="nav _button" @click="showNav()"><fa :icon="faBars"/><i v-if="navIndicated"><fa :icon="faCircle"/></i></button>
+	<button v-if="$store.getters.isSignedIn" class="post _buttonPrimary" @click="post()"><fa :icon="faPencilAlt"/></button>
+
+	<stream-indicator v-if="$store.getters.isSignedIn"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faPlus, faPencilAlt, faChevronLeft, faBars, faCircle } from '@fortawesome/free-solid-svg-icons';
+import {  } from '@fortawesome/free-regular-svg-icons';
+import { v4 as uuid } from 'uuid';
+import { host } from './config';
+import { search } from './scripts/search';
+import DeckColumnCore from './components/deck/column-core.vue';
+import DeckColumn from './components/deck/column.vue';
+import XSidebar from './components/sidebar.vue';
+
+export default Vue.extend({
+	components: {
+		XSidebar,
+		DeckColumn,
+		DeckColumnCore,
+	},
+
+	data() {
+		return {
+			host: host,
+			pageKey: 0,
+			searching: false,
+			connection: null,
+			searchQuery: '',
+			searchWait: false,
+			canBack: false,
+			menuDef: this.$store.getters.nav({}),
+			wallpaper: localStorage.getItem('wallpaper') != null,
+			faPlus, faPencilAlt, faChevronLeft, faBars, faCircle
+		};
+	},
+
+	computed: {
+		deck() {
+			return this.$store.state.deviceUser.deck;
+		},
+		columns(): any[] {
+			return this.deck.columns;
+		},
+		layout(): any[] {
+			return this.deck.layout;
+		},
+		navIndicated(): boolean {
+			if (!this.$store.getters.isSignedIn) return false;
+			for (const def in this.menuDef) {
+				if (this.menuDef[def].indicated) return true;
+			}
+			return false;
+		},
+		keymap(): any {
+			return {
+				'p': this.post,
+				'n': this.post,
+				's': this.search,
+				'h|/': this.help
+			};
+		},
+	},
+
+	watch: {
+		$route(to, from) {
+			this.pageKey++;
+			this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
+		},
+	},
+
+	created() {
+		document.documentElement.style.overflowY = 'hidden';
+
+		if (this.$store.getters.isSignedIn) {
+			this.connection = this.$root.stream.useSharedConnection('main');
+			this.connection.on('notification', this.onNotification);
+		}
+	},
+
+	mounted() {
+	},
+
+	methods: {
+		showNav() {
+			this.$refs.nav.show();
+		},
+
+		help() {
+			this.$router.push('/docs/keyboard-shortcut');
+		},
+
+		back() {
+			if (this.canBack) window.history.back();
+		},
+
+		post() {
+			this.$root.post();
+		},
+
+		search() {
+			if (this.searching) return;
+
+			this.$root.dialog({
+				title: this.$t('search'),
+				input: true
+			}).then(async ({ canceled, result: query }) => {
+				if (canceled || query == null || query === '') return;
+
+				this.searching = true;
+				search(this, query).finally(() => {
+					this.searching = false;
+				});
+			});
+		},
+
+		async onNotification(notification) {
+			if (document.visibilityState === 'visible') {
+				this.$root.stream.send('readNotification', {
+					id: notification.id
+				});
+
+				this.$root.new(await import('./components/toast.vue').then(m => m.default), {
+					notification
+				});
+			}
+
+			this.$root.sound('notification');
+		},
+
+		async addColumn(ev) {
+			const columns = [
+				'widgets',
+				'notifications',
+				'tl',
+				'antenna',
+				'list',
+				'mentions',
+				'direct',
+			];
+
+			const { canceled, result: column } = await this.$root.dialog({
+				title: this.$t('_deck.addColumn'),
+				type: null,
+				select: {
+					items: columns.map(column => ({
+						value: column, text: this.$t('_deck._columns.' + column)
+					}))
+				},
+				showCancelButton: true
+			});
+			if (canceled) return;
+
+			this.$store.commit('deviceUser/addDeckColumn', {
+				type: column,
+				id: uuid(),
+				name: this.$t('_deck._columns.' + column),
+				width: 330,
+			});
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-deck {
+	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
+
+	// TODO: この値を設定で変えられるようにする？
+	$columnMargin: 12px;
+
+	$deckMargin: 12px;
+
+	--margin: var(--marginHalf);
+
+	display: flex;
+	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+	height: calc(var(--vh, 1vh) * 100);
+	box-sizing: border-box;
+	flex: 1;
+	padding: $deckMargin 0 $deckMargin $deckMargin;
+
+	&.center {
+		> .column:first-of-type {
+			margin-left: auto;
+		}
+
+		> .add {
+			margin-right: auto;
+		}
+	}
+
+	> .column {
+		flex-shrink: 0;
+		margin-right: $columnMargin;
+
+		&.folder {
+			display: flex;
+			flex-direction: column;
+
+			> *:not(:last-child) {
+				margin-bottom: $columnMargin;
+			}
+		}
+	}
+
+	> .post,
+	> .nav {
+		position: fixed;
+		z-index: 1000;
+		bottom: 32px;
+		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);
+		font-size: 22px;
+	}
+
+	> .post {
+		right: 32px;
+	}
+
+	> .nav {
+		left: 32px;
+		background: var(--panel);
+		color: var(--fg);
+
+		@media (min-width: ($nav-hide-threshold + 1px)) {
+			display: none;
+		}
+
+		&:hover {
+			background: var(--X2);
+		}
+
+		> i {
+			position: absolute;
+			top: 0;
+			left: 0;
+			color: var(--indicator);
+			font-size: 16px;
+			animation: blink 1s infinite;
+		}
+	}
+}
+
+.iwnjqeul {
+	$header-height: 42px; // TODO: column.vueのそれを参照するようにしたい(出来るのか？)
+
+	> .default {
+		> .avatar {
+			$size: 28px;
+			display: inline-block;
+			width: $size;
+			height: $size;
+			vertical-align: bottom;
+			margin: (($header-height - $size) / 2) 8px (($header-height - $size) / 2) 0;
+		}
+
+		> .title {
+			display: inline-block;
+			margin: 0;
+			line-height: $header-height;
+
+			> [data-icon] {
+				margin-right: 8px;
+			}
+		}
+	}
+
+	> .custom {
+		position: absolute;
+		top: 0;
+	}
+}
+</style>
--- a/src/client/directives/particle.ts
+++ b/src/client/directives/particle.ts
@@ -2,6 +2,8 @@ import Particle from '../components/particle.vue';

 export default {
 	bind(el, binding, vn) {
+		// 明示的に false であればバインドしない
+		if (binding.value === false) return;
 		el.addEventListener('click', () => {
 			const rect = el.getBoundingClientRect();

--- a/src/client/directives/size.ts
+++ b/src/client/directives/size.ts
@@ -1,5 +1,3 @@
-import { ResizeObserver } from '@juggle/resize-observer';
-
 export default {
 	inserted(el, binding, vn) {
 		const query = binding.value;
--- a/src/client/init.ts
+++ b/src/client/init.ts
@@ -1,5 +1,5 @@
 /**
- * App entry point
+ * Client entry point
 */

 import Vue from 'vue';
@@ -12,17 +12,21 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

 import VueHotkey from './scripts/hotkey';
 import App from './app.vue';
+import Deck from './deck.vue';
 import MiOS from './mios';
-import { version, langs, instanceName, getLocale } from './config';
+import { version, langs, instanceName, getLocale, deckmode } from './config';
 import PostFormDialog from './components/post-form-dialog.vue';
 import Dialog from './components/dialog.vue';
 import Menu from './components/menu.vue';
+import Form from './components/form-window.vue';
 import { router } from './router';
-import { applyTheme, lightTheme } from './theme';
+import { applyTheme, lightTheme } from './scripts/theme';
 import { isDeviceDarkmode } from './scripts/is-device-darkmode';
 import createStore from './store';
 import { clientDb, get, count } from './db';
 import { setI18nContexts } from './scripts/set-i18n-contexts';
+import { createPluginEnv } from './scripts/aiscript/api';
+import { AiScript } from '@syuilo/aiscript';

 Vue.use(Vuex);
 Vue.use(VueHotkey);
@@ -51,18 +55,20 @@ Vue.mixin({

 console.info(`Misskey v${version}`);

-// v11互換性のため
-if (localStorage.getItem('kyoppie') === 'yuppie') {
-	const i = localStorage.getItem('i');
-	localStorage.clear();
-	localStorage.setItem('i', i);
-	location.reload(true);
-}
-
 if (localStorage.getItem('theme') == null) {
 	applyTheme(lightTheme);
 }

+//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+// TODO: いつの日にか消したい
+const vh = window.innerHeight * 0.01;
+document.documentElement.style.setProperty('--vh', `${vh}px`);
+window.addEventListener('resize', () => {
+	const vh = window.innerHeight * 0.01;
+	document.documentElement.style.setProperty('--vh', `${vh}px`);
+});
+//#endregion
+
 //#region Detect the user language
 let lang = localStorage.getItem('lang');

@@ -102,51 +108,26 @@ const html = document.documentElement;
 html.setAttribute('lang', lang);
 //#endregion

-// iOSでプライベートモードだとlocalStorageが使えないので既存のメソッドを上書きする
-try {
-	localStorage.setItem('foo', 'bar');
-} catch (e) {
-	Storage.prototype.setItem = () => { }; // noop
-}
-
-// http://qiita.com/junya/items/3ff380878f26ca447f85
-document.body.setAttribute('ontouchstart', '');
-
 // アプリ基底要素マウント
 document.body.innerHTML = '<div id="app"></div>';

 const store = createStore();

+// 他のタブと永続化されたstateを同期
+window.addEventListener('storage', e => {
+	if (e.key === 'vuex') {
+		store.replaceState({
+			...store.state,
+			...JSON.parse(e.newValue)
+		});
+	} else if (e.key === 'i') {
+		location.reload();
+	}
+}, false);
+
 const os = new MiOS(store);

 os.init(async () => {
-	window.addEventListener('storage', e => {
-		if (e.key === 'vuex') {
-			store.replaceState(JSON.parse(localStorage['vuex']));
-		} else if (e.key === 'i') {
-			location.reload();
-		}
-	}, false);
-
-	store.watch(state => state.device.darkMode, darkMode => {
-		import('./theme').then(({ builtinThemes }) => {
-			const themes = builtinThemes.concat(store.state.device.themes);
-			applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme)));
-		});
-	});
-
-	//#region Sync dark mode
-	if (store.state.device.syncDeviceDarkMode) {
-		store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
-	}
-
-	window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
-		if (store.state.device.syncDeviceDarkMode) {
-			store.commit('device/set', { key: 'darkMode', value: mql.matches });
-		}
-	});
-	//#endregion
-
 	//#region Fetch locale data
 	const i18n = new VueI18n();

@@ -159,13 +140,6 @@ os.init(async () => {
 	});
 	//#endregion

-	if ('Notification' in window && store.getters.isSignedIn) {
-		// 許可を得ていなかったらリクエスト
-		if (Notification.permission === 'default') {
-			Notification.requestPermission();
-		}
-	}
-
 	const app = new Vue({
 		store: store,
 		i18n,
@@ -180,6 +154,7 @@ os.init(async () => {
 				i18n // TODO: 消せないか考える SEE: https://github.com/syuilo/misskey/pull/6396#discussion_r429511030
 			};
 		},
+		// TODO: ここらへんのメソッド全部Vuexに移したい
 		methods: {
 			api: (endpoint: string, data: { [x: string]: any } = {}, token?) => store.dispatch('api', { endpoint, data, token }),
 			signout: os.signout,
@@ -209,7 +184,15 @@ os.init(async () => {
 				});
 				return p;
 			},
+			form(title, form) {
+				const vm = this.new(Form, { title, form });
+				return new Promise((res) => {
+					vm.$once('ok', result => res({ canceled: false, result }));
+					vm.$once('cancel', () => res({ canceled: true }));
+				});
+			},
 			post(opts, cb) {
+				if (!this.$store.getters.isSignedIn) return;
 				const vm = this.new(PostFormDialog, opts);
 				if (cb) vm.$once('closed', cb);
 				(vm as any).focus();
@@ -224,20 +207,77 @@ os.init(async () => {
 			}
 		},
 		router: router,
-		render: createEl => createEl(App)
+		render: createEl => createEl(deckmode ? Deck : App)
 	});

-	os.app = app;
-
 	// マウント
 	app.$mount('#app');

+	store.watch(state => state.device.darkMode, darkMode => {
+		import('./scripts/theme').then(({ builtinThemes }) => {
+			const themes = builtinThemes.concat(store.state.device.themes);
+			applyTheme(themes.find(x => x.id === (darkMode ? store.state.device.darkTheme : store.state.device.lightTheme)));
+		});
+	});
+
+	//#region Sync dark mode
+	if (store.state.device.syncDeviceDarkMode) {
+		store.commit('device/set', { key: 'darkMode', value: isDeviceDarkmode() });
+	}
+
+	window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
+		if (store.state.device.syncDeviceDarkMode) {
+			store.commit('device/set', { key: 'darkMode', value: mql.matches });
+		}
+	});
+	//#endregion
+
+	store.watch(state => state.device.useBlurEffectForModal, v => {
+		document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
+	}, { immediate: true });
+
 	os.stream.on('emojiAdded', data => {
 		// TODO
 		//store.commit('instance/set', );
 	});

+	for (const plugin of store.state.deviceUser.plugins) {
+		console.info('Plugin installed:', plugin.name, 'v' + plugin.version);
+
+		const aiscript = new AiScript(createPluginEnv(app, {
+			plugin: plugin,
+			storageKey: 'plugins:' + plugin.id
+		}), {
+			in: (q) => {
+				return new Promise(ok => {
+					app.dialog({
+						title: q,
+						input: {}
+					}).then(({ canceled, result: a }) => {
+						ok(a);
+					});
+				});
+			},
+			out: (value) => {
+				console.log(value);
+			},
+			log: (type, params) => {
+			},
+		});
+
+		store.commit('initPlugin', { plugin, aiscript });
+
+		aiscript.exec(plugin.ast);
+	}
+
 	if (store.getters.isSignedIn) {
+		if ('Notification' in window) {
+			// 許可を得ていなかったらリクエスト
+			if (Notification.permission === 'default') {
+				Notification.requestPermission();
+			}
+		}
+
 		const main = os.stream.useSharedConnection('main');

 		// 自分の情報が更新されたとき
--- a/src/client/mios.ts
+++ b/src/client/mios.ts
@@ -1,5 +1,6 @@
+// TODO: このファイル消したい
+
 import autobind from 'autobind-decorator';
-import Vue from 'vue';
 import { EventEmitter } from 'eventemitter3';

 import { apiUrl, version } from './config';
@@ -12,8 +13,6 @@ import store from './store';
 * Misskey Operating System
 */
 export default class MiOS extends EventEmitter {
-	public app: Vue;
-
 	public store: ReturnType<typeof store>;

 	/**
--- a/src/client/pages/index.home.vue
+++ b/src/client/pages/index.home.vue
@@ -19,7 +19,7 @@
 	<x-tutorial class="tutorial" v-if="$store.state.settings.tutorial != -1"/>

 	<x-post-form class="post-form _panel" fixed v-if="$store.state.device.showFixedPostForm"/>
-	<x-timeline ref="tl" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src" :src="src" :list="list" :antenna="antenna" :sound="true" @before="before()" @after="after()" @queue="queueUpdated"/>
+	<x-timeline ref="tl" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src" :src="src" :list="list ? list.id : null" :antenna="antenna ? antenna.id : null" :sound="true" @before="before()" @after="after()" @queue="queueUpdated"/>
 </div>
 </template>

@@ -30,6 +30,7 @@ import { faComments } from '@fortawesome/free-regular-svg-icons';
 import Progress from '../scripts/loading';
 import XTimeline from '../components/timeline.vue';
 import XPostForm from '../components/post-form.vue';
+import { scroll } from '../scripts/scroll';

 export default Vue.extend({
 	metaInfo() {
@@ -120,7 +121,7 @@ export default Vue.extend({
 		},

 		top() {
-			window.scroll({ top: 0, behavior: 'instant' });
+			scroll(this.$el, 0);
 		},

 		async choose(ev) {
@@ -223,7 +224,7 @@ export default Vue.extend({

 	> i {
 		position: absolute;
-		top: 16px;
+		top: initial;
 		right: 8px;
 		color: var(--indicator);
 		font-size: 12px;
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-messaging">
+<div class="mk-messaging" v-size="[{ max: 400 }]">
 	<portal to="icon"><fa :icon="faComments"/></portal>
 	<portal to="title">{{ $t('messaging') }}</portal>

@@ -168,18 +168,14 @@ export default Vue.extend({
 .mk-messaging {

 	> .start {
-		margin: 0 auto 16px auto;
+		margin: 0 auto var(--margin) auto;
 	}

 	> .history {
 		> .message {
 			display: block;
 			text-decoration: none;
-			margin-bottom: 16px;
-
-			@media (max-width: 500px) {
-				margin-bottom: 8px;
-			}
+			margin-bottom: var(--margin);

 			* {
 				pointer-events: none;
@@ -284,7 +280,7 @@ export default Vue.extend({
 		}
 	}

-	@media (max-width: 400px) {
+	&.max-width_400px {
 		> .history {
 			> .message {
 				&:not([data-is-me]):not([data-is-read]) {
--- a/src/client/pages/my-groups/index.vue
+++ b/src/client/pages/my-groups/index.vue
@@ -8,7 +8,7 @@
 	<mk-container :body-togglable="true">
 		<template #header><fa :icon="faUsers"/> {{ $t('ownedGroups') }}</template>
 		<mk-pagination :pagination="ownedPagination" #default="{items}" ref="owned">
-			<div class="_frame" v-for="group in items" :key="group.id">
+			<div class="_card" v-for="group in items" :key="group.id">
 				<div class="_title"><router-link :to="`/my/groups/${ group.id }`" class="_link">{{ group.name }}</router-link></div>
 				<div class="_content"><mk-avatars :user-ids="group.userIds"/></div>
 			</div>
@@ -18,7 +18,7 @@
 	<mk-container :body-togglable="true">
 		<template #header><fa :icon="faEnvelopeOpenText"/> {{ $t('invites') }}</template>
 		<mk-pagination :pagination="invitationPagination" #default="{items}" ref="invitations">
-			<div class="_frame" v-for="invitation in items" :key="invitation.id">
+			<div class="_card" v-for="invitation in items" :key="invitation.id">
 				<div class="_title">{{ invitation.group.name }}</div>
 				<div class="_content"><mk-avatars :user-ids="invitation.group.userIds"/></div>
 				<div class="_footer">
@@ -32,7 +32,7 @@
 	<mk-container :body-togglable="true">
 		<template #header><fa :icon="faUsers"/> {{ $t('joinedGroups') }}</template>
 		<mk-pagination :pagination="joinedPagination" #default="{items}" ref="joined">
-			<div class="_frame" v-for="group in items" :key="group.id">
+			<div class="_card" v-for="group in items" :key="group.id">
 				<div class="_title">{{ group.name }}</div>
 				<div class="_content"><mk-avatars :user-ids="group.userIds"/></div>
 			</div>
--- a/src/client/pages/not-found.vue
+++ b/src/client/pages/not-found.vue
@@ -3,12 +3,10 @@
 	<portal to="icon"><fa :icon="faExclamationTriangle"/></portal>
 	<portal to="title">{{ $t('notFound') }}</portal>

-	<section class="_card">
-		<div class="_content">
-			<img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/>
-			<div>{{ $t('notFoundDescription') }}</div>
-		</div>
-	</section>
+	<div class="_fullinfo">
+		<img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/>
+		<div>{{ $t('notFoundDescription') }}</div>
+	</div>
 </div>
 </template>

@@ -30,20 +28,3 @@ export default Vue.extend({
 	},
 });
 </script>
-
-<style lang="scss" scoped>
-.ipledcug {
-	> ._card {
-		> ._content {
-			text-align: center;
-					
-			> img {
-				vertical-align: bottom;
-				height: 150px;
-				margin-bottom: 16px;
-				border-radius: 16px;
-			}
-		}
-	}
-}
-</style>
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -15,14 +15,15 @@

 		<mk-remote-caution v-if="note.user.host != null" :href="note.url || note.uri" style="margin-bottom: var(--margin)"/>
 		<x-note :note="note" :key="note.id" :detail="true"/>
-		<div v-if="error">
-			<mk-error @retry="fetch()"/>
-		</div>

 		<button class="_panel _button" v-if="hasPrev && !showPrev" @click="showPrev = true" style="margin: var(--margin) auto 0 auto;"><fa :icon="faChevronDown"/></button>
 		<hr v-if="showPrev"/>
 		<x-notes v-if="showPrev" ref="prev" :pagination="prev" style="margin-top: var(--margin);"/>
 	</div>
+
+	<div v-if="error">
+		<mk-error @retry="fetch()"/>
+	</div>
 </div>
 </template>

--- a/src/client/pages/page-editor/page-editor.container.vue
+++ b/src/client/pages/page-editor/page-editor.container.vue
@@ -75,11 +75,11 @@ export default Vue.extend({
 	position: relative;
 	overflow: hidden;
 	background: var(--panel);
-	border: solid 2px var(--jvhmlskx);
+	border: solid 2px var(--X12);
 	border-radius: 6px;

 	&:hover {
-		border: solid 2px var(--yakfpmhl);
+		border: solid 2px var(--X13);
 	}

 	&.warn {
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="xcukqgmh _panel">
+<div class="xcukqgmh">
 	<portal to="avatar" v-if="page"><mk-avatar class="avatar" :user="page.user" :disable-preview="true"/></portal>
 	<portal to="title" v-if="page">{{ page.title || page.name }}</portal>

--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -9,6 +9,8 @@

 	<x-sidebar/>

+	<x-plugins/>
+
 	<section class="_card">
 		<div class="_title"><fa :icon="faMusic"/> {{ $t('sounds') }}</div>
 		<div class="_content">
@@ -51,6 +53,20 @@
 		</div>
 	</section>

+	<section class="_card">
+		<div class="_title"><fa :icon="faColumns"/> {{ $t('deck') }}</div>
+		<div class="_content">
+			<mk-switch v-model="deckAlwaysShowMainColumn">
+				{{ $t('_deck.alwaysShowMainColumn') }}
+			</mk-switch>
+		</div>
+		<div class="_content">
+			<div>{{ $t('_deck.columnAlign') }}</div>
+			<mk-radio v-model="deckColumnAlign" value="left">{{ $t('left') }}</mk-radio>
+			<mk-radio v-model="deckColumnAlign" value="center">{{ $t('center') }}</mk-radio>
+		</div>
+	</section>
+
 	<section class="_card">
 		<div class="_title"><fa :icon="faCog"/> {{ $t('accessibility') }}</div>
 		<div class="_content">
@@ -62,12 +78,14 @@
 			<mk-switch v-model="imageNewTab">{{ $t('openImageInNewTab') }}</mk-switch>
 			<mk-switch v-model="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</mk-switch>
 			<mk-switch v-model="reduceAnimation">{{ $t('reduceUiAnimation') }}</mk-switch>
+			<mk-switch v-model="useBlurEffectForModal">{{ $t('useBlurEffectForModal') }}</mk-switch>
 			<mk-switch v-model="useOsNativeEmojis">
 				{{ $t('useOsNativeEmojis') }}
 				<template #desc><mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></template>
 			</mk-switch>
 			<mk-switch v-model="showFixedPostForm">{{ $t('showFixedPostForm') }}</mk-switch>
 			<mk-switch v-model="enableInfiniteScroll">{{ $t('enableInfiniteScroll') }}</mk-switch>
+			<mk-switch v-model="fixedWidgetsPosition">{{ $t('fixedWidgetsPosition') }}</mk-switch>
 			<mk-switch v-model="disablePagesScript">{{ $t('disablePagesScript') }}</mk-switch>
 		</div>
 		<div class="_content">
@@ -92,7 +110,7 @@

 <script lang="ts">
 import Vue from 'vue';
-import { faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute } from '@fortawesome/free-solid-svg-icons';
+import { faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute, faColumns } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '../../components/ui/button.vue';
 import MkSwitch from '../../components/ui/switch.vue';
 import MkSelect from '../../components/ui/select.vue';
@@ -100,6 +118,7 @@ import MkRadio from '../../components/ui/radio.vue';
 import MkRange from '../../components/ui/range.vue';
 import XTheme from './theme.vue';
 import XSidebar from './sidebar.vue';
+import XPlugins from './plugins.vue';
 import { langs } from '../../config';
 import { clientDb, set } from '../../db';

@@ -114,6 +133,9 @@ const sounds = [
 	'syuilo/triple',
 	'syuilo/poi1',
 	'syuilo/poi2',
+	'syuilo/pirori',
+	'syuilo/pirori-wet',
+	'syuilo/pirori-square-wet',
 	'aisha/1',
 	'aisha/2',
 	'aisha/3',
@@ -130,11 +152,12 @@ export default Vue.extend({
 	components: {
 		XTheme,
 		XSidebar,
+		XPlugins,
 		MkButton,
 		MkSwitch,
 		MkSelect,
 		MkRadio,
-		MkRange
+		MkRange,
 	},

 	data() {
@@ -143,7 +166,7 @@ export default Vue.extend({
 			lang: localStorage.getItem('lang'),
 			fontSize: localStorage.getItem('fontSize'),
 			sounds,
-			faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute
+			faImage, faCog, faMusic, faPlay, faVolumeUp, faVolumeMute, faColumns
 		}
 	},

@@ -158,6 +181,11 @@ export default Vue.extend({
 			set(value) { this.$store.commit('device/set', { key: 'animation', value: !value }); }
 		},

+		useBlurEffectForModal: {
+			get() { return this.$store.state.device.useBlurEffectForModal; },
+			set(value) { this.$store.commit('device/set', { key: 'useBlurEffectForModal', value: value }); }
+		},
+
 		disableAnimatedMfm: {
 			get() { return !this.$store.state.device.animatedMfm; },
 			set(value) { this.$store.commit('device/set', { key: 'animatedMfm', value: !value }); }
@@ -185,7 +213,22 @@ export default Vue.extend({

 		enableInfiniteScroll: {
 			get() { return this.$store.state.device.enableInfiniteScroll; },
-			set(value) { this.$store.commit('device/setInfiniteScrollEnabling', value); }
+			set(value) { this.$store.commit('device/set', { key: 'enableInfiniteScroll', value }); }
+		},
+
+		fixedWidgetsPosition: {
+			get() { return this.$store.state.device.fixedWidgetsPosition; },
+			set(value) { this.$store.commit('device/set', { key: 'fixedWidgetsPosition', value }); }
+		},
+
+		deckAlwaysShowMainColumn: {
+			get() { return this.$store.state.device.deckAlwaysShowMainColumn; },
+			set(value) { this.$store.commit('device/set', { key: 'deckAlwaysShowMainColumn', value }); }
+		},
+
+		deckColumnAlign: {
+			get() { return this.$store.state.device.deckColumnAlign; },
+			set(value) { this.$store.commit('device/set', { key: 'deckColumnAlign', value }); }
 		},

 		sfxVolume: {
@@ -259,6 +302,14 @@ export default Vue.extend({
 			}
 			location.reload();
 		},
+
+		fixedWidgetsPosition() {
+			location.reload()
+		},
+
+		enableInfiniteScroll() {
+			location.reload()
+		},
 	},

 	methods: {
--- a/src/client/pages/preferences/plugins.vue
+++ b/src/client/pages/preferences/plugins.vue
@@ -0,0 +1,134 @@
+<template>
+<section class="_card">
+	<div class="_title"><fa :icon="faPlug"/> {{ $t('plugins') }}</div>
+	<div class="_content">
+		<details>
+			<summary><fa :icon="faDownload"/> {{ $t('install') }}</summary>
+			<mk-info warn>{{ $t('pluginInstallWarn') }}</mk-info>
+			<mk-textarea v-model="script" tall>
+				<span>{{ $t('script') }}</span>
+			</mk-textarea>
+			<mk-button @click="install()" primary><fa :icon="faSave"/> {{ $t('install') }}</mk-button>
+		</details>
+	</div>
+	<div class="_content">
+		<details>
+			<summary><fa :icon="faFolderOpen"/> {{ $t('manage') }}</summary>
+			<mk-select v-model="selectedPluginId">
+				<option v-for="x in $store.state.deviceUser.plugins" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</mk-select>
+			<template v-if="selectedPlugin">
+				<div class="_keyValue">
+					<div>{{ $t('version') }}:</div>
+					<div>{{ selectedPlugin.version }}</div>
+				</div>
+				<div class="_keyValue">
+					<div>{{ $t('author') }}:</div>
+					<div>{{ selectedPlugin.author }}</div>
+				</div>
+				<div class="_keyValue">
+					<div>{{ $t('description') }}:</div>
+					<div>{{ selectedPlugin.description }}</div>
+				</div>
+				<mk-button @click="uninstall()" style="margin-top: 8px;"><fa :icon="faTrashAlt"/> {{ $t('uninstall') }}</mk-button>
+			</template>
+		</details>
+	</div>
+</section>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload } from '@fortawesome/free-solid-svg-icons';
+import MkButton from '../../components/ui/button.vue';
+import MkTextarea from '../../components/ui/textarea.vue';
+import MkSelect from '../../components/ui/select.vue';
+import MkInfo from '../../components/ui/info.vue';
+import { AiScript, parse } from '@syuilo/aiscript';
+
+export default Vue.extend({
+	components: {
+		MkButton,
+		MkTextarea,
+		MkSelect,
+		MkInfo,
+	},
+	
+	data() {
+		return {
+			script: '',
+			selectedPluginId: null,
+			faPlug, faSave, faTrashAlt, faFolderOpen, faDownload
+		}
+	},
+
+	computed: {
+		selectedPlugin() {
+			if (this.selectedPluginId == null) return null;
+			return this.$store.state.deviceUser.plugins.find(x => x.id === this.selectedPluginId);
+		},
+	},
+
+	methods: {
+		install() {
+			let ast;
+			try {
+				ast = parse(this.script);
+			} catch (e) {
+				this.$root.dialog({
+					type: 'error',
+					text: 'Syntax error :('
+				});
+				return;
+			}
+			const meta = AiScript.collectMetadata(ast);
+			console.log(meta);
+			if (meta == null) {
+				this.$root.dialog({
+					type: 'error',
+					text: 'No metadata found :('
+				});
+				return;
+			}
+			const data = meta.get(null);
+			if (data == null) {
+				this.$root.dialog({
+					type: 'error',
+					text: 'No metadata found :('
+				});
+				return;
+			}
+			const { id, name, version, author, description } = data;
+			if (id == null || name == null || version == null || author == null) {
+				this.$root.dialog({
+					type: 'error',
+					text: 'Required property not found :('
+				});
+				return;
+			}
+			this.$store.commit('deviceUser/installPlugin', {
+				meta: {
+					id, name, version, author, description
+				},
+				ast
+			});
+			this.$root.dialog({
+				type: 'success',
+				iconOnly: true, autoClose: true
+			});
+		},
+
+		uninstall() {
+			this.$store.commit('deviceUser/uninstallPlugin', this.selectedPluginId);
+			this.$root.dialog({
+				type: 'success',
+				iconOnly: true, autoClose: true
+			});
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/client/pages/preferences/theme.vue
+++ b/src/client/pages/preferences/theme.vue
@@ -22,6 +22,7 @@
 				</label>
 			</div>
 		</div>
+		<mk-switch v-model="syncDeviceDarkMode">{{ $t('syncDeviceDarkMode') }}</mk-switch>
 	</div>
 	<div class="_content">
 		<mk-select v-model="lightTheme">
@@ -42,10 +43,7 @@
 				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
 		</mk-select>
-		<a href="https://assets.msky.cafe/theme/list" rel="noopener" target="_blank" class="_link">{{ $t('_theme.explore') }}</a>
-	</div>
-	<div class="_content">
-		<mk-switch v-model="syncDeviceDarkMode">{{ $t('syncDeviceDarkMode') }}</mk-switch>
+		<a href="https://assets.msky.cafe/theme/list" rel="noopener" target="_blank" class="_link">{{ $t('_theme.explore') }}</a>・<router-link to="/theme-editor" class="_link">{{ $t('_theme.make') }}</router-link>
 	</div>
 	<div class="_content">
 		<mk-button primary v-if="wallpaper == null" @click="setWallpaper">{{ $t('setWallpaper') }}</mk-button>
@@ -87,7 +85,7 @@ import MkButton from '../../components/ui/button.vue';
 import MkSelect from '../../components/ui/select.vue';
 import MkSwitch from '../../components/ui/switch.vue';
 import MkTextarea from '../../components/ui/textarea.vue';
-import { Theme, builtinThemes, applyTheme, validateTheme } from '../../theme';
+import { Theme, builtinThemes, applyTheme, validateTheme } from '../../scripts/theme';
 import { selectFile } from '../../scripts/select-file';
 import { isDeviceDarkmode } from '../../scripts/is-device-darkmode';

--- a/src/client/pages/room/room.vue
+++ b/src/client/pages/room/room.vue
@@ -143,7 +143,7 @@ export default Vue.extend({
 		if (this.changed) {
 			this.$root.dialog({
 				type: 'warning',
-				text: this.$t('leave-confirm'),
+				text: this.$t('leaveConfirm'),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) {
--- a/src/client/pages/scratchpad.vue
+++ b/src/client/pages/scratchpad.vue
@@ -30,7 +30,7 @@ import PrismEditor from 'vue-prism-editor';
 import { AiScript, parse, utils, values } from '@syuilo/aiscript';
 import MkContainer from '../components/ui/container.vue';
 import MkButton from '../components/ui/button.vue';
-import { createAiScriptEnv } from '../scripts/create-aiscript-env';
+import { createAiScriptEnv } from '../scripts/aiscript/api';

 export default Vue.extend({
 	metaInfo() {
--- a/src/client/pages/theme-editor.vue
+++ b/src/client/pages/theme-editor.vue
@@ -0,0 +1,343 @@
+<template>
+<div class="t9makv94">
+	<portal to="icon"><fa :icon="faPalette"/></portal>
+	<portal to="title">{{ $t('themeEditor') }}</portal>
+
+	<section class="_card">
+		<div class="_content">
+			<mk-input v-model="name" required><span>{{ $t('name') }}</span></mk-input>
+			<mk-input v-model="author" required><span>{{ $t('author') }}</span></mk-input>
+			<mk-textarea v-model="description"><span>{{ $t('description') }}</span></mk-textarea>
+			<div class="_inputs">
+				<div v-text="$t('_theme.base')" />
+				<mk-radio v-model="baseTheme" value="light">{{ $t('light') }}</mk-radio>
+				<mk-radio v-model="baseTheme" value="dark">{{ $t('dark') }}</mk-radio>
+			</div>
+		</div>
+		<div class="_content">
+			<div class="list-view">
+				<div class="item" v-for="([ k, v ], i) in theme" :key="k">
+					<div class="_inputs">
+						<div>
+							{{ k.startsWith('$') ? `${k} (${$t('_theme.constant')})` : $t('_theme.keys.' + k) }}
+							<button v-if="k.startsWith('$')" class="_button _link" @click="del(i)" v-text="$t('delete')" />
+						</div>
+						<div>
+							<div class="type" @click="chooseType($event, i)">
+								{{ getTypeOf(v) }} <fa :icon="faChevronDown"/>
+							</div>
+							<!-- default -->
+							<div v-if="v === null" v-text="baseProps[k]" class="default-value" />
+							<!-- color -->
+							<div v-else-if="typeof v === 'string'" class="color">
+								<input type="color" :value="v" @input="colorChanged($event.target.value, i)"/>
+								<mk-input class="select" :value="v" @input="colorChanged($event, i)"/>
+							</div>
+							<!-- ref const -->
+							<mk-input v-else-if="v.type === 'refConst'" v-model="v.key">
+								<template #prefix>$</template>
+								<span>{{ $t('name') }}</span>
+							</mk-input>
+							<!-- ref props -->
+							<mk-select class="select" v-else-if="v.type === 'refProp'" v-model="v.key">
+								<option v-for="key in themeProps" :value="key" :key="key">{{ $t('_theme.keys.' + key) }}</option>
+							</mk-select>
+							<!-- func -->
+							<template v-else-if="v.type === 'func'">
+								<mk-select class="select" v-model="v.name">
+									<template #label>{{ $t('_theme.funcKind') }}</template>
+									<option v-for="n in ['alpha', 'darken', 'lighten']" :value="n" :key="n">{{ $t('_theme.' + n) }}</option>
+								</mk-select>
+								<mk-input type="number" v-model="v.arg"><span>{{ $t('_theme.argument') }}</span></mk-input>
+								<mk-select class="select" v-model="v.value">
+									<template #label>{{ $t('_theme.basedProp') }}</template>
+									<option v-for="key in themeProps" :value="key" :key="key">{{ $t('_theme.keys.' + key) }}</option>
+								</mk-select>
+							</template>
+						</div>
+					</div>
+				</div>
+				<mk-button primary @click="addConst">{{ $t('_theme.addConstant') }}</mk-button>
+			</div>
+		</div>
+		<div class="_content">
+				<mk-textarea v-model="themeToImport">
+					{{ $t('_theme.importInfo') }}
+				</mk-textarea>
+				<mk-button :disabled="!themeToImport.trim()" @click="importTheme">{{ $t('import') }}</mk-button>
+		</div>
+		<div class="_footer">
+			<mk-button inline @click="preview">{{ $t('preview') }}</mk-button>
+			<mk-button inline primary :disabled="!name || !author" @click="save">{{ $t('save') }}</mk-button>
+		</div>
+	</section>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faPalette, faChevronDown, faKeyboard } from '@fortawesome/free-solid-svg-icons';
+import * as JSON5 from 'json5';
+
+import MkRadio from '../components/ui/radio.vue';
+import MkButton from '../components/ui/button.vue';
+import MkInput from '../components/ui/input.vue';
+import MkTextarea from '../components/ui/textarea.vue';
+import MkSelect from '../components/ui/select.vue';
+
+import { convertToMisskeyTheme, ThemeValue, convertToViewModel, ThemeViewModel } from '../scripts/theme-editor';
+import { Theme, applyTheme, lightTheme, darkTheme, themeProps, validateTheme } from '../scripts/theme';
+import { toUnicode } from 'punycode';
+import { host } from '../config';
+
+export default Vue.extend({
+	components: {
+		MkRadio,
+		MkButton,
+		MkInput,
+		MkTextarea,
+		MkSelect
+	},
+	metaInfo() {
+		return {
+			title: this.$t('themeEditor') + (this.changed ? '*' : '')
+		};
+	},
+
+	data() {
+		return {
+			theme: [] as ThemeViewModel,
+			name: '',
+			description: '',
+			baseTheme: 'light' as 'dark' | 'light',
+			author: `@${this.$store.state.i.username}@${toUnicode(host)}`,
+			themeToImport: '',
+			changed: false,
+			faPalette, faChevronDown, faKeyboard,
+			lightTheme, darkTheme, themeProps,
+		}
+	},
+
+	computed: {
+		baseProps() {
+			return this.baseTheme === 'light' ? this.lightTheme.props : this.darkTheme.props;
+		},
+	},
+
+	beforeDestroy() {
+		window.removeEventListener('beforeunload', this.beforeunload);
+	},
+
+	async beforeRouteLeave(to, from, next) {
+		if (this.changed && !(await this.confirm())) {
+			next(false);
+		} else {
+			next();
+		}
+	},
+
+	mounted() {
+		this.init();
+		window.addEventListener('beforeunload', this.beforeunload);
+		const changed = () => this.changed = true;
+		this.$watch('name', changed);
+		this.$watch('description', changed);
+		this.$watch('baseTheme', changed);
+		this.$watch('author', changed);
+		this.$watch('theme', changed);
+	},
+
+	methods: {
+		beforeunload(e: BeforeUnloadEvent) {
+			if (this.changed) {
+				e.preventDefault();
+				e.returnValue = '';
+			}
+		},
+
+		async confirm(): Promise<boolean> {
+			const { canceled } = await this.$root.dialog({
+				type: 'warning',
+				text: this.$t('leaveConfirm'),
+				showCancelButton: true
+			});
+			return !canceled;
+		},
+
+		init() {
+			const t: ThemeViewModel = [];
+			for (const key of themeProps) {
+				t.push([ key, null ]);
+			}
+			this.theme = t;
+		},
+	
+		async del(i: number) {
+			const { canceled } = await this.$root.dialog({ 
+				type: 'warning',
+				showCancelButton: true,
+				text: this.$t('_theme.deleteConstantConfirm', { const: this.theme[i][0] }),
+			});
+			if (canceled) return;
+			Vue.delete(this.theme, i);
+		},
+	
+		async addConst() {
+			const { canceled, result } = await this.$root.dialog({
+				title: this.$t('_theme.inputConstantName'),
+				input: true
+			});
+			if (canceled) return;
+			this.theme.push([ '$' + result, '#000000']);
+		},
+	
+		save() {
+			const theme = convertToMisskeyTheme(this.theme, this.name, this.description, this.author, this.baseTheme);
+			const themes = this.$store.state.device.themes.concat(theme);
+			this.$store.commit('device/set', {
+				key: 'themes', value: themes
+			});
+			this.$root.dialog({
+				type: 'success',
+				text: this.$t('_theme.installed', { name: theme.name })
+			});
+			this.changed = false;
+		},
+	
+		preview() {
+			const theme = convertToMisskeyTheme(this.theme, this.name, this.description, this.author, this.baseTheme);
+			try {
+				applyTheme(theme, false);
+			} catch (e) {
+				this.$root.dialog({
+					type: 'error',
+					text: e.message
+				});
+			}
+		},
+	
+		async importTheme() {
+			if (this.changed && (!await this.confirm())) return;
+
+			try {
+				const theme = JSON5.parse(this.themeToImport) as Theme;
+				if (!validateTheme(theme)) throw new Error(this.$t('_theme.invalid'));
+
+				this.name = theme.name;
+				this.description = theme.desc || '';
+				this.author = theme.author;
+				this.baseTheme = theme.base || 'light';
+				this.theme = convertToViewModel(theme);
+				this.themeToImport = '';
+			} catch (e) {
+				this.$root.dialog({
+					type: 'error',
+					text: e.message
+				});
+			}
+		},
+	
+		colorChanged(color: string, i: number) {
+			Vue.set(this.theme, i, [this.theme[i][0], color]);
+		},
+	
+		getTypeOf(v: ThemeValue) {
+			return v === null
+				? this.$t('_theme.defaultValue')
+				: typeof v === 'string'
+					? this.$t('_theme.color')
+					: this.$t('_theme.' + v.type);
+		},
+	
+		async chooseType(e: MouseEvent, i: number) {
+			const newValue = await this.showTypeMenu(e);
+			Vue.set(this.theme, i, [ this.theme[i][0], newValue ]);
+		},
+	
+		showTypeMenu(e: MouseEvent) {
+			return new Promise<ThemeValue>((resolve) => {
+				this.$root.menu({
+					items: [{
+						text: this.$t('_theme.defaultValue'),
+						action: () => resolve(null),
+					}, {
+						text: this.$t('_theme.color'),
+						action: () => resolve('#000000'),
+					}, {
+						text: this.$t('_theme.func'),
+						action: () => resolve({
+							type: 'func', name: 'alpha', arg: 1, value: 'accent'
+						}),
+					}, {
+						text: this.$t('_theme.refProp'),
+						action: () => resolve({
+							type: 'refProp', key: 'accent',
+						}),
+					}, {
+						text: this.$t('_theme.refConst'),
+						action: () => resolve({
+							type: 'refConst', key: '',
+						}),
+					},],
+					source: e.currentTarget || e.target,
+				});
+			});
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.t9makv94 {
+	> ._card {
+		> ._content {
+			> .list-view {
+				height: 480px;
+				overflow: auto;
+				border: 1px solid var(--divider);
+
+				> .item {
+					min-height: 48px;
+					padding: 0 16px;
+					word-break: break-all;
+
+					&:not(:last-child) {
+						padding-bottom: 8px;
+					}
+
+					.select {
+						margin: 24px 0;
+					}
+
+					.type {
+						cursor: pointer;
+					}
+
+					.default-value {
+						opacity: 0.6;
+						pointer-events: none;
+						user-select: none;
+					}
+
+					.color {
+						> input {
+							display: inline-block;
+							width: 1.5em;
+							height: 1.5em;
+						}
+
+						> div {
+							margin-left: 8px;
+							display: inline-block;
+						}
+					}
+				}
+
+				> ._button {
+					margin: 16px;
+				}
+			}
+		}
+	}
+}
+</style>
--- a/src/client/pages/user/index.timeline.vue
+++ b/src/client/pages/user/index.timeline.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="kjeftjfm">
+<div class="kjeftjfm" v-size="[{ max: 500 }]">
 	<div class="with">
 		<button class="_button" @click="with_ = null" :class="{ active: with_ === null }">{{ $t('notes') }}</button>
 		<button class="_button" @click="with_ = 'replies'" :class="{ active: with_ === 'replies' }">{{ $t('notesAndReplies') }}</button>
@@ -60,10 +60,6 @@ export default Vue.extend({
 		display: flex;
 		margin-bottom: var(--margin);

-		@media (max-width: 500px) {
-			font-size: 80%;
-		}
-
 		> button {
 			flex: 1;
 			padding: 11px 8px 8px 8px;
@@ -75,5 +71,11 @@ export default Vue.extend({
 			}
 		}
 	}
+
+	&.max-width_500px {
+		> .with {
+			font-size: 80%;
+		}
+	}
 }
 </style>
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-user-page" v-if="user">
+<div class="mk-user-page" v-if="user" v-size="[{ max: 500 }]">
 	<portal to="title" v-if="user"><mk-user-name :user="user" :nowrap="false" class="name"/></portal>
 	<portal to="avatar" v-if="user"><mk-avatar class="avatar" :user="user" :disable-preview="true"/></portal>

@@ -118,6 +118,7 @@ import MkContainer from '../../components/ui/container.vue';
 import MkRemoteCaution from '../../components/remote-caution.vue';
 import Progress from '../../scripts/loading';
 import parseAcct from '../../../misc/acct/parse';
+import { getScrollPosition } from '../../scripts/scroll';

 export default Vue.extend({
 	components: {
@@ -168,12 +169,8 @@ export default Vue.extend({

 	mounted() {
 		window.requestAnimationFrame(this.parallaxLoop);
-		window.addEventListener('scroll', this.parallax, { passive: true });
-		document.addEventListener('touchmove', this.parallax, { passive: true });
 		this.$once('hook:beforeDestroy', () => {
 			window.cancelAnimationFrame(this.parallaxAnimationId);
-			window.removeEventListener('scroll', this.parallax);
-			document.removeEventListener('touchmove', this.parallax);
 		});
 	},

@@ -205,7 +202,7 @@ export default Vue.extend({
 			const banner = this.$refs.banner as any;
 			if (banner == null) return;

-			const top = window.scrollY;
+			const top = getScrollPosition(this.$el);

 			if (top < 0) return;

@@ -219,7 +216,6 @@ export default Vue.extend({

 <style lang="scss" scoped>
 .mk-user-page {
-
 	> .punished {
 		font-size: 0.8em;
 		padding: 16px;
@@ -237,10 +233,6 @@ export default Vue.extend({
 			background-size: cover;
 			background-position: center;

-			@media (max-width: 500px) {
-				height: 140px;
-			}
-
 			> .banner {
 				height: 100%;
 				background-color: #4c5e6d;
@@ -257,10 +249,6 @@ export default Vue.extend({
 				width: 100%;
 				height: 78px;
 				background: linear-gradient(transparent, rgba(#000, 0.7));
-
-				@media (max-width: 500px) {
-					display: none;
-				}
 			}

 			> .followed {
@@ -308,10 +296,6 @@ export default Vue.extend({
 				box-sizing: border-box;
 				color: #fff;

-				@media (max-width: 500px) {
-					display: none;
-				}
-
 				> .name {
 					display: block;
 					margin: 0;
@@ -343,10 +327,6 @@ export default Vue.extend({
 			font-weight: bold;
 			border-bottom: solid 1px var(--divider);

-			@media (max-width: 500px) {
-				display: block;
-			}
-
 			> .bottom {
 				> * {
 					display: inline-block;
@@ -365,26 +345,12 @@ export default Vue.extend({
 			width: 120px;
 			height: 120px;
 			box-shadow: 1px 1px 3px rgba(#000, 0.2);
-
-			@media (max-width: 500px) {
-				top: 90px;
-				left: 0;
-				right: 0;
-				width: 92px;
-				height: 92px;
-				margin: auto;
-			}
 		}

 		> .description {
 			padding: 24px 24px 24px 154px;
 			font-size: 0.95em;

-			@media (max-width: 500px) {
-				padding: 16px;
-				text-align: center;
-			}
-
 			> .empty {
 				margin: 0;
 				opacity: 0.5;
@@ -396,10 +362,6 @@ export default Vue.extend({
 			font-size: 0.9em;
 			border-top: solid 1px var(--divider);

-			@media (max-width: 500px) {
-				padding: 16px;
-			}
-		
 			> .field {
 				display: flex;
 				padding: 0;
@@ -436,10 +398,6 @@ export default Vue.extend({
 			padding: 24px;
 			border-top: solid 1px var(--divider);

-			@media (max-width: 500px) {
-				padding: 16px;
-			}
-
 			> a {
 				flex: 1;
 				text-align: center;
@@ -473,5 +431,47 @@ export default Vue.extend({
 	> .content {
 		margin-bottom: var(--margin);
 	}
+
+	&.max-width_500px {
+		> .profile {
+			> .banner-container {
+				height: 140px;
+
+				> .fade {
+					display: none;
+				}
+
+				> .title {
+					display: none;
+				}
+			}
+
+			> .title {
+				display: block;
+			}
+
+			> .avatar {
+				top: 90px;
+				left: 0;
+				right: 0;
+				width: 92px;
+				height: 92px;
+				margin: auto;
+			}
+
+			> .description {
+				padding: 16px;
+				text-align: center;
+			}
+
+			> .fields {
+				padding: 16px;
+			}
+
+			> .status {
+				padding: 16px;
+			}
+		}
+	}
 }
 </style>
--- a/src/client/router.ts
+++ b/src/client/router.ts
@@ -24,6 +24,7 @@ export const router = new VueRouter({
 		{ path: '/about-misskey', component: page('about-misskey') },
 		{ path: '/featured', component: page('featured') },
 		{ path: '/docs', component: page('docs') },
+		{ path: '/theme-editor', component: page('theme-editor') },
 		{ path: '/docs/:doc', component: page('doc'), props: true },
 		{ path: '/explore', component: page('explore') },
 		{ path: '/explore/tags/:tag', props: true, component: page('explore') },
--- a/src/client/scripts/create-aiscript-env.ts
+++ b/src/client/scripts/create-aiscript-env.ts
@@ -40,3 +40,18 @@ export function createAiScriptEnv(vm, opts) {
 		}),
 	};
 }
+
+export function createPluginEnv(vm, opts) {
+	return {
+		...createAiScriptEnv(vm, opts),
+		'Mk:register_post_form_action': values.FN_NATIVE(([title, handler]) => {
+			vm.$store.commit('registerPostFormAction', { pluginId: opts.plugin.id, title: title.value, handler });
+		}),
+		'Mk:register_user_action': values.FN_NATIVE(([title, handler]) => {
+			vm.$store.commit('registerUserAction', { pluginId: opts.plugin.id, title: title.value, handler });
+		}),
+		'Mk:register_note_action': values.FN_NATIVE(([title, handler]) => {
+			vm.$store.commit('registerNoteAction', { pluginId: opts.plugin.id, title: title.value, handler });
+		}),
+	};
+}
--- a/src/client/scripts/form.ts
+++ b/src/client/scripts/form.ts
@@ -0,0 +1,26 @@
+export type FormItem = {
+	label?: string;
+	type: 'string';
+	default: string | null;
+	hidden?: boolean;
+	multiline?: boolean;
+} | {
+	label?: string;
+	type: 'number';
+	default: number | null;
+	hidden?: boolean;
+	step?: number;
+} | {
+	label?: string;
+	type: 'boolean';
+	default: boolean | null;
+	hidden?: boolean;
+} | {
+	label?: string;
+	type: 'enum';
+	default: string | null;
+	hidden?: boolean;
+	enum: string[];
+};
+
+export type Form = Record<string, FormItem>;
--- a/src/client/scripts/hpml/evaluator.ts
+++ b/src/client/scripts/hpml/evaluator.ts
@@ -3,7 +3,7 @@ import * as seedrandom from 'seedrandom';
 import { Variable, PageVar, envVarsDef, funcDefs, Block, isFnBlock } from '.';
 import { version } from '../../config';
 import { AiScript, utils, values } from '@syuilo/aiscript';
-import { createAiScriptEnv } from '../create-aiscript-env';
+import { createAiScriptEnv } from '../aiscript/api';
 import { collectPageVars } from '../collect-page-vars';
 import { initLib } from './lib';

--- a/src/client/scripts/paging.ts
+++ b/src/client/scripts/paging.ts
@@ -13,7 +13,7 @@ export default (opts) => ({
 			moreFetching: false,
 			inited: false,
 			more: false,
-			backed: false,
+			backed: false, // 遡り中か否か
 			isBackTop: false,
 			ilObserver: new IntersectionObserver(
 				(entries) => entries.some((entry) => entry.isIntersecting)
@@ -22,7 +22,6 @@ export default (opts) => ({
 					&& this.fetchMore()
 				),
 			loadMoreElement: null as Element,
-			unsubscribeInfiniteScrollMutation: null as any,
 		};
 	},

@@ -65,13 +64,6 @@ export default (opts) => ({
 				this.loadMoreElement = this.$refs.loadMore instanceof Element ? this.$refs.loadMore : this.$refs.loadMore.$el;
 				if (this.$store.state.device.enableInfiniteScroll) this.ilObserver.observe(this.loadMoreElement);
 				this.loadMoreElement.addEventListener('click', this.fetchMore);
-
-				this.unsubscribeInfiniteScrollMutation = this.$store.subscribe(mutation => {
-					if (mutation.type !== 'device/setInfiniteScrollEnabling') return;
-
-					if (mutation.payload) return this.ilObserver.observe(this.loadMoreElement);
-					return this.ilObserver.unobserve(this.loadMoreElement);
-				});
 			}
 		});
 	},
@@ -79,7 +71,6 @@ export default (opts) => ({
 	beforeDestroy() {
 		this.ilObserver.disconnect();
 		if (this.$refs.loadMore) this.loadMoreElement.removeEventListener('click', this.fetchMore);
-		if (this.unsubscribeInfiniteScrollMutation) this.unsubscribeInfiniteScrollMutation();
 	},

 	methods: {
--- a/src/client/scripts/room/room.ts
+++ b/src/client/scripts/room/room.ts
@@ -516,8 +516,8 @@ export class Room {
 		if (this.isTransformMode) return;

 		const rect = (ev.target as HTMLElement).getBoundingClientRect();
-		const x = (((ev.clientX * window.devicePixelRatio) - rect.left) / this.canvas.width) * 2 - 1;
-		const y = -(((ev.clientY * window.devicePixelRatio) - rect.top) / this.canvas.height) * 2 + 1;
+		const x = ((ev.clientX - rect.left) / rect.width) * 2 - 1;
+		const y = -((ev.clientY - rect.top) / rect.height) * 2 + 1;
 		const pos = new THREE.Vector2(x, y);

 		this.camera.updateMatrixWorld();
@@ -553,8 +553,8 @@ export class Room {
 		if (ev.target !== this.canvas || ev.button !== 0) return;

 		const rect = (ev.target as HTMLElement).getBoundingClientRect();
-		const x = (((ev.clientX * window.devicePixelRatio) - rect.left) / this.canvas.width) * 2 - 1;
-		const y = -(((ev.clientY * window.devicePixelRatio) - rect.top) / this.canvas.height) * 2 + 1;
+		const x = ((ev.clientX - rect.left) / rect.width) * 2 - 1;
+		const y = -((ev.clientY - rect.top) / rect.height) * 2 + 1;
 		const pos = new THREE.Vector2(x, y);

 		this.camera.updateMatrixWorld();
--- a/src/client/scripts/scroll.ts
+++ b/src/client/scripts/scroll.ts
@@ -1,7 +1,7 @@
 export function getScrollContainer(el: Element | null): Element | null {
 	if (el == null || el.tagName === 'BODY') return null;
-	const style = window.getComputedStyle(el);
-	if (style.getPropertyValue('overflow') === 'auto') {
+	const overflow = window.getComputedStyle(el).getPropertyValue('overflow');
+	if (overflow.endsWith('auto')) { // xとyを個別に指定している場合、hidden auto みたいな値になる
 		return el;
 	} else {
 		return getScrollContainer(el.parentElement);
@@ -25,3 +25,12 @@ export function onScrollTop(el: Element, cb) {
 	};
 	container.addEventListener('scroll', onScroll, { passive: true });
 }
+
+export function scroll(el: Element, top: number) {
+	const container = getScrollContainer(el);
+	if (container == null) {
+		window.scroll({ top: top, behavior: 'instant' });
+	} else {
+		container.scrollTop = top;
+	}
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
syuilo	eb15d31ebf	12.41.3	2020-07-15 18:27:57 +09:00
syuilo	e7f1ab2d01	fix(client): Fix #6526	2020-07-15 18:22:19 +09:00
syuilo	9d3beb3174	fix(client): Fix #6540	2020-07-15 18:03:08 +09:00
syuilo	b6c3399abe	chore: Add note	2020-07-15 00:21:14 +09:00
syuilo	0a28573845	chore: Add note	2020-07-13 23:29:30 +09:00
syuilo	937df577f1	fix(client): Fix sticky sidebar behavior	2020-07-13 15:13:02 +09:00
tamaina	e54fd6c2cb	Update CHANGELOG.md	2020-07-13 15:06:51 +09:00
tamaina	3caea9d33e	Update CHANGELOG.md	2020-07-13 15:05:47 +09:00
syuilo	b9e9631195	feat(client): Add sounds 🎵	2020-07-12 22:17:13 +09:00
syuilo	76bded455a	12.41.2	2020-07-12 18:37:24 +09:00
syuilo	c94d9210ed	New Crowdin updates (#6527 ) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (German) * New translations ja-JP.yml (German) * New translations ja-JP.yml (English) * New translations ja-JP.yml (Spanish) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Spanish) * New translations ja-JP.yml (Korean) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Arabic) * New translations ja-JP.yml (Arabic) * New translations ja-JP.yml (French) * New translations ja-JP.yml (Arabic) * New translations ja-JP.yml (French) * New translations ja-JP.yml (German) * New translations ja-JP.yml (English)	2020-07-12 18:36:42 +09:00
syuilo	0f5db9558c	fix(client): Show shadow	2020-07-12 18:36:14 +09:00
syuilo	35a8c37922	fix(client): Fix theme color	2020-07-12 18:22:13 +09:00
syuilo	6ff84a1061	refactor	2020-07-12 18:19:02 +09:00
syuilo	aae9bc4cf4	feat(client): blur effect for modal	2020-07-12 18:14:59 +09:00
syuilo	426c2fa5d1	fix(locale): Add missing key	2020-07-12 17:44:27 +09:00
syuilo	dab728278c	fix(client): Fix indicator position	2020-07-12 17:43:35 +09:00
syuilo	7555ab097a	fix(client): i18n	2020-07-12 17:37:56 +09:00
syuilo	5b5b64d251	fix(client): Fix #6532	2020-07-12 16:14:49 +09:00
syuilo	eb84445796	fix(client): Fix style	2020-07-12 16:05:00 +09:00
syuilo	364bd9ae74	fix(server): Fix #6533	2020-07-12 15:35:11 +09:00
rinsuki	d4b0761549	Deckのタイムラインカラムの初回種別選択でキャンセルが押されたらタイムラインカラムを消すように (#6535 ) Fix #6531	2020-07-12 15:33:04 +09:00
syuilo	f8e06f12fd	12.41.1	2020-07-12 11:44:37 +09:00
syuilo	320352bf4b	fix(client): Fix icon	2020-07-12 11:43:46 +09:00
syuilo	3c66990263	fix(client): Fix #6528	2020-07-12 11:36:28 +09:00
syuilo	7cbe95a1cf	fix(cliemt): Fix style	2020-07-12 11:34:45 +09:00
syuilo	c89abda3fb	feat(client): Remove ResizeObserver polyfill	2020-07-12 11:29:45 +09:00
syuilo	90348f4ac7	clean up	2020-07-12 10:55:47 +09:00
syuilo	08293f368f	12.41.0	2020-07-12 00:46:43 +09:00
syuilo	d5378dab27	New Crowdin updates (#6498 ) * New translations ja-JP.yml (Arabic) * New translations ja-JP.yml (Arabic) * New translations ja-JP.yml (Arabic) * New translations ja-JP.yml (Arabic) * New translations ja-JP.yml (French) * New translations ja-JP.yml (Arabic) * New translations ja-JP.yml (French) * New translations ja-JP.yml (German) * New translations ja-JP.yml (English) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (French) * New translations ja-JP.yml (Spanish) * New translations ja-JP.yml (Kabyle) * New translations ja-JP.yml (Kabyle) * New translations ja-JP.yml (Kabyle) * New translations ja-JP.yml (Kabyle) * New translations ja-JP.yml (Kabyle) * New translations ja-JP.yml (English) * New translations ja-JP.yml (German) * New translations ja-JP.yml (English) * New translations ja-JP.yml (Spanish) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Dutch) * New translations ja-JP.yml (Japanese, Kansai) * New translations ja-JP.yml (Kannada) * New translations ja-JP.yml (Uyghur) * New translations ja-JP.yml (English) * New translations ja-JP.yml (Portuguese) * New translations ja-JP.yml (Polish) * New translations ja-JP.yml (Norwegian) * New translations ja-JP.yml (Korean) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (German) * New translations ja-JP.yml (Danish) * New translations ja-JP.yml (Czech) * New translations ja-JP.yml (Spanish) * New translations ja-JP.yml (Arabic) * New translations ja-JP.yml (French) * New translations ja-JP.yml (Russian) * New translations ja-JP.yml (Kabyle) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Japanese, Kansai) * New translations ja-JP.yml (English) * New translations ja-JP.yml (Korean) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (German) * New translations ja-JP.yml (Spanish) * New translations ja-JP.yml (French) * New translations ja-JP.yml (Kabyle) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (German) * New translations ja-JP.yml (German) * New translations ja-JP.yml (German) * New translations ja-JP.yml (German) * New translations ja-JP.yml (English) * New translations ja-JP.yml (English) * New translations ja-JP.yml (German) * New translations ja-JP.yml (Spanish) * New translations ja-JP.yml (Spanish) * New translations ja-JP.yml (Spanish) * New translations ja-JP.yml (Spanish)	2020-07-12 00:45:06 +09:00
fuyu	91648d1bd4	フォロワーではないリモートユーザーに削除通知が配信されない問題を修正 (#6475 ) * フォロワーではないリモートユーザーに削除通知が配信されない問題を修正 * 同じ処理を一つにまとめた * Inのエラー修正, Renote/Quote対応 Co-authored-by: mei23 <m@m544.net>	2020-07-12 00:44:31 +09:00
tamaina	66d6e71f06	Fix style of input(type="search") on macOS Safari (#6484 )	2020-07-12 00:43:17 +09:00
Xeltica	a0ea5776ab	fix #6335 (#6507 )	2020-07-12 00:39:45 +09:00
syuilo	9b73e897df	Plugin system (#6479 ) * wip * wip * wip * wip * Update store.ts	2020-07-12 00:38:55 +09:00
syuilo	debc0086fa	feat(client): 無限にダイアログを出すように Resolve #6525	2020-07-12 00:31:37 +09:00
syuilo	065ec8e170	fix(client): Fix timeline widget setting definition	2020-07-12 00:19:47 +09:00
syuilo	11f8d742eb	fix(client): Fix style	2020-07-12 00:17:30 +09:00
syuilo	adf4f5410a	style: Fix linr	2020-07-12 00:14:34 +09:00
syuilo	8ff2694cad	feat(client): ミューテーション監視をやめてページリロードするように	2020-07-12 00:12:30 +09:00
syuilo	191c064611	chore: Add TODO	2020-07-12 00:01:55 +09:00
syuilo	d327bb8ff1	chore: Update dependencies 🚀	2020-07-11 23:53:29 +09:00
Xeltica	80bebea9e6	テーマエディターの実装 (#6482 ) * テーマ機能の実装 * resolve #6478 * 定数を削除できるように * 変更を破棄するか確認ダイアログを表示するように * fix code * Update theme.ts * ✌️ * fix path * wip * wip * wip Co-authored-by: syuilo <syuilotan@yahoo.co.jp>	2020-07-11 12:12:35 +09:00
syuilo	cf3fc97202	Deck (#6504 ) * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip	2020-07-11 10:13:11 +09:00
MeiMei	5b28d7bf90	タイムライン上でTwitterウィジットを展開できるようになど (#6496 ) * TL上でTwitterウィジットを展開できるようになど * use iframe * Twitterウィジットがはみ出すのを修正	2020-07-11 06:25:20 +09:00
MeiMei	5f8fb43cc9	AP Delate Activityの修正 (#6512 )	2020-07-11 06:19:49 +09:00
MeiMei	6eff6ee451	Update resolutions (#6516 ) * Fix SNYK-JS-LODASH-567746 * Fix SNYK-JS-YARGSPARSER-560381 * Fix SNYK-JS-SERIALIZEJAVASCRIPT-570062	2020-07-11 06:18:43 +09:00
MeiMei	c2ab3a15f4	Fix #6397 Mastodon v2.5.0未満からのActivityが受け取れない (#6518 )	2020-07-11 06:18:14 +09:00
MeiMei	a100e13a18	Fix #6513 キャッシュされてないリモートファイルのURLが相対URLで返ってくる (#6514 )	2020-07-10 03:52:20 +09:00
syuilo	a591a334ed	refactor	2020-07-10 00:20:26 +09:00
syuilo	ca2e53bd6e	🎨	2020-07-09 21:18:46 +09:00
syuilo	d4b4b61535	feat(client): Add sound 🎵	2020-07-08 23:29:35 +09:00
syuilo	440deb4624	Update mios.ts	2020-07-08 23:27:35 +09:00
tamaina	bbb0130522	Update CHANGELOG.md	2020-07-07 22:23:16 +09:00
Xeltica	b6a4061097	fix 非ログイン時に n または p キー押下で投稿フォームが出る (#6508 ) * fix #5851 * post-formのスポーンを弾く場所を変更	2020-07-07 15:50:47 +09:00
MeiMei	48c94907c2	Increase download timeout to 60 sec (#6503 )	2020-07-06 23:55:59 +09:00
syuilo	4fd06369d3	🎨	2020-07-06 18:20:42 +09:00
syuilo	27a17b467d	🎨	2020-07-06 17:26:18 +09:00
syuilo	c25cf7f89a	Resolve #6500	2020-07-06 16:08:30 +09:00
syuilo	ade11aa447	🎨	2020-07-06 00:09:36 +09:00
syuilo	3799708daf	feat(client): ウィジェットを画面スクロールに連動させるオプション	2020-07-06 00:03:08 +09:00
fuyu	462204e204	ダークテーマを利用中だとウィジェット編集画面が見づらい問題を修正 (#6497 )	2020-07-05 23:36:41 +09:00
syuilo	752669bf5e	🎨	2020-07-05 23:30:23 +09:00
MeiMei	b08e3f59d3	scrollbar-widthを設定するように (#6495 ) * scrollbar-widthを設定するように * fix	2020-07-05 11:37:45 +09:00
MeiMei	443b45e509	Fix SNYK-JS-THENIFY-571690 (CVE-2020-7677) (#6491 )	2020-07-05 06:41:40 +09:00
syuilo	b2bed61088	12.40.0	2020-07-05 04:29:30 +09:00
syuilo	be516d3c1e	New Crowdin translations (#6449 ) * New translations ja-JP.yml (Korean) * New translations ja-JP.yml (Korean) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Traditional) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Russian) * New translations ja-JP.yml (Russian) * New translations ja-JP.yml (French) * New translations ja-JP.yml (French) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Chinese Simplified)	2020-07-05 04:28:40 +09:00
syuilo	f5b41e1fbf	refactor	2020-07-05 03:55:34 +09:00
syuilo	e9afc1d867	refactror	2020-07-05 03:49:58 +09:00
syuilo	a891f7e862	🎨	2020-07-05 03:38:50 +09:00
syuilo	b715ea4621	🎨	2020-07-05 03:11:39 +09:00
syuilo	ea13efe495	Add welcome widget	2020-07-05 02:09:14 +09:00
syuilo	37f862947b	✌️	2020-07-04 22:53:56 +09:00
syuilo	ecb0861be4	refactor	2020-07-04 22:43:17 +09:00
syuilo	624c9f3418	feat(client): ウィジェットを左にも置けるように	2020-07-04 22:33:42 +09:00
syuilo	1b75984046	wip	2020-07-04 21:47:54 +09:00
syuilo	157f1c66dc	wip	2020-07-04 21:33:50 +09:00
syuilo	cb41391bae	wip	2020-07-04 21:19:12 +09:00
syuilo	acc88825fc	wip	2020-07-04 21:07:45 +09:00
syuilo	233a837e35	chore(cleint): vclean up code	2020-07-04 20:42:29 +09:00
syuilo	9e4456ac1b	wip	2020-07-04 20:38:39 +09:00
syuilo	83e1068da3	wip	2020-07-04 18:28:57 +09:00
syuilo	1fd345f563	chore(client): 🎨	2020-07-04 18:28:31 +09:00
fuyu	37c16e5b45	「すべて既読にする」でグループメッセージが既読にならない問題を修正 (#6476 )	2020-07-04 10:45:36 +09:00
MeiMei	ca25b9acc1	投稿詳細でTwitterウィジェットが表示されなくなっているのを修正 Fix #6487 (#6488 )	2020-07-03 23:12:50 +09:00
Hinaloe	c3022d38f7	three.jsをr117に巻き戻す (#6483 )	2020-07-02 19:17:26 +09:00
syuilo	3599f16d22	chore(deps): Update dependencies 🚀	2020-06-27 23:25:06 +09:00
syuilo	3f78f6f6bb	feat(client): Do not wrap widgets	2020-06-27 20:54:56 +09:00
syuilo	41f66e4299	chore: Update webpack	2020-06-27 11:21:50 +09:00
Xeltica	0d36b144cf	fix サイドバーの設定に不具合があるとページが表示できなくなる (#6473 ) * fix #6460 * Update app.vue Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>	2020-06-21 23:01:10 +09:00
Xeltica	aa652aac8a	タップ不可能なリアクションを押してもパーティクルが出るバグを修正 (#6472 ) * resolve #6453 * リアクションビューワーのトグル可能判定にログインしているかどうかも反映	2020-06-21 22:34:28 +09:00
syuilo	8dbdab4a47	Merge branch 'develop' of https://github.com/syuilo/misskey into develop	2020-06-21 16:37:43 +09:00
syuilo	90c07a220f	chore(client): Improve emoji picker usability	2020-06-21 16:37:30 +09:00
MeiMei	23e2a870cc	プロフィールの「場所」「誕生日」を連合するように Resove #6461 (#6463 ) * AP birthday, location * unset is null * isCatを検証対象に	2020-06-21 14:09:01 +09:00
Robin B	dc8eb7d4fe	Update english nyaize (#6456 ) * Update english nyaize * Update src/misc/nyaize.ts Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com> Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>	2020-06-21 14:07:27 +09:00
syuilo	fd363f5617	chore(client): 🎨	2020-06-14 13:23:19 +09:00
MeiMei	1726ff3977	AP向けのアンケートのfallbackリンクなどを削除 (#6466 )	2020-06-14 10:26:13 +09:00
MeiMei	93aba74463	アカウント切り替え後にインスタンス設定の表示値が変わらないのを修正 Fix #6448 (#6454 ) * Fix #6448 * Use nextTick	2020-06-07 14:01:40 +09:00
MeiMei	99955f0af9	Update .gitignore (#6459 )	2020-06-07 11:03:29 +09:00
tamaina	30cf154542	Update CHANGELOG.md	2020-06-05 13:52:17 +09:00
tamaina	f2c33b06cf	Update CHANGELOG.md	2020-06-05 13:18:32 +09:00