12.53.0

New Crowdin updates (#6797 )
* New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (German) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (English) * New translations ja-JP.yml (Chinese Simplified) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian) * New translations ja-JP.yml (Ukrainian)
2020-11-03 22:11:23 +09:00 · 2020-11-03 22:08:29 +09:00 · 2020-11-03 22:02:55 +09:00 · 2020-11-03 20:36:12 +09:00 · 2020-11-03 20:28:38 +09:00 · 2020-11-03 19:54:35 +09:00
464 changed files with 22933 additions and 16603 deletions
--- a/.config/example.yml
+++ b/.config/example.yml
@@ -154,3 +154,6 @@ id: 'aid'

 # Media Proxy
 #mediaProxy: https://example.com/proxy
+
+# Sign to ActivityPub GET request (default: false)
+#signToActivityPubGet: true
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge&logo=github)](http://makeapullrequest.com)
 [![Awesome Humane Tech](https://raw.githubusercontent.com/humanetech-community/awesome-humane-tech/main/humane-tech-badge.svg?sanitize=true)](https://github.com/humanetech-community/awesome-humane-tech)

-**A forever evolving, sophisticated microblogging platform.**
+**A forever evolving, professional microblogging platform.**

 <p align="justify">
 <a href="https://join.misskey.page/">Misskey</a> is a decentralized microblogging platform born on Earth.
--- a/gulpfile.ts
+++ b/gulpfile.ts
@@ -7,9 +7,6 @@ import * as gulp from 'gulp';
 import * as ts from 'gulp-typescript';
 import * as rimraf from 'rimraf';
 import * as rename from 'gulp-rename';
-const cleanCSS = require('gulp-clean-css');
-const sass = require('gulp-dart-sass');
-const fiber = require('fibers');

 const locales: { [x: string]: any } = require('./locales');
 const meta = require('./package.json');
@@ -61,13 +58,6 @@ gulp.task('cleanall', gulp.parallel('clean', cb =>
 	rimraf('./node_modules', cb)
 ));

-gulp.task('build:client:styles', () =>
-	gulp.src('./src/client/style.scss')
-		.pipe(sass({ fiber }))
-		.pipe(cleanCSS())
-		.pipe(gulp.dest('./built/client/assets/'))
-);
-
 gulp.task('copy:client', () =>
 		gulp.src([
 			'./assets/**/*',
@@ -87,7 +77,6 @@ gulp.task('copy:docs', () =>
 );

 gulp.task('build:client', gulp.parallel(
-	'build:client:styles',
 	'copy:client',
 	'copy:docs'
 ));
--- a/locales/ar-SA.yml
+++ b/locales/ar-SA.yml
@@ -1,5 +1,6 @@
 ---
 _lang_: "العربية"
+introMisskey: "اهلا بك! ميسكي هو منصة تدوين مصغر لا مركزية ومفتوحة المصدر.\nيمكنك مشاركة \"ملاحظات\" عن ما يجري حولك، وإخبار الجميع عن نفسك 📡\nتسمح لك \"الانفعالات\" بتعبير عن شعورك حول ملاحظات الآخرين 👍\nاكتشف عالمًا جديدًا 🚀"
 monthAndDay: "{day}/{month}"
 search: "البحث"
 notifications: "الإشعارات"
@@ -14,8 +15,12 @@ noNotes: "لم يتم العثور على أية ملاحظات"
 noNotifications: "ليس هناك أية اشعارات"
 instance: "مثيل الخادم"
 settings: "الاعدادات"
+basicSettings: "الاعدادات الأساسية"
+otherSettings: "إعدادات أخرى"
+openInWindow: "افتح في نافذة جديدة"
 profile: "الملف التعريفي"
 timeline: "الخيط الزمني"
+noAccountDescription: "لم يكتب هذا المستخدم سيرته بعد."
 login: "لِج"
 loggingIn: "جارٍ تسجيل الدخول"
 logout: "الخروج"
@@ -28,22 +33,31 @@ favorite: "إضافة إلى المفضلة"
 favorites: "المفضلات"
 unfavorite: "إزالة من المفضلة"
 pin: "دبّسها على الصفحة الشخصية"
+unpin: "ألغ تثبيتها من ملفك الشخصي"
 copyContent: "انسخ المحتوى"
 copyLink: "انسخ الرابط"
 delete: "حذف"
 deleteAndEdit: "إزالة وإعادة الصياغة"
+deleteAndEditConfirm: "أمتأكد من حذف الملاحظة؟ ستفقد كل مشاركاتها، والتفاعلات، والردود عليها."
 addToList: "أضفه إلى قائمة"
 sendMessage: "أرسل رسالة"
 copyUsername: "انسخ اسم المستخدم"
+searchUser: "ابحث عن مستخدمين"
 reply: "رد"
 loadMore: "عرض المزيد"
 youGotNewFollower: "يتابعك"
+receiveFollowRequest: "تلقيت طلب متابعة"
+followRequestAccepted: "قُبل طلب المتابعة"
+mention: "أشر الى"
 mentions: "الإشارات"
 directNotes: "الملاحظات المباشرة"
+importAndExport: "إستورد / صدر"
 import: "استيراد"
 export: "تصدير"
 files: "الملفات"
 download: "تنزيل"
+driveFileDeleteConfirm: "أمتأكد من حذف ملف {name}؟ كل الملاحظات المُرفق بها هذا الملف ستحذف."
+unfollowConfirm: "أمتأكد من إلغاء متابعة {name}؟"
 lists: "القوائم"
 noLists: "ليس لديك أية قائمة"
 note: "ملاحظة"
@@ -53,8 +67,10 @@ followers: "المتابِعين"
 followsYou: "يتابعك"
 createList: "إنشاء قائمة"
 manageLists: "إدارة القوائم"
-error: "حدث خطأ ما"
+error: "خطأ"
+somethingHappened: "حدث خطأ"
 retry: "حاول مجددًا"
+pageLoadError: "فشل تحميل الصفحة"
 enterListName: "اسم القائمة"
 privacy: "الخصوصية"
 makeFollowManuallyApprove: "القبول يدويا طلبات الإشتراك"
@@ -64,6 +80,7 @@ followRequest: "طلب اشتراك"
 followRequests: "طلبات الإشتراك"
 unfollow: "إلغاء الاشتراك"
 followRequestPending: "طلبات الإشتراك المعلّقة"
+enterEmoji: "أدخل إيموجي"
 unrenote: "إلغاء مشاركة الملاحظة"
 quote: "اقتبس"
 pinnedNote: "ملاحظة مدبسة"
@@ -71,16 +88,26 @@ you: "أنت"
 clickToShow: "اضغط للعرض"
 sensitive: "محتوى حساس"
 add: "إضافة"
+reaction: "تفاعل"
 rememberNoteVisibility: "تذكر إعدادت مدى رؤية الملاحظات"
+attachCancel: "أزل المرفق"
 enterFileName: "ادخل اسم الملف"
 mute: "اكتم"
 unmute: "إلغاء الكتم"
 block: "احجب"
 unblock: "إلغاء الحجب"
+suspend: "علِق"
+unsuspend: "ألغ التعليق"
+blockConfirm: "أمتأكد من حجب هذا الحساب؟"
+unblockConfirm: "أمتأكد من إلغاء حجب هذا الحساب؟"
 selectList: "اختر قائمة"
+editWidgetsExit: "تم"
 customEmojis: "إيموجي مخصص"
 addEmoji: "إضافة إيموجي"
+cacheRemoteFiles: "خزن مؤقتا الملفات البعيدة"
+autoAcceptFollowed: "اقبل طلبات المتابعة تلقائيا من الحسابات المتابَعة"
 addAcount: "إضافة حساب"
+loginFailed: "فشل الولوج"
 showOnRemote: "رؤيته على مثيل الخادم البُعدي"
 general: "الرئيسية"
 wallpaper: "خلفية الشاشة"
@@ -88,6 +115,7 @@ setWallpaper: "استخدم خلفية الشاشة"
 removeWallpaper: "إزالة خلفية الشاشة"
 searchWith: "البحث: {q}"
 youHaveNoLists: "لا تمتلك أية قائمة"
+followConfirm: "أتريد متابعة {name}؟"
 proxyAccount: "حساب وكيل البروكسي"
 host: "المضيف"
 selectUser: "حدّد مستخدمًا"
@@ -96,6 +124,8 @@ annotation: "التعليقات"
 federation: "الفديرالية"
 instances: "مثيل الخادم"
 latestRequestSentAt: "آخر طلب أرسِل في"
+latestRequestReceivedAt: "آخر طلب تُلقي في"
+storageUsage: "مساحة التخزين المستخدمة"
 charts: "المنحنيات البيانية"
 perHour: "في الساعة"
 perDay: "في اليوم"
@@ -127,7 +157,6 @@ processing: "المعالجة جارية"
 preview: "معاينة"
 default: "افتراضي"
 noCustomEmojis: "ليس هناك إيموجيات"
-customEmojisOfRemote: "الإيموجيات القادمة مِن مثيلات الخوادم الأخرى"
 federating: "الفديرالية جارية"
 blocked: "محجوب"
 suspended: "مُعلّق"
@@ -280,6 +309,7 @@ noteOf: "ملاحظات {user}"
 inviteToGroup: "دعوة إلى فريق"
 noMessagesYet: "ليس هناك رسائل بعد"
 newMessageExists: "لقد تلقيت رسالة جديدة"
+invitations: "دعوة"
 invitationCode: "رمز الدعوة"
 checking: "التحقق جارٍ"
 available: "متوفر"
@@ -313,7 +343,6 @@ total: "المجموع"
 weekOverWeekChanges: "أسبوعيا"
 dayOverDayChanges: "يوميا"
 appearance: "المظهر"
-clinetSettings: "إعدادات التطبيق"
 accountSettings: "إعدادات الحساب"
 promotion: "ترقية"
 promote: "روِّج"
@@ -351,6 +380,8 @@ smtpHost: "المضيف"
 smtpUser: "اسم المستخدم"
 smtpPass: "الكلمة السرية"
 display: "المظهر"
+_reversi:
+  total: "المجموع"
 _channel:
  featured: "المتداوَلة"
 _sidebar:
@@ -366,6 +397,7 @@ _theme:
  make: "إنشاء قالب"
  alpha: "الشفافية"
  keys:
+    mention: "أشر الى"
    messageBg: "خلفية الدردشة"
 _sfx:
  note: "الملاحظات"
@@ -508,7 +540,9 @@ _notification:
  youWereFollowed: "يتابعك"
  _types:
    follow: "المتابَعون"
+    mention: "أشر الى"
    quote: "اقتبس"
+    reaction: "تفاعل"
 _deck:
  _columns:
    notifications: "الإشعارات"
--- a/locales/de-DE.yml
+++ b/locales/de-DE.yml
@@ -16,6 +16,9 @@ noNotes: "Keine Notizen"
 noNotifications: "Keine Benachrichtigungen"
 instance: "Instanz"
 settings: "Einstellungen"
+basicSettings: "Allgemeine Einstellungen"
+otherSettings: "Andere Einstellungen"
+openInWindow: "In Fenster öffnen"
 profile: "Profil"
 timeline: "Chronik"
 noAccountDescription: "Dieser Nutzer hat seine Profilbeschreibung noch nicht ausgefüllt."
@@ -40,6 +43,7 @@ deleteAndEditConfirm: "Möchtest du diese Notiz wirklich löschen und bearbeiten
 addToList: "Zu Liste hinzufügen"
 sendMessage: "Nachricht senden"
 copyUsername: "Benutzernamen kopieren"
+searchUser: "Benutzersuche"
 reply: "Antworten"
 loadMore: "Mehr anzeigen"
 youGotNewFollower: "Du hast einen neuen Follower"
@@ -66,8 +70,11 @@ followers: "Gefolgt von"
 followsYou: "Folgt dir"
 createList: "Liste erstellen"
 manageLists: "Listen verwalten"
-error: "Ein Problem ist aufgetreten"
+error: "Fehler"
+somethingHappened: "Ein Fehler ist aufgetreten"
 retry: "Wiederholen"
+pageLoadError: "Laden der Seite fehlgeschlagen."
+pageLoadErrorDescription: "Dieser Fehler wird meist durch Netzwerkfehler oder den Browser-Cache verursacht. Versuche den Browser-Cache zu leeren und es nach kurzer Zeit noch einmal zu probieren."
 enterListName: "Listennamen eingeben"
 privacy: "Privatsphäre"
 makeFollowManuallyApprove: "Follow-Anfragen benötigen Bestätigung"
@@ -106,6 +113,8 @@ unsuspendConfirm: "Möchtest du die Sperrung dieses Benutzers wirklich aufheben?
 selectList: "Wähle eine Liste aus"
 selectAntenna: "Antenne auswählen"
 selectWidget: "Widget auswählen"
+editWidgets: "Widgets bearbeiten"
+editWidgetsExit: "Fertig"
 customEmojis: "Benutzerdefinierte Emojis"
 emoji: "Emoji"
 emojiName: "Emojiname"
@@ -177,7 +186,6 @@ processing: "In Bearbeitung"
 preview: "Vorschau"
 default: "Standard"
 noCustomEmojis: "Es existieren keine Emojis"
-customEmojisOfRemote: "Emojis von anderen Instanzen"
 noJobs: "Es gibt keine Jobs"
 federating: "Föderiert"
 blocked: "Blockiert"
@@ -404,6 +412,7 @@ noMessagesYet: "Noch keine Nachrichten"
 newMessageExists: "Du hast eine neue Nachricht"
 onlyOneFileCanBeAttached: "Es kann pro Nachricht nur eine Datei angehängt werden"
 signinRequired: "Anmeldung erforderlich"
+invitations: "Einladungen"
 invitationCode: "Einladungscode"
 checking: "Wird überprüft..."
 available: "Verfügbar"
@@ -445,7 +454,7 @@ total: "Gesamt"
 weekOverWeekChanges: "Wöchentlich"
 dayOverDayChanges: "Täglich"
 appearance: "Aussehen"
-clinetSettings: "Client-Einstellungen"
+clientSettings: "Client-Einstellungen"
 accountSettings: "Benutzerkonto-Einstellungen"
 promotion: "Hervorgehoben"
 promote: "Hervorheben"
@@ -476,6 +485,8 @@ newNoteRecived: "Es gibt neue Notizen"
 sounds: "Töne"
 listen: "Anhören"
 none: "Keine"
+showInPage: "In Seite anzeigen"
+popout: "Pop-Up"
 volume: "Lautstärke"
 details: "Details"
 chooseEmoji: "Wähle ein Emoji"
@@ -518,7 +529,6 @@ 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"
@@ -564,8 +574,73 @@ overview: "Übersicht"
 logs: "Logs"
 delayed: "Verzögert"
 database: "Datenbank"
-channel: "Kanal"
+channel: "Kanäle"
 create: "Erstellen"
+notificationSetting: "Benachrichtigungseinstellungen"
+notificationSettingDesc: "Wähle die Art der anzuzeigenden Benachrichtigung"
+useGlobalSetting: "Globale Einstellung verwenden"
+useGlobalSettingDesc: "Wenn dies eingeschaltet ist, werden die Benachrichtigungseinstellungen deines Benutzerkontos verwendet. Wenn dies ausgeschaltet ist, können individuelle Einstellungen vorgenommen werden."
+other: "Andere"
+regenerateLoginToken: "Login-Token regenerieren"
+regenerateLoginTokenDescription: "Den bei Logins intern verwendeten Token regenerieren. Normalerweise wird dies nicht benötigt. Bei Regeneration werden alle Geräte ausgeloggt."
+setMultipleBySeparatingWithSpace: "Trenne Elemente durch ein Leerzeichen um mehrere Einstellungen zu kofigurieren."
+fileIdOrUrl: "Datei-ID oder URL"
+chatOpenBehavior: "Verhalten des Chatfensters bei Öffnung"
+sample: "Beispiel"
+abuseReports: "Melden"
+reportAbuse: "Melden"
+reportAbuseOf: "{name} melden"
+fillAbuseReportDescription: "Bitte gib Details für diese Meldung an. Falls es sich um eine spezielle Notiz handelt, bitte gib dessen URL an."
+abuseReported: "Die Meldung wurde versendet. Vielen Dank."
+send: "Senden"
+abuseMarkAsResolved: "Meldung als gelöst markieren"
+openInNewTab: "In neuem Tab öffnen"
+openInSideView: "In Seitenansicht öffnen"
+defaultNavigationBehaviour: "Standardnavigationsverhalten"
+editTheseSettingsMayBreakAccount: "Bei Bearbeitung dieser Einstellungen besteht die Gefahr, dein Benutzerkonto zu beschädigen."
+instanceTicker: "Instanz-Informationen von Notizen"
+waitingFor: "Warte auf {x}"
+random: "Zufällig"
+system: "System"
+switchUi: "UI wechseln"
+desktop: "Desktop"
+_reversi:
+  reversi: "Reversi"
+  gameSettings: "Spieleinstellungen"
+  chooseBoard: "Spielbrett auswählen"
+  blackOrWhite: "Schwarz/Weiß"
+  blackIs: "{name} spielt Schwarz"
+  rules: "Regeln"
+  botSettings: "Optionen des Computergegners"
+  thisGameIsStartedSoon: "Dieses Spiel beginnt in wenigen Sekunden"
+  waitingForOther: "Warte auf den Zug des Gegenspielers"
+  waitingForMe: "Warte auf deinen Zug"
+  waitingBoth: "Mach dich bereit"
+  ready: "Bereit"
+  cancelReady: "Nicht bereit"
+  opponentTurn: "Zug deines Gegners"
+  myTurn: "Dein Zug"
+  turnOf: "Zug von {name}"
+  pastTurnOf: "Zug von {name}"
+  surrender: "Aufgeben"
+  surrendered: "durch Aufgabe"
+  drawn: "Unentschieden"
+  won: "{name} hat gesiegt"
+  black: "Schwarz"
+  white: "Weiß"
+  total: "Gesamt"
+  turnCount: " Zug {count}"
+  myGames: "Meine Runden"
+  allGames: "Alle Runden"
+  ended: "Beendet"
+  playing: "Laufend"
+  isLlotheo: "Der mit weniger Steinen gewinnt (Llotheo)"
+  loopedMap: "Wiederholendes Spielbrett"
+  canPutEverywhere: "Steine können überall platziert werden"
+_instanceTicker:
+  none: "Nie anzeigen"
+  remote: "Für Benutzer fremder Instanzen anzeigen"
+  always: "Immer anzeigen"
 _serverDisconnectedBehavior:
  reload: "Automatisch aktualisieren"
  dialog: "Warnungsfenster zeigen"
@@ -576,13 +651,13 @@ _channel:
  setBanner: "Kanalbanner festlegen"
  removeBanner: "Kanalbanner entfernen"
  featured: "Trends"
-  owned: "Besitzer"
-  following: "Folgt"
+  owned: "Besitzt"
+  following: "Gefolgt"
  usersCount: "{n} Teilnehmer"
  notesCount: "{n} Notizen"
 _sidebar:
  full: "Voll"
-  icon: "Profilbild"
+  icon: "Symbol"
  hide: "Ausblenden"
 _wordMute:
  muteWords: "Wort stummschalten"
@@ -782,6 +857,7 @@ _widgets:
  photos: "Fotos"
  digitalClock: "Digitaluhr"
  federation: "Föderation"
+  postForm: "Neue Notiz anfertigen"
 _cw:
  hide: "Ausblenden"
  show: "Mehr anzeigen"
@@ -1238,14 +1314,17 @@ _notification:
  youWereInvitedToGroup: "Du wurdest in eine Gruppe eingeladen"
  _types:
    all: "Alle"
-    follow: "Folgt"
-    mention: "Erwähnung"
+    follow: "Neue Follower"
+    mention: "Erwähnungen"
    reply: "Antworten"
-    renote: "Renote"
-    quote: "Zitieren"
+    renote: "Renotes"
+    quote: "Zitationen"
    reaction: "Reaktionen"
-    pollVote: "Umfragen"
-    receiveFollowRequest: "Follow-Anfragen"
+    pollVote: "Antworten auf Umfragen"
+    receiveFollowRequest: "Follow-Anfrage erhalten"
+    followRequestAccepted: "Follow-Anfrage akzeptiert"
+    groupInvited: "Gruppeneinladung erhalten"
+    app: "Benachrichtigungen von Apps"
 _deck:
  alwaysShowMainColumn: "Hauptspalte immer zeigen"
  columnAlign: "Spalten ausrichten"
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -16,6 +16,9 @@ noNotes: "No notes"
 noNotifications: "No notifications"
 instance: "Instance"
 settings: "Settings"
+basicSettings: "Basic Settings"
+otherSettings: "Other Settings"
+openInWindow: "Open in window"
 profile: "Profile"
 timeline: "Timeline"
 noAccountDescription: "This user has not written their bio yet."
@@ -29,7 +32,7 @@ users: "Users"
 addUser: "Add a user"
 favorite: "Favorite"
 favorites: "Favorites"
-unfavorite: "Undo favorite"
+unfavorite: "Unfavorite"
 pin: "Pin to profile"
 unpin: "Unpin from profile"
 copyContent: "Copy contents"
@@ -40,6 +43,7 @@ deleteAndEditConfirm: "Are you sure you want to delete this note and edit it? Yo
 addToList: "Add to list"
 sendMessage: "Send a message"
 copyUsername: "Copy username"
+searchUser: "User search"
 reply: "Reply"
 loadMore: "Load more"
 youGotNewFollower: "Followed you"
@@ -66,8 +70,11 @@ followers: "Followers"
 followsYou: "Follows you"
 createList: "Create list"
 manageLists: "Manage lists"
-error: "Something happened :("
+error: "Error"
+somethingHappened: "An error occurred"
 retry: "Retry"
+pageLoadError: "Failed to load page"
+pageLoadErrorDescription: "This is normally caused by network errors or the browser's cache. Try clearung the cache and then try again after waiting a little while."
 enterListName: "List name"
 privacy: "Privacy"
 makeFollowManuallyApprove: "Follow requests require approval"
@@ -106,6 +113,8 @@ unsuspendConfirm: "Are you sure you that want to unsuspend this account?"
 selectList: "Select a list"
 selectAntenna: "Select an Antenna"
 selectWidget: "Select a widget"
+editWidgets: "Edit widgets"
+editWidgetsExit: "Done"
 customEmojis: "Custom Emoji"
 emoji: "Emoji"
 emojiName: "Emoji name"
@@ -177,7 +186,6 @@ processing: "Processing"
 preview: "Preview"
 default: "Default"
 noCustomEmojis: "There are no emojis"
-customEmojisOfRemote: "Emojis from other instances"
 noJobs: "There are no jobs"
 federating: "Federating"
 blocked: "Blocked"
@@ -397,13 +405,14 @@ next: "Next"
 retype: "Enter again"
 noteOf: "{user}'s notes"
 inviteToGroup: "Invite to group"
-maxNoteTextLength: "Character limit of the note"
+maxNoteTextLength: "Character limit of notes"
 quoteAttached: "Quoted"
 quoteQuestion: "Do you want to append a quote?"
 noMessagesYet: "No messages yet"
 newMessageExists: "You've got a new message"
 onlyOneFileCanBeAttached: "You can only attach one file to a message"
 signinRequired: "Please sign in"
+invitations: "Invitations"
 invitationCode: "Invitation code"
 checking: "Checking"
 available: "Available"
@@ -445,7 +454,7 @@ total: "Total"
 weekOverWeekChanges: "Weekly"
 dayOverDayChanges: "Daily"
 appearance: "Appearance"
-clinetSettings: "Client Settings"
+clientSettings: "Client settings"
 accountSettings: "Account Settings"
 promotion: "Promoted"
 promote: "Promote"
@@ -476,6 +485,8 @@ newNoteRecived: "You've got a new note"
 sounds: "Sounds"
 listen: "Listen"
 none: "None"
+showInPage: "Show in page"
+popout: "Pop-out"
 volume: "Volume"
 details: "Details"
 chooseEmoji: "Choose an emoji"
@@ -518,7 +529,6 @@ 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"
@@ -564,8 +574,73 @@ overview: "Overview"
 logs: "Logs"
 delayed: "Delayed"
 database: "Database"
-channel: "Channel"
+channel: "Channels"
 create: "Create"
+notificationSetting: "Notification settings"
+notificationSettingDesc: "Select the type of notification to display"
+useGlobalSetting: "Use global setting"
+useGlobalSettingDesc: "If turned on, your account's notification settings will be used. If turned off, individual configurations can be made."
+other: "Other"
+regenerateLoginToken: "Regenerate login token"
+regenerateLoginTokenDescription: "Regenerate the token used internally during login. Normally this action is not necessary. If regenerated, all devices will be logged out."
+setMultipleBySeparatingWithSpace: "You can set multiple by separating them with spaces."
+fileIdOrUrl: "File-ID or URL"
+chatOpenBehavior: "Behavior of the chat window when opened"
+sample: "Sample"
+abuseReports: "Reports"
+reportAbuse: "Report"
+reportAbuseOf: "Report {name}"
+fillAbuseReportDescription: "Please fill in the report details. If it is about a specific note, please include its URL."
+abuseReported: "Your report has been sent. Thank you very much."
+send: "Send"
+abuseMarkAsResolved: "Mark report as resolved"
+openInNewTab: "Open in new tab"
+openInSideView: "Open in side view"
+defaultNavigationBehaviour: "Default navigation behavior"
+editTheseSettingsMayBreakAccount: "Editing these settings may damage your account."
+instanceTicker: "Instance information of notes"
+waitingFor: "Waiting for {x}"
+random: "Random"
+system: "System"
+switchUi: "Switch UI"
+desktop: "Desktop"
+_reversi:
+  reversi: "Reversi"
+  gameSettings: "Game settings"
+  chooseBoard: "Choose a board"
+  blackOrWhite: "Black/White"
+  blackIs: "{name} is playing Black"
+  rules: "Rules"
+  botSettings: "Bot options"
+  thisGameIsStartedSoon: "The game will start in a few seconds"
+  waitingForOther: "Waiting for the opponent's turn"
+  waitingForMe: "Waiting for your turn"
+  waitingBoth: "Get ready"
+  ready: "Ready"
+  cancelReady: "Cancel ready"
+  opponentTurn: "Opponent's turn"
+  myTurn: "Your turn"
+  turnOf: "{name}'s turn"
+  pastTurnOf: "{name}'s turn"
+  surrender: "Surrender"
+  surrendered: "By surrender"
+  drawn: "Draw"
+  won: "{name}'s win"
+  black: "Black"
+  white: "White"
+  total: "Total"
+  turnCount: "Turn {count}"
+  myGames: "My rounds"
+  allGames: "All rounds"
+  ended: "Ended"
+  playing: "Currently playing"
+  isLlotheo: "The one with fewer stones wins (Llotheo)"
+  loopedMap: "Looped map"
+  canPutEverywhere: "Tiles are placeable everywhere"
+_instanceTicker:
+  none: "Never show"
+  remote: "Show for remote users"
+  always: "Always show"
 _serverDisconnectedBehavior:
  reload: "Automatically reload"
  dialog: "Show warning dialog"
@@ -576,8 +651,8 @@ _channel:
  setBanner: "Set banner"
  removeBanner: "Remove banner"
  featured: "Trending"
-  owned: "Owner"
-  following: "Following"
+  owned: "Owned"
+  following: "Followed"
  usersCount: "{n} Participants"
  notesCount: "{n} Notes"
 _sidebar:
@@ -782,6 +857,7 @@ _widgets:
  photos: "Photos"
  digitalClock: "Digital clock"
  federation: "Federation"
+  postForm: "Compose a note"
 _cw:
  hide: "Hide"
  show: "Load more"
@@ -1238,14 +1314,17 @@ _notification:
  youWereInvitedToGroup: "Invited to group"
  _types:
    all: "All"
-    follow: "Following"
-    mention: "Mention"
+    follow: "Follows"
+    mention: "Mentions"
    reply: "Replies"
-    renote: "Renote"
-    quote: "Quote"
-    reaction: "Reaction"
-    pollVote: "Polls"
-    receiveFollowRequest: "Follow requests"
+    renote: "Renotes"
+    quote: "Quotes"
+    reaction: "Reactions"
+    pollVote: "Votes on polls"
+    receiveFollowRequest: "Follow request received"
+    followRequestAccepted: "Follow request accepted"
+    groupInvited: "Invited to groups"
+    app: "Notifications from apps"
 _deck:
  alwaysShowMainColumn: "Always show main column"
  columnAlign: "Align columns"
--- a/locales/es-ES.yml
+++ b/locales/es-ES.yml
@@ -16,6 +16,9 @@ noNotes: "No hay notas"
 noNotifications: "No hay notificaciones"
 instance: "Instancia"
 settings: "Configuración"
+basicSettings: "Configuración Básica"
+otherSettings: "Configuración avanzada"
+openInWindow: "Abrir en una ventana"
 profile: "Perfil"
 timeline: "Linea de tiempo"
 noAccountDescription: "Este usuario no tiene una descripción"
@@ -40,6 +43,7 @@ deleteAndEditConfirm: "¿Quieres borrar y editar este nota? Las reacciones, reno
 addToList: "Agregar a lista"
 sendMessage: "Énviar mensaje"
 copyUsername: "Copiar nombre de usuario"
+searchUser: "Búsqueda de usuarios"
 reply: "Responder"
 loadMore: "Ver más"
 youGotNewFollower: "te ha seguido"
@@ -66,8 +70,11 @@ followers: "Seguidores"
 followsYou: "Te sigue"
 createList: "Crear lista"
 manageLists: "Administrar listas"
-error: "Ocurrió un problema"
+error: "Error"
+somethingHappened: "Ocurrió un error"
 retry: "Reintentar"
+pageLoadError: "Error al leer la página"
+pageLoadErrorDescription: "Normalmente es debido a la red o al caché del navegador. Por favor limpie el caché o intente más tarde."
 enterListName: "Ingrese nombre de lista"
 privacy: "Privacidad"
 makeFollowManuallyApprove: "Aprobar manualmente las solicitudes de seguimiento"
@@ -106,6 +113,8 @@ unsuspendConfirm: "¿Quiere dejar de suspender esta cuenta?"
 selectList: "Seleccione una lista"
 selectAntenna: "Seleccionar antena"
 selectWidget: "Seleccionar widget"
+editWidgets: "Editar widgets"
+editWidgetsExit: "Terminar edición"
 customEmojis: "Emojis personalizados"
 emoji: "Emoji"
 emojiName: "Nombre del emoji"
@@ -177,7 +186,6 @@ processing: "Procesando"
 preview: "Vista previa"
 default: "Predeterminado"
 noCustomEmojis: "No hay emojis personalizados"
-customEmojisOfRemote: "Emojis remotos"
 noJobs: "No hay trabajos"
 federating: "Federando"
 blocked: "Bloqueando"
@@ -264,6 +272,7 @@ rename: "Renombrar"
 avatar: "Avatar"
 banner: "Banner"
 nsfw: "Marcado como sensible"
+whenServerDisconnected: "Cuando se pierda la conexión con el servidor"
 disconnectedFromServer: "Desconectado del servidor"
 reload: "Recargar"
 doNothing: "No hacer nada"
@@ -403,6 +412,7 @@ noMessagesYet: "Aún no hay chat"
 newMessageExists: "Tienes un mensaje nuevo"
 onlyOneFileCanBeAttached: "Solo se puede añadir un archivo al mensaje"
 signinRequired: "Iniciar sesión"
+invitations: "Invitar"
 invitationCode: "Código de invitación"
 checking: "Comprobando"
 available: "Disponible"
@@ -444,7 +454,7 @@ total: "Total"
 weekOverWeekChanges: "Dif semanal"
 dayOverDayChanges: "Dif diaria"
 appearance: "Apariencia"
-clinetSettings: "Ajustes del cliente"
+clientSettings: "Configuración del cliente"
 accountSettings: "Ajustes de cuenta"
 promotion: "Promovido"
 promote: "Promover"
@@ -475,6 +485,8 @@ newNoteRecived: "Tienes una nota nuevo"
 sounds: "Sonidos"
 listen: "Escuchar"
 none: "Ninguna"
+showInPage: "Mostrar en la página"
+popout: "Popout"
 volume: "Volumen"
 details: "Detalles"
 chooseEmoji: "Elije un emoji"
@@ -517,7 +529,6 @@ 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"
@@ -563,8 +574,47 @@ overview: "Resumen"
 logs: "Registros"
 delayed: "atrasado"
 database: "Base de datos"
+channel: "Canal"
+create: "Crear"
+notificationSetting: "Ajustes de Notificaciones"
+notificationSettingDesc: "Por favor elija el tipo de notificación a mostrar"
+useGlobalSetting: "Usar ajustes globales"
+useGlobalSettingDesc: "Al activarse, se usará la configuración de notificaciones de la cuenta, al desactivarse se pueden hacer configuraciones particulares."
+other: "Otro"
+regenerateLoginToken: "Regenerar token de login"
+regenerateLoginTokenDescription: "Regenerar el token usado internamente durante el login. No siempre es necesario hacerlo. Al hacerlo de nuevo, se deslogueará en todos los dispositivos."
+setMultipleBySeparatingWithSpace: "Puedes añadir mas de uno, separado por espacios."
+fileIdOrUrl: "Id del archivo o URL"
+chatOpenBehavior: "Comportamiento al abrir el chat"
+sample: "Muestra"
+abuseReports: "Reportes"
+reportAbuse: "Reportar"
+reportAbuseOf: "Reportar a {name}"
+fillAbuseReportDescription: "Ingrese los detalles del reporte. Si hay una nota en particular, ingrese la URL de esta."
+abuseReported: "Se ha enviado el reporte. Muchas gracias."
+send: "Enviar"
+abuseMarkAsResolved: "Marcar reporte como resuelto"
+openInNewTab: "Abrir en una Nueva Pestaña"
+openInSideView: "Abrir en una vista al costado"
+defaultNavigationBehaviour: "Navegación por defecto"
+editTheseSettingsMayBreakAccount: "Editar estas configuraciones puede dañar su cuenta."
+random: "Aleatorio"
+_reversi:
+  total: "Total"
+_serverDisconnectedBehavior:
+  reload: "Recargar automáticamente"
+  dialog: "Mostrar diálogo de advertencia"
+  quiet: "Advertencia discreta"
 _channel:
+  create: "Crear canal"
+  edit: "Editar canal"
+  setBanner: "Elegir banner"
+  removeBanner: "Borrar banner"
  featured: "Tendencias"
+  owned: "Dueño"
+  following: "Siguiendo"
+  usersCount: "{n} participantes"
+  notesCount: "{n} notas"
 _sidebar:
  full: "Completo"
  icon: "Avatar"
@@ -656,6 +706,7 @@ _sfx:
  chat: "Chat"
  chatBg: "Chat (Fondo)"
  antenna: "Antena receptora"
+  channel: "Notificaciones del canal"
 _ago:
  unknown: "Desconocido"
  future: "Futuro"
@@ -731,6 +782,8 @@ _permissions:
  "write:page-likes": "Administrar páginas que te gustan"
  "read:user-groups": "Ver grupos de usuarios"
  "write:user-groups": "Administrar grupos de usuarios"
+  "read:channels": "Ver canal"
+  "write:channels": "Modificar canal"
 _auth:
  shareAccess: "¿Desea permitir el acceso a la cuenta \"{name}\"?"
  shareAccessAsk: "¿Está seguro de que desea autorizar esta aplicación para acceder a su cuenta?"
@@ -764,6 +817,7 @@ _widgets:
  photos: "Fotos"
  digitalClock: "Reloj digital"
  federation: "Federación"
+  postForm: "Formulario"
 _cw:
  hide: "Ocultar"
  show: "Ver más"
@@ -805,6 +859,7 @@ _visibility:
 _postForm:
  replyPlaceholder: "Responder a esta nota"
  quotePlaceholder: "Citar esta nota"
+  channelPlaceholder: "Postear en el canal"
  _placeholders:
    a: "¿Qué haces?"
    b: "¿Te pasó algo?"
@@ -1225,8 +1280,11 @@ _notification:
    renote: "Renotar"
    quote: "Citar"
    reaction: "Reacción"
-    pollVote: "Encuestas"
-    receiveFollowRequest: "Solicitudes de seguimiento"
+    pollVote: "Votado en la encuesta"
+    receiveFollowRequest: "Recibió una solicitud de seguimiento"
+    followRequestAccepted: "El seguimiento fue aceptado"
+    groupInvited: "Invitado al grupo"
+    app: "Notificaciones desde aplicaciones"
 _deck:
  alwaysShowMainColumn: "Siempre mostrar la columna principal"
  columnAlign: "Alinear columnas"
--- a/locales/fr-FR.yml
+++ b/locales/fr-FR.yml
@@ -16,6 +16,9 @@ noNotes: "Aucune note"
 noNotifications: "Aucune notification"
 instance: "Instance"
 settings: "Paramètres"
+basicSettings: "Paramètres basiques"
+otherSettings: "Autres paramètres"
+openInWindow: "Ouvrir dans une nouvelle fenêtre"
 profile: "Profil"
 timeline: "Fil"
 noAccountDescription: "L’utilisateur·rice n’a pas encore renseigné de biographie de présentation sur son profil."
@@ -40,6 +43,7 @@ deleteAndEditConfirm: "Êtes-vous sûr·e de vouloir supprimer cette note et la
 addToList: "Ajouter à une liste"
 sendMessage: "Envoyer un message"
 copyUsername: "Copier le nom d’utilisateur·rice"
+searchUser: "Chercher un·e utilisateur·rice"
 reply: "Répondre"
 loadMore: "Afficher plus …"
 youGotNewFollower: "Vous suit"
@@ -66,8 +70,10 @@ followers: "Abonné·e·s"
 followsYou: "Vous suit"
 createList: "Créer une liste"
 manageLists: "Gérer les listes"
-error: "Une erreur est survenue"
+error: "Erreur"
+somethingHappened: "Une erreur est survenue"
 retry: "Réessayer"
+pageLoadError: "Le chargement de la page a échoué"
 enterListName: "Nom de la liste"
 privacy: "Confidentialité"
 makeFollowManuallyApprove: "Accepter manuellement les demandes d’abonnement"
@@ -106,6 +112,8 @@ unsuspendConfirm: "Êtes-vous sûr·e de vouloir annuler la suspension de ce com
 selectList: "Sélectionner une liste"
 selectAntenna: "Sélectionner une antenne"
 selectWidget: "Sélectionner un widget"
+editWidgets: "Modifier les widgets"
+editWidgetsExit: "Fait"
 customEmojis: "Émojis personnalisés"
 emoji: "Émoji"
 emojiName: "Nom de l’émoji"
@@ -177,7 +185,6 @@ processing: "Traitement en cours"
 preview: "Prévisualisation"
 default: "Par défaut"
 noCustomEmojis: "Il n'y a pas d’émoji"
-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"
@@ -264,6 +271,7 @@ rename: "Renommer"
 avatar: "Avatar"
 banner: "Bannière"
 nsfw: "Contenu sensible"
+whenServerDisconnected: "Lorsque la connexion au serveur est perdue"
 disconnectedFromServer: "Déconnecté·e du serveur"
 reload: "Rafraîchir"
 doNothing: "Ignorer"
@@ -403,6 +411,7 @@ noMessagesYet: "Pas encore discuté"
 newMessageExists: "Vous avez un nouveau message"
 onlyOneFileCanBeAttached: "Vous ne pouvez joindre qu’un seul fichier au message"
 signinRequired: "Veuillez vous connecter"
+invitations: "Inviter"
 invitationCode: "Code d’invitation"
 checking: "Vérification"
 available: "Disponible"
@@ -444,7 +453,7 @@ total: "Total"
 weekOverWeekChanges: "Diff hebdo"
 dayOverDayChanges: "Diff quotidien"
 appearance: "Aspect"
-clinetSettings: "Paramètres du client"
+clientSettings: "Paramètres du client"
 accountSettings: "Paramètres du compte"
 promotion: "Promu"
 promote: "Promouvoir"
@@ -474,6 +483,7 @@ newNoteRecived: "Vous avez une nouvelle note"
 sounds: "Sons"
 listen: "Écouter"
 none: "Rien"
+popout: "Fenêtre contextuelle"
 volume: "Volume"
 details: "Détails"
 chooseEmoji: "Choisissez un émoji"
@@ -516,7 +526,6 @@ 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"
@@ -538,6 +547,7 @@ tokenRequested: "Autoriser l'accès au compte"
 pluginTokenRequestedDescription: "Ce plugin pourra utiliser les autorisations définies ici."
 notificationType: "Type de notifications"
 edit: "Editer"
+useStarForReactionFallback: "Utiliser ★ comme alternative si l’émoji de réaction est inconnu"
 emailConfig: "Configuration du serveur email"
 enableEmail: "Activer la distribution de courriel"
 emailConfigInfo: "Utilisé pour confirmer votre adresse de courriel et la réinitialisation de votre mot de passe en cas d’oubli."
@@ -549,16 +559,48 @@ smtpUser: "Nom d’utilisateur·rice"
 smtpPass: "Mot de passe"
 emptyToDisableSmtpAuth: "Laisser le nom d’utilisateur et le mot de passe vides pour désactiver la vérification SMTP"
 smtpSecure: "Utiliser SSL/TLS implicitement dans les connexions SMTP"
+smtpSecureInfo: "Désactiver cette option lorsque STARTTLS est utilisé"
+testEmail: "Tester la distribution de courriel"
 wordMute: "Filtre de mots"
 userSaysSomething: "{name} a dit quelque chose"
 makeActive: "Activer"
 display: "Affichage"
+copy: "Copier"
+metrics: "Métriques"
+overview: "Aperçu"
+logs: "Journaux"
+delayed: "en retard"
+database: "Base de données"
+channel: "Canaux"
+create: "Créer"
+notificationSetting: "Paramètres des notifications "
+notificationSettingDesc: "Sélectionnez le type de notification à afficher"
+useGlobalSetting: "Utiliser paramètre général"
+other: "Autre"
+regenerateLoginToken: "Régénérer le jeton de connexion"
+setMultipleBySeparatingWithSpace: "Vous pouvez définir plus d’un, séparés par des espaces."
+fileIdOrUrl: "ID du fichier ou URL"
+chatOpenBehavior: "Comportement de la fenêtre de discussion lors de son ouverture"
+random: "Aléatoire"
+_reversi:
+  total: "Total"
+_serverDisconnectedBehavior:
+  reload: "Rechargement automatique"
 _channel:
+  create: "Créer un canal"
+  edit: "Éditer le canal"
+  removeBanner: "Supprimer la bannière"
  featured: "Tendances"
+  usersCount: "{n} Participants"
+  notesCount: "{n} Notes"
 _sidebar:
  full: "Complet"
  icon: "Avatar"
  hide: "Masquer"
+_wordMute:
+  muteWords: "Mot à mettre en sourdine"
+  muteWordsDescription: "Séparer avec des espaces pour la condition AND. Séparer avec un saut de ligne pour une condition OR."
+  mutedNotes: "Notes mises en sourdine"
 _theme:
  explore: "Explorer les thèmes"
  install: "Installer un thème"
@@ -569,6 +611,8 @@ _theme:
  invalid: "Le format du thème n'est pas valide"
  make: "Créer un thème"
  base: "Base"
+  addConstant: "Ajouter une constante"
+  constant: "Constante"
  defaultValue: "Valeur par défaut"
  color: "Couleur"
  key: "Clé "
@@ -594,6 +638,7 @@ _theme:
    renote: "Renote"
    divider: "Séparateur"
    infoWarnFg: "Texte d’avertissement"
+    cwBg: "Arrière-plan du CW"
    badge: "Badge"
    messageBg: "Arrière plan de la discussion"
 _sfx:
@@ -678,6 +723,8 @@ _permissions:
  "write:page-likes": "Mettre à jour les favoris sur les Pages"
  "read:user-groups": "Voir les groupes d'utilisateur·rice·s"
  "write:user-groups": "Éditer les groupes des utilisateur·rice·s"
+  "read:channels": "Lire les canaux"
+  "write:channels": "Modifier les canaux"
 _auth:
  shareAccess: "Autoriser \"{name}\" à accéder à votre compte ?"
  shareAccessAsk: "Voulez-vous vraiment autoriser cette application à accéder à votre compte?"
@@ -711,6 +758,7 @@ _widgets:
  photos: "Photos"
  digitalClock: "Horloge numérique"
  federation: "Fédération"
+  postForm: "Formulaire à publier"
 _cw:
  hide: "Masquer"
  show: "Afficher plus …"
@@ -752,6 +800,7 @@ _visibility:
 _postForm:
  replyPlaceholder: "Répondre à cette note ..."
  quotePlaceholder: "Citez cette note ..."
+  channelPlaceholder: "Publier vers le canal"
  _placeholders:
    a: "Quoi de neuf ?"
    b: "Quoi de neuf ?"
@@ -1165,11 +1214,15 @@ _notification:
  yourFollowRequestAccepted: "Votre demande d’abonnement a été accepté"
  youWereInvitedToGroup: "Invité au groupe"
  _types:
+    all: "Toutes"
    follow: "Abonnements"
    mention: "Mentionner"
+    reply: "Réponses"
    renote: "Renote"
    quote: "Citer"
    reaction: "Réactions"
+    groupInvited: "Invité aux groupes"
+    app: "Notifications provenant des apps"
 _deck:
  alwaysShowMainColumn: "Toujours afficher la colonne principale"
  columnAlign: "Aligner les colonnes"
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -16,6 +16,9 @@ noNotes: "ノートはありません"
 noNotifications: "通知はありません"
 instance: "インスタンス"
 settings: "設定"
+basicSettings: "基本設定"
+otherSettings: "その他の設定"
+openInWindow: "ウィンドウで開く"
 profile: "プロフィール"
 timeline: "タイムライン"
 noAccountDescription: "自己紹介はありません"
@@ -40,6 +43,7 @@ deleteAndEditConfirm: "このノートを削除してもう一度編集します
 addToList: "リストに追加"
 sendMessage: "メッセージを送信"
 copyUsername: "ユーザー名をコピー"
+searchUser: "ユーザーを検索"
 reply: "返信"
 loadMore: "もっと見る"
 youGotNewFollower: "フォローされました"
@@ -66,8 +70,11 @@ followers: "フォロワー"
 followsYou: "フォローされています"
 createList: "リスト作成"
 manageLists: "リストの管理"
-error: "問題が発生しました"
+error: "エラー"
+somethingHappened: "問題が発生しました"
 retry: "再試行"
+pageLoadError: "ページの読み込みに失敗しました。"
+pageLoadErrorDescription: "これは通常、ネットワークまたはブラウザキャッシュが原因です。キャッシュをクリアするか、しばらく待ってから再度試してください。"
 enterListName: "リスト名を入力"
 privacy: "プライバシー"
 makeFollowManuallyApprove: "フォローを承認制にする"
@@ -106,6 +113,8 @@ unsuspendConfirm: "解凍しますか？"
 selectList: "リストを選択"
 selectAntenna: "アンテナを選択"
 selectWidget: "ウィジェットを選択"
+editWidgets: "ウィジェットを編集"
+editWidgetsExit: "編集を終了"
 customEmojis: "カスタム絵文字"
 emoji: "絵文字"
 emojiName: "絵文字名"
@@ -177,7 +186,6 @@ processing: "処理中"
 preview: "プレビュー"
 default: "デフォルト"
 noCustomEmojis: "絵文字はありません"
-customEmojisOfRemote: "リモートの絵文字"
 noJobs: "ジョブはありません"
 federating: "連合中"
 blocked: "ブロック中"
@@ -404,6 +412,7 @@ noMessagesYet: "まだチャットはありません"
 newMessageExists: "新しいメッセージがあります"
 onlyOneFileCanBeAttached: "メッセージに添付できるファイルはひとつです"
 signinRequired: "ログインしてください"
+invitations: "招待"
 invitationCode: "招待コード"
 checking: "確認しています"
 available: "利用できます"
@@ -445,7 +454,7 @@ total: "合計"
 weekOverWeekChanges: "前週比"
 dayOverDayChanges: "前日比"
 appearance: "アピアランス"
-clinetSettings: "クライアント設定"
+clientSettings: "クライアント設定"
 accountSettings: "アカウント設定"
 promotion: "プロモーション"
 promote: "プロモート"
@@ -476,6 +485,8 @@ newNoteRecived: "新しいノートがあります"
 sounds: "サウンド"
 listen: "聴く"
 none: "なし"
+showInPage: "ページで表示"
+popout: "ポップアウト"
 volume: "音量"
 details: "詳細"
 chooseEmoji: "絵文字を選択"
@@ -518,7 +529,6 @@ enableInfiniteScroll: "自動でもっと見る"
 visibility: "公開範囲"
 poll: "アンケート"
 useCw: "内容を隠す"
-fixedWidgetsPosition: "ウィジェットの位置を固定する"
 enablePlayer: "プレイヤーを開く"
 disablePlayer: "プレイヤーを閉じる"
 expandTweet: "ツイートを展開する"
@@ -566,6 +576,73 @@ delayed: "遅延"
 database: "データベース"
 channel: "チャンネル"
 create: "作成"
+notificationSetting: "通知設定"
+notificationSettingDesc: "表示する通知の種別を選択してください。"
+useGlobalSetting: "グローバル設定を使う"
+useGlobalSettingDesc: "オンにすると、アカウントの通知設定が使用されます。オフにすると、個別に設定できるようになります。"
+other: "その他"
+regenerateLoginToken: "ログイントークンを再生成"
+regenerateLoginTokenDescription: "ログインに使用される内部トークンを再生成します。通常この操作を行う必要はありません。再生成すると、全てのデバイスでログアウトされます。"
+setMultipleBySeparatingWithSpace: "スペースで区切って複数設定できます。"
+fileIdOrUrl: "ファイルIDまたはURL"
+chatOpenBehavior: "チャットを開くときの動作"
+sample: "サンプル"
+abuseReports: "通報"
+reportAbuse: "通報"
+reportAbuseOf: "{name}を通報する"
+fillAbuseReportDescription: "通報理由の詳細を記入してください。対象のノートがある場合はそのURLも記入してください。"
+abuseReported: "内容が送信されました。ご報告ありがとうございました。"
+send: "送信"
+abuseMarkAsResolved: "対応済みにする"
+openInNewTab: "新しいタブで開く"
+openInSideView: "サイドビューで開く"
+defaultNavigationBehaviour: "デフォルトのナビゲーション"
+editTheseSettingsMayBreakAccount: "これらの設定を編集するとアカウントが破損する可能性があります。"
+instanceTicker: "ノートのインスタンス情報"
+waitingFor: "{x}を待っています"
+random: "ランダム"
+system: "システム"
+switchUi: "UI切り替え"
+desktop: "デスクトップ"
+
+_reversi:
+  reversi: "リバーシ"
+  gameSettings: "対局の設定"
+  chooseBoard: "ボードを選択"
+  blackOrWhite: "先行/後攻"
+  blackIs: "{name}が黒(先行)"
+  rules: "ルール"
+  botSettings: "Botのオプション"
+  thisGameIsStartedSoon: "対局は数秒後に開始されます"
+  waitingForOther: "相手の準備が完了するのを待っています"
+  waitingForMe: "あなたの準備が完了するのを待っています"
+  waitingBoth: "準備してください"
+  ready: "準備完了"
+  cancelReady: "準備を再開"
+  opponentTurn: "相手のターンです"
+  myTurn: "あなたのターンです"
+  turnOf: "{name}のターンです"
+  pastTurnOf: "{name}のターン"
+  surrender: "投了"
+  surrendered: "投了により"
+  drawn: "引き分け"
+  won: "{name}の勝ち"
+  black: "黒"
+  white: "白"
+  total: "合計"
+  turnCount: "{count}ターン目"
+  myGames: "自分の対局"
+  allGames: "みんなの対局"
+  ended: "終了"
+  playing: "対局中"
+  isLlotheo: "石の少ない方が勝ち(ロセオ)"
+  loopedMap: "ループマップ"
+  canPutEverywhere: "どこでも置けるモード"
+
+_instanceTicker:
+  none: "表示しない"
+  remote: "リモートユーザーに表示"
+  always: "常に表示"

 _serverDisconnectedBehavior:
  reload: "自動でリロード"
@@ -798,6 +875,7 @@ _widgets:
  photos: "フォト"
  digitalClock: "デジタル時計"
  federation: "連合"
+  postForm: "投稿フォーム"

 _cw:
  hide: "隠す"
@@ -1285,8 +1363,11 @@ _notification:
    renote: "Renote"
    quote: "引用"
    reaction: "リアクション"
-    pollVote: "投票"
-    receiveFollowRequest: "フォローリクエスト"
+    pollVote: "アンケートに投票された"
+    receiveFollowRequest: "フォロー申請を受け取った"
+    followRequestAccepted: "フォローが受理された"
+    groupInvited: "グループに招待された"
+    app: "連携アプリからの通知"

 _deck:
  alwaysShowMainColumn: "常にメインカラムを表示"
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@@ -1,12 +1,12 @@
 ---
 _lang_: "日本語 (関西弁)"
-introMisskey: "ようこそ！Misskeyは、オープンソースの分散型マイクロブログサービスやねん。\n「ノート」を作成しぃ、いま起こっとることを共有したり、あんたについて皆に発信しよう📡\n「リアクション」機能で、皆のノートに素はよ反応を追加することもできます✌\n新しい世界を探検しよう🚀"
+introMisskey: "ようこそ！Misskeyってのは、オープンソースの分散型マイクロブログサービスやねん。\n「ノート」を作成し、いま起こっとることを共有したり、あんたんこととか皆に伝えていこう📡\n「リアクション」機能で、皆のノートに素はよ反応を追加することもできるんやで✌\n新しい世界を探検してみらん？🚀"
 monthAndDay: "{month}月 {day}日"
 search: "探す"
 notifications: "通知"
 username: "ユーザー名"
 password: "パスワード"
-fetchingAsApObject: "連合に照会中"
+fetchingAsApObject: "今ちと連合に照会しとるで"
 ok: "おっけー"
 gotIt: "ほい"
 cancel: "やめとくわ"
@@ -16,35 +16,40 @@ noNotes: "ノートはあらへん"
 noNotifications: "通知はあらへん"
 instance: "インスタンス"
 settings: "設定"
+basicSettings: "基本設定"
+otherSettings: "その他の設定"
+openInWindow: "ウィンドウで開いてや"
 profile: "プロフィール"
 timeline: "タイムライン"
 noAccountDescription: "自己紹介はあらへん"
 login: "ログイン"
-loggingIn: "ログインしとります"
+loggingIn: "ログインしよるで"
 logout: "ログアウト"
 signup: "新規登録"
-uploading: "アップロードしとります"
-save: "保存"
+uploading: "アップロードしよるで"
+save: "とっとく"
 users: "ユーザー"
-addUser: "ユーザー増やす"
+addUser: "ユーザーを追加や"
 favorite: "お気に入り"
 favorites: "お気に入り"
-unfavorite: "お気に入りやめる"
-pin: "ピン留め"
-unpin: "ピン留めやめる"
+unfavorite: "やっぱ気に入らん"
+pin: "ピン留めしとく"
+unpin: "やっぱピン留めせん"
 copyContent: "内容をコピー"
 copyLink: "リンクをコピー"
 delete: "ほかす"
 deleteAndEdit: "ほかして直す"
-deleteAndEditConfirm: "このノートをほかしてもっかい直す？このノートへのリアクション、Remote、返信も全部消えんで"
+deleteAndEditConfirm: "このノートをほかしてもっかい直す？このノートへのリアクション、Renote、返信も全部消えるんやけどそれでもええん？"
 addToList: "リストに入れたる"
 sendMessage: "メッセージを送る"
 copyUsername: "ユーザー名をコピー"
+searchUser: "ユーザーを検索"
 reply: "返す"
 loadMore: "もっとあるやろ！"
 youGotNewFollower: "フォローされたで"
 receiveFollowRequest: "フォローリクエストされたで"
 followRequestAccepted: "フォローが承認されたで"
+mention: "メンション"
 mentions: "あんた宛て"
 directNotes: "ダイレクト投稿"
 importAndExport: "インポートとエクスポート"
@@ -57,7 +62,7 @@ unfollowConfirm: "{name}のフォローを解除してもええんか？"
 exportRequested: "エクスポートしてな、ってリクエストしたけど、これ多分めっちゃ時間かかるで。エクスポート終わったら「ドライブ」に突っ込んどくで。"
 importRequested: "インポートしてな、ってリクエストしたけど、これ多分めっちゃ時間かかるで。"
 lists: "リスト"
-noLists: "リストはあらへん"
+noLists: "リストなんてあらへんで"
 note: "ノート"
 notes: "ノート"
 following: "フォロー"
@@ -65,32 +70,35 @@ followers: "フォロワー"
 followsYou: "フォローされとるで"
 createList: "リスト作る"
 manageLists: "リストの管理"
-error: "問題が発生してん"
-retry: "もっぺんやってみる"
+error: "エラー"
+somethingHappened: "なんかアカンことが起こったで"
+retry: "もっぺんやる？"
+pageLoadError: "ページの読み込みに失敗してしもうたで…"
+pageLoadErrorDescription: "これは普通、ネットワークかブラウザキャッシュが原因やからね。キャッシュをクリアするか、もうちっとだけ待ってくれへんか？"
 enterListName: "リスト名を入れてや"
-privacy: "プライバシーってなんや？オカンの年齢か？"
-makeFollowManuallyApprove: "他人のフォローは許可してからや！"
+privacy: "プライバシーってなんぞや？"
+makeFollowManuallyApprove: "他人からのフォローは自分が決める"
 defaultNoteVisibility: "もとからの公開範囲"
 follow: "フォロー"
-followRequest: "フォロー許してくれや！言うてみる"
-followRequests: "フォロー許してくれや！"
+followRequest: "フォローを頼む"
+followRequests: "フォローを頼む"
 unfollow: "フォローやめる"
 followRequestPending: "フォロー許してくれるん待っとる"
 enterEmoji: "絵文字を入れてや"
 renote: "Renote"
 unrenote: "Renoteやめる"
 quote: "引用"
-pinnedNote: "ピン留めされたノート"
+pinnedNote: "ピン留めされとるノート"
 you: "あんた"
-clickToShow: "押してみ、見せたるわ"
-sensitive: "見たらあかんで"
+clickToShow: "押したら見えるようになるで"
+sensitive: "ちょっとアカンやつやで"
 add: "増やす"
 reaction: "リアクション"
 reactionSettingDescription: "リアクションピッカーに出しとくリアクションを選んでや。"
 rememberNoteVisibility: "公開範囲覚えといて"
-attachCancel: "くっつけるのやめよか"
-markAsSensitive: "ちょっと見せられへんわ"
-unmarkAsSensitive: "別にええんじゃね？"
+attachCancel: "やっぱ添付やめてくれん？"
+markAsSensitive: "ちょっとこれはアカン"
+unmarkAsSensitive: "そこまでアカンことないやろ"
 enterFileName: "ファイル名を入れてや"
 mute: "ミュート"
 unmute: "ミュートやめたる"
@@ -98,30 +106,35 @@ block: "ブロック"
 unblock: "ブロックやめたる"
 suspend: "凍結"
 unsuspend: "溶かす"
-blockConfirm: "ブロックしてしもうてええか？"
-unblockConfirm: "ブロックすんのやめるけどええか？"
+blockConfirm: "ブロックしてもええんか？"
+unblockConfirm: "ブロックやめたるってほんまか？"
 suspendConfirm: "凍結してしもうてええか？"
 unsuspendConfirm: "解凍するけどええか？"
 selectList: "リストを選ぶ"
+selectAntenna: "アンテナを選ぶ"
+selectWidget: "ウィジェットを選ぶ"
+editWidgets: "ウィジェットをいじる"
+editWidgetsExit: "編集終ったで"
 customEmojis: "カスタム絵文字"
+emoji: "絵文字"
 emojiName: "絵文字名"
 emojiUrl: "絵文字画像URL"
 addEmoji: "絵文字を追加"
 settingGuide: "ええ感じの設定"
 cacheRemoteFiles: "リモートのファイルをキャッシュする"
-cacheRemoteFilesDescription: "この設定をチャラにすると、リモートファイルをキャッシュせず直リンクするようになります。サーバーのストレージを節約できますが、サムネイルが生成されへんので通信量が増加します。"
-flagAsBot: "Botやでと言っとく"
-flagAsCat: "Catやでと言っとく"
-autoAcceptFollowed: "フォローしとるユーザーからのフォロリクは全部勝手にええでって言うで"
+cacheRemoteFilesDescription: "この設定を切っとくと、リモートファイルをキャッシュせず直リンクするようになってしまうんやで？　サーバーのストレージは節約できるんやけど、かわりにサムネイルが作られんくなるから通信量が増えるで？"
+flagAsBot: "Botやで"
+flagAsCat: "Catやで"
+autoAcceptFollowed: "フォローしとるユーザーからのフォローリクエストには勝手に許可しとくで。"
 addAcount: "アカウント追加"
-loginFailed: "ログインに失敗してん"
+loginFailed: "ログインに失敗してしもうた…"
 showOnRemote: "リモートで見る"
 general: "全般"
 wallpaper: "壁紙"
 setWallpaper: "壁紙を設定"
-removeWallpaper: "壁紙ほかす"
+removeWallpaper: "壁紙を削除"
 searchWith: "検索: {q}"
-youHaveNoLists: "リストはあらへん"
+youHaveNoLists: "リストがあらへんで？"
 followConfirm: "{name}をフォローしてええか？"
 proxyAccount: "プロキシアカウント"
 proxyAccountDescription: "プロキシアカウントは、代わりにフォローしてくれるアカウントや。例えば、551に豚まんが無いときやったり、ユーザーがリモートユーザーをアカウントに入れたとき、リストに入れられたユーザーが誰からもフォローされてないと寂しいやん。寂しいし、アクティビティも配達されへんから、プロキシアカウントがフォローしてくれるで。ええやつやん…"
@@ -131,7 +144,7 @@ recipient: "宛先"
 annotation: "注釈"
 federation: "連合"
 instances: "インスタンス"
-registeredAt: "一見さんになった日"
+registeredAt: "初観測"
 latestRequestSentAt: "ちょっと前のリクエスト送信"
 latestRequestReceivedAt: "ちょっと前のリクエスト受信"
 latestStatus: "ちょっと前のステータス"
@@ -173,7 +186,6 @@ processing: "処理しとる"
 preview: "プレビュー"
 default: "デフォルト"
 noCustomEmojis: "絵文字はあらへん"
-customEmojisOfRemote: "リモートの絵文字"
 noJobs: "ジョブはあらへん"
 federating: "連合しとる"
 blocked: "ブロックしとる"
@@ -259,7 +271,8 @@ copyUrl: "URLをコピー"
 rename: "名前を変えるで"
 avatar: "アイコン"
 banner: "バナー"
-nsfw: "見たらあかんで"
+nsfw: "ちょっとアカンやつやで"
+whenServerDisconnected: "サーバーとの接続が失くなってしもうたとき"
 disconnectedFromServer: "サーバーが機嫌悪いねん"
 reload: "リロード"
 doNothing: "何もせんとく"
@@ -295,7 +308,19 @@ proxyRemoteFilesDescription: "この設定を入れると、保存しとらん
 driveCapacityPerLocalAccount: "ローカルユーザーひとりあたりのドライブ容量"
 driveCapacityPerRemoteAccount: "リモートユーザーひとりあたりのドライブ容量"
 inMb: "メガバイト単位"
+iconUrl: "アイコン画像のURL"
+bannerUrl: "バナー画像のURL"
+basicInfo: "基本情報"
+pinnedUsers: "ピン留めしたユーザー"
+pinnedUsersDescription: "「みつける」ページとかにピン留めしたいユーザーをここに書けばええんやで。他ん人との名前は改行で区切ればええんやで。"
+hcaptcha: "hCaptcha（キャプチャ）"
+enableHcaptcha: "hCaptcha（キャプチャ）をつけとく"
+hcaptchaSiteKey: "サイトキー"
+hcaptchaSecretKey: "シークレットキー"
 recaptcha: "reCAPTCHA"
+enableRecaptcha: "reCAPTCHA（リキャプチャ）を有効にする"
+recaptchaSiteKey: "サイトキー"
+recaptchaSecretKey: "シークレットキー"
 avoidMultiCaptchaConfirm: "ぎょうさんのCaptchaをつこてしまうと、仲良うせんことがあるんや。他のCaptchaをなおしとこか？別にキャンセルしてもろうたらCaptchaは消されへんで済むけど知らんで。"
 antennas: "アンテナ"
 manageAntennas: "アンテナいじる"
@@ -348,10 +373,47 @@ unregister: "登録やめる"
 passwordLessLogin: "パスワード無くてもログインできるようにする"
 resetPassword: "パスワードをリセット"
 newPasswordIs: "今度のパスワードは「{password}」や"
+autoNoteWatch: "ノートを勝手に見張っとく"
+autoNoteWatchDescription: "あんたがリアクションや返信した他のユーザーのノートの通知をあんたも受け取れるようになるんやで。通知欄の流れがめっちゃ早くなるで。"
+reduceUiAnimation: "UIの動きやアニメーションを減らしてくれや。"
+share: "わけわけ"
+notFound: "見つからへんね"
 notFoundDescription: "指定されたURLに該当するページはあらへんやった。"
+uploadFolder: "とりあえずここへアップロード"
+cacheClear: "キャッシュをほかす"
+markAsReadAllNotifications: "通知はもう全て読んだわっ"
+markAsReadAllUnreadNotes: "投稿は全て読んだわっ"
+markAsReadAllTalkMessages: "チャットはもうぜんぶ読んだわっ"
+help: "ヘルプ"
+inputMessageHere: "ここにメッセージ書いてや"
 close: "さいなら"
+group: "グループ"
+groups: "グループ"
+createGroup: "グループを作るで"
+ownedGroups: "所有しとるグループ"
 joinedGroups: "参加しとるグループ"
 invites: "来てや"
+groupName: "グループ名"
+members: "メンバー"
+transfer: "譲渡"
+messagingWithUser: "ユーザーとチャット"
+messagingWithGroup: "グループでチャット"
+title: "タイトル"
+text: "テキスト"
+enable: "有効にするで"
+next: "次"
+retype: "もっかい入力"
+noteOf: "{user}のノート"
+inviteToGroup: "グループに招く"
+maxNoteTextLength: "ノートの文字数制限"
+quoteAttached: "引用付いとるで"
+quoteQuestion: "引用として添付してもええか？"
+noMessagesYet: "まだチャットはあらへんで"
+newMessageExists: "新しいメッセージがきたで"
+onlyOneFileCanBeAttached: "すまん、メッセージに添付できるファイルはひとつだけなんや。"
+invitations: "来てや"
+invitationCode: "招待コード"
+checking: "確認しとるで"
 smtpHost: "ホスト"
 smtpUser: "ユーザー名"
 smtpPass: "パスワード"
@@ -359,6 +421,7 @@ _sidebar:
  icon: "アイコン"
 _theme:
  keys:
+    mention: "メンション"
    renote: "Renote"
 _sfx:
  note: "ノート"
@@ -442,6 +505,7 @@ _notification:
  youWereFollowed: "フォローされたで"
  _types:
    follow: "フォロー"
+    mention: "メンション"
    renote: "Renote"
    quote: "引用"
    reaction: "リアクション"
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -66,7 +66,6 @@ followers: "팔로워"
 followsYou: "당신을 팔로우합니다"
 createList: "리스트 만들기"
 manageLists: "리스트 관리"
-error: "오류가 발생했습니다"
 retry: "다시 시도"
 enterListName: "리스트 이름을 입력"
 privacy: "프라이버시"
@@ -177,7 +176,6 @@ processing: "처리중"
 preview: "미리보기"
 default: "기본값"
 noCustomEmojis: "이모지가 없습니다"
-customEmojisOfRemote: "다른 인스턴스들의 이모지"
 noJobs: "작업이 없습니다"
 federating: "연합 중"
 blocked: "차단됨"
@@ -403,6 +401,7 @@ noMessagesYet: "아직 대화가 없습니다"
 newMessageExists: "새 메시지가 있습니다"
 onlyOneFileCanBeAttached: "메시지에 첨부할 수 있는 파일은 하나까지입니다"
 signinRequired: "로그인 해주세요"
+invitations: "초대"
 invitationCode: "초대 코드"
 checking: "확인하는 중입니다"
 available: "사용 가능합니다"
@@ -443,7 +442,6 @@ remote: "리모트"
 total: "합계"
 weekOverWeekChanges: "지난주보다"
 dayOverDayChanges: "어제보다"
-clinetSettings: "클라이언트 설정"
 accountSettings: "계정 설정"
 promotion: "프로모션"
 promote: "프로모션하기"
@@ -515,7 +513,6 @@ enableInfiniteScroll: "자동으로 좀 더 보기"
 visibility: "공개 범위"
 poll: "투표"
 useCw: "내용 숨기기"
-fixedWidgetsPosition: "위젯의 위치 고정"
 enablePlayer: "플레이어 열기"
 disablePlayer: "플레이어 닫기"
 expandTweet: "트윗 확장하기"
@@ -551,13 +548,24 @@ makeActive: "활성화"
 copy: "복사"
 logs: "로그"
 database: "데이터베이스"
+channel: "채널"
+random: "랜덤"
+_reversi:
+  total: "합계"
 _channel:
+  create: "채널 생성"
+  setBanner: "배너 설정"
+  removeBanner: "배너 삭제"
  featured: "트렌드"
+  following: "팔로잉"
+  usersCount: "{n}명 참여 중"
+  notesCount: "{n}노트"
 _sidebar:
  icon: "아바타"
  hide: "숨기기"
 _wordMute:
  muteWords: "뮤트할 단어"
+  mutedNotes: "뮤트된 노트"
 _theme:
  explore: "테마 찾아보기"
  install: "테마 설치"
@@ -578,6 +586,7 @@ _theme:
  func: "함수"
  funcKind: "함수 종류"
  argument: "매개변수"
+  importInfo: "여기에 테마 코드를 붙여 넣어 에디터로 불러올 수 있습니다."
  keys:
    link: "링크"
    hashtag: "해시태그"
@@ -699,6 +708,7 @@ _widgets:
  photos: "사진"
  digitalClock: "디지털 시계"
  federation: "연합"
+  postForm: "글 입력란"
 _cw:
  hide: "숨기기"
  show: "더 보기"
@@ -1156,7 +1166,6 @@ _notification:
    renote: "Renote"
    quote: "인용"
    reaction: "리액션"
-    receiveFollowRequest: "팔로우 요청"
 _deck:
  alwaysShowMainColumn: "메인 칼럼 항상 표시"
  columnAlign: "칼럼 정렬"
--- a/locales/pl-PL.yml
+++ b/locales/pl-PL.yml
@@ -1,2 +1,21 @@
 ---
 _lang_: "język polski"
+search: "Szukaj"
+notifications: "Powiadomienia"
+username: "Nazwa użytkownika"
+password: "Hasło"
+ok: "OK"
+gotIt: "Rozumiem!"
+cancel: "Anuluj"
+enterUsername: "Wprowadź nazwę użytkownika"
+smtpUser: "Nazwa użytkownika"
+smtpPass: "Hasło"
+_sfx:
+  notification: "Powiadomienia"
+_widgets:
+  notifications: "Powiadomienia"
+_profile:
+  username: "Nazwa użytkownika"
+_deck:
+  _columns:
+    notifications: "Powiadomienia"
--- a/locales/ru-RU.yml
+++ b/locales/ru-RU.yml
--- a/locales/uk-UA.yml
+++ b/locales/uk-UA.yml
@@ -0,0 +1,163 @@
+---
+_lang_: "Українська"
+monthAndDay: "{month}/{day}"
+search: "Пошук"
+notifications: "Сповіщення"
+username: "Ім'я користувача"
+password: "Пароль"
+ok: "OK"
+gotIt: "Зрозуміло!"
+cancel: "Скасувати"
+enterUsername: "Введіть ім'я користувача"
+renotedBy: "Поширено {user}"
+noNotes: "Немає дописів"
+noNotifications: "Немає сповіщень"
+instance: "Інстанс"
+settings: "Налаштування"
+basicSettings: "Основні налаштування"
+otherSettings: "Інші налаштування"
+openInWindow: "Відкрити у вікні"
+profile: "Профіль"
+timeline: "Стрічка"
+noAccountDescription: "Цей користувач ще нічого не написав про себе"
+login: "Увійти"
+loggingIn: "Здійснюємо вхід..."
+logout: "Вийти"
+signup: "Реєстрація"
+uploading: "Завантаження..."
+save: "Зберегти"
+users: "Користувачі"
+addUser: "Додати користувача"
+favorite: "Обране"
+favorites: "Обране"
+unfavorite: "Видалити з обраного"
+pin: "Закріпити"
+unpin: "Відкріпити"
+copyContent: "Скопіювати контент"
+copyLink: "Скопіювати посилання"
+delete: "Видалити"
+deleteAndEdit: "Видалити й редагувати"
+addToList: "Додати до списку"
+sendMessage: "Надіслати повідомлення"
+copyUsername: "Скопіювати ім’я користувача"
+searchUser: "Пошук користувачів"
+reply: "Відповісти"
+loadMore: "Показати більше"
+receiveFollowRequest: "Отримано запит на підписку"
+followRequestAccepted: "Запит на підписку прийнято"
+mention: "Згадка"
+mentions: "Згадки"
+directNotes: "Прямі повідомлення"
+importAndExport: "Імпорт та експорт"
+import: "Імпорт"
+export: "Експорт"
+files: "Файли"
+download: "Завантажити"
+lists: "Списки"
+noLists: "Немає списків"
+note: "Дописи"
+notes: "Дописи"
+following: "Підписки"
+followers: "Підписники"
+followsYou: "Підписаний(-а) на вас"
+createList: "Створити список"
+manageLists: "Управління списками"
+error: "Помилка"
+somethingHappened: "Щось пішло не так"
+retry: "Спробувати знову"
+pageLoadError: "Помилка при завантаженні сторінки"
+enterListName: "Введіть назву списку"
+privacy: "Приватність"
+makeFollowManuallyApprove: "Підтверджувати підписників уручну"
+defaultNoteVisibility: "Видимість допису за замовчуванням"
+follow: "Підписка"
+unfollow: "Відписатися"
+renote: "Поширити"
+unrenote: "Відміна поширення"
+quote: "Цитата"
+pinnedNote: "Закріплений допис"
+you: "Ви"
+clickToShow: "Натисніть для перегляду"
+sensitive: "NSFW"
+add: "Додати"
+reaction: "Реакції"
+markAsSensitive: "Відмітити як NSFW"
+enterFileName: "Введіть ім'я файлу"
+mute: "Ігнорувати"
+unmute: "Показувати"
+block: "Заблокувати"
+unblock: "Розблокувати"
+suspend: "Призупинити"
+unsuspend: "Відновити"
+blockConfirm: "Ви впевнені, що хочете заблокувати цей акаунт?"
+unblockConfirm: "Ви впевнені, що хочете розблокувати цей акаунт?"
+selectList: "Виберіть список"
+selectAntenna: "Виберіть антену"
+selectWidget: "Виберіть віджет"
+editWidgets: "Редагувати віджети"
+editWidgetsExit: "Готово"
+customEmojis: "Кастомні емоджі"
+emoji: "Емоджі"
+emojiName: "Назва емоджі"
+instances: "Інстанс"
+remove: "Видалити"
+nsfw: "NSFW"
+userList: "Списки"
+smtpUser: "Ім'я користувача"
+smtpPass: "Пароль"
+_theme:
+  keys:
+    mention: "Згадка"
+    renote: "Поширити"
+_sfx:
+  note: "Дописи"
+  notification: "Сповіщення"
+_widgets:
+  notifications: "Сповіщення"
+  timeline: "Стрічка"
+_cw:
+  show: "Показати більше"
+_visibility:
+  followers: "Підписники"
+_postForm:
+  replyPlaceholder: "Відповідь на допис..."
+_profile:
+  username: "Ім'я користувача"
+_exportOrImport:
+  followingList: "Підписки"
+  muteList: "Ігнорувати"
+  blockingList: "Заблокувати"
+  userLists: "Списки"
+_pages:
+  script:
+    categories:
+      list: "Списки"
+    blocks:
+      _join:
+        arg1: "Списки"
+      _randomPick:
+        arg1: "Списки"
+      _dailyRandomPick:
+        arg1: "Списки"
+      _seedRandomPick:
+        arg2: "Списки"
+      _pick:
+        arg1: "Списки"
+      _listLen:
+        arg1: "Списки"
+    types:
+      array: "Списки"
+_notification:
+  youRenoted: "{name} поширив(ла) ваш допис"
+  _types:
+    follow: "Підписки"
+    mention: "Згадка"
+    renote: "Поширити"
+    quote: "Цитата"
+    reaction: "Реакції"
+_deck:
+  _columns:
+    notifications: "Сповіщення"
+    tl: "Стрічка"
+    list: "Списки"
+    mentions: "Згадки"
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@@ -16,6 +16,9 @@ noNotes: "没有帖文"
 noNotifications: "无通知"
 instance: "实例"
 settings: "设置"
+basicSettings: "基本设置"
+otherSettings: "其他设置"
+openInWindow: "在新窗口中打开"
 profile: "个人资料"
 timeline: "时间线"
 noAccountDescription: "这个人很懒，没有写自我介绍"
@@ -40,6 +43,7 @@ deleteAndEditConfirm: "要删除此帖并再次编辑吗？对此帖的所有回
 addToList: "添加至列表"
 sendMessage: "发送"
 copyUsername: "复制用户名"
+searchUser: "搜索用户"
 reply: "回复"
 loadMore: "查看更多"
 youGotNewFollower: "你有新的关注者"
@@ -66,8 +70,11 @@ followers: "关注者"
 followsYou: "关注了你"
 createList: "创建列表"
 manageLists: "管理列表"
-error: "有点小问题"
+error: "错误"
+somethingHappened: "出现了问题"
 retry: "重试"
+pageLoadError: "页面加载失败。"
+pageLoadErrorDescription: "这通常是由于网络或浏览器缓存的原因。请清除缓存或等待片刻后重试。"
 enterListName: "输入列表名称"
 privacy: "隐私"
 makeFollowManuallyApprove: "关注者请求需要批准"
@@ -106,6 +113,8 @@ unsuspendConfirm: "要解除冻结吗？"
 selectList: "选择列表"
 selectAntenna: "天线选择"
 selectWidget: "选择小工具"
+editWidgets: "编辑小工具"
+editWidgetsExit: "完成编辑"
 customEmojis: "自定义Emoji"
 emoji: "表情符号"
 emojiName: "Emoji 名称"
@@ -155,7 +164,7 @@ jobQueue: "作业队列"
 cpuAndMemory: "CPU使用量"
 network: "网络"
 disk: "存储"
-instanceInfo: "实例情报"
+instanceInfo: "实例信息"
 statistics: "统计"
 clearQueue: "清除队列"
 clearQueueConfirmTitle: "确定清除队列？"
@@ -177,7 +186,6 @@ processing: "处理中"
 preview: "预览"
 default: "默认"
 noCustomEmojis: "无自定义Emoji"
-customEmojisOfRemote: "远程Emoji"
 noJobs: "没有任务"
 federating: "联合中"
 blocked: "已拦截"
@@ -286,7 +294,7 @@ dayX: "{day}日"
 monthX: "{month}月"
 yearX: "{year}年"
 pages: "页面"
-integration: "连携"
+integration: "关联"
 connectSerice: "已连接"
 disconnectSerice: "断开连接"
 enableLocalTimeline: "启用本地时间线功能"
@@ -345,7 +353,7 @@ popularTags: "热门标签"
 userList: "列表"
 about: "关于"
 aboutMisskey: "关于 Misskey"
-aboutMisskeyText: "Misskey是由syuilo于2014年开发的开放源代码软件。"
+aboutMisskeyText: "Misskey是由syuilo于2014年开发的开源软件。"
 misskeyMembers: "现在由以下成员进行开发和维护："
 misskeySource: "源代码在这里公开："
 misskeyTranslation: "与我们一同进行Misskey的翻译工作："
@@ -359,7 +367,7 @@ moderator: "版主"
 nUsersMentioned: "{n} 被提到"
 securityKey: "安全密钥"
 securityKeyName: "密钥名称"
-registerSecurityKey: "注册安全密钥"
+registerSecurityKey: "注册硬件安全密钥"
 lastUsed: "最后使用："
 unregister: "删除账户"
 passwordLessLogin: "无密码登录"
@@ -404,6 +412,7 @@ noMessagesYet: "现在没有新的聊天"
 newMessageExists: "新信息"
 onlyOneFileCanBeAttached: "只能添加一个附件"
 signinRequired: "请先登录"
+invitations: "邀请"
 invitationCode: "邀请码"
 checking: "正在确认"
 available: "可用"
@@ -445,7 +454,7 @@ total: "总计"
 weekOverWeekChanges: "与前一周相比"
 dayOverDayChanges: "与前一日相比"
 appearance: "外观"
-clinetSettings: "客户端设置"
+clientSettings: "客户端设置"
 accountSettings: "账户设置"
 promotion: "推广"
 promote: "推广"
@@ -455,13 +464,13 @@ showFeaturedNotesInTimeline: "在时间线上显示热门推荐"
 objectStorage: "对象存储"
 useObjectStorage: "使用对象存储"
 objectStorageBaseUrl: "基本网址"
-objectStorageBaseUrlDesc: "供参考的URL。如果使用CDN或Proxy，则其URL为S3：\"https://<bucket>.s3.amazonaws.com\"、GCS等：\"https://storage-googleapis.proxy.ustclug.org/<bucket>\"。"
+objectStorageBaseUrlDesc: "URL前缀，用于构造URL到对象（媒体）的引用，如果您使用的是CDN或反向代理，请指定其URL，否则请根据您使用的服务指定可公开访问的地址。例如“https://<bucket>.s3.amazonaws.com”用于AWS S3，“https://storage.googleapis.com/<bucket>”用于GCS"
 objectStorageBucket: "存储桶"
 objectStorageBucketDesc: "请指定使用的对象存储服务的存储桶名称。"
 objectStoragePrefix: "前缀"
 objectStoragePrefixDesc: "文件将存储在此前缀的目录下。"
 objectStorageEndpoint: "端点"
-objectStorageEndpointDesc: "S3默认情况下为空，否则请为每个服务指定端点。 指定为“<host>”或“<host>:<port>”。"
+objectStorageEndpointDesc: "如果你希望使用AWS S3请留空。否则请根据你使用的服务来进行设置，指定端点形式为“<host>”或“<host>:<port>”。"
 objectStorageRegion: "可用区"
 objectStorageRegionDesc: "指定一个可用区，例如“xx-east-1”。 如果您的对象存储服务没有可用区概念，请将其留空或填写“us-east-1”。"
 objectStorageUseSSL: "使用SSL"
@@ -476,6 +485,8 @@ newNoteRecived: "有新的帖子"
 sounds: "声音"
 listen: "听"
 none: "空"
+showInPage: "在页面中显示"
+popout: "弹窗"
 volume: "音量"
 details: "详情"
 chooseEmoji: "选择表情符号"
@@ -518,7 +529,6 @@ enableInfiniteScroll: "启用自动滚动页面模式"
 visibility: "可见性"
 poll: "调查问卷"
 useCw: "隐藏内容"
-fixedWidgetsPosition: "固定小工具的位置"
 enablePlayer: "打开播放器"
 disablePlayer: "关闭播放器"
 expandTweet: "展开推文"
@@ -566,8 +576,75 @@ delayed: "延迟"
 database: "数据库"
 channel: "频道"
 create: "创建"
+notificationSetting: "通知设置"
+notificationSettingDesc: "选择要显示的通知类型。"
+useGlobalSetting: "使用全局设置"
+useGlobalSettingDesc: "启用时，将使用帐户通知设置。关闭时，则可以单独设置。"
+other: "其他"
+regenerateLoginToken: "重新生成登录令牌"
+regenerateLoginTokenDescription: "重新生成用于登录的内部令牌。通常您不需要这样做。重新生成后，您将在所有设备上登出。"
+setMultipleBySeparatingWithSpace: "您可以使用空格分隔多个项目。"
+fileIdOrUrl: "文件ID或者URL"
+chatOpenBehavior: "聊天窗口打开时的行为"
+sample: "示例"
+abuseReports: "举报"
+reportAbuse: "举报"
+reportAbuseOf: "举报{name}"
+fillAbuseReportDescription: "请填写举报的详细原因。如果有对方发的帖子，请同时填写URL地址。"
+abuseReported: "内容已发送。感谢您的报告。"
+send: "发送"
+abuseMarkAsResolved: "处理完毕"
+openInNewTab: "在新标签页中打开"
+openInSideView: "在侧边栏中打开"
+defaultNavigationBehaviour: "默认导航"
+editTheseSettingsMayBreakAccount: "编辑这些设置可以会损坏您的账号"
+instanceTicker: "帖子的实例信息"
+waitingFor: "等待{x}"
+random: "随机"
+system: "系统"
+switchUi: "切换界面"
+desktop: "桌面"
+_reversi:
+  reversi: "黑白棋"
+  gameSettings: "对局设置"
+  chooseBoard: "棋盘选择"
+  blackOrWhite: "先手/后手"
+  blackIs: "{name}执黑(先走)"
+  rules: "规则"
+  botSettings: "机器人设置"
+  thisGameIsStartedSoon: "对局在几秒后开始"
+  waitingForOther: "等待对手准备"
+  waitingForMe: "等待您的准备"
+  waitingBoth: "请准备"
+  ready: "准备就绪"
+  cancelReady: "重新准备"
+  opponentTurn: "对手的会合"
+  myTurn: "您的回合"
+  turnOf: "{name}的回合"
+  pastTurnOf: "{name}的回合"
+  surrender: "认输 "
+  surrendered: "对手认输"
+  drawn: "平局"
+  won: "{name}获胜"
+  black: "黑"
+  white: "白"
+  total: "总计"
+  turnCount: "{count}回合"
+  myGames: "我的对局"
+  allGames: "所有对局"
+  ended: "结束"
+  playing: "对局中"
+  isLlotheo: "棋子较少一方获胜(LLoTheO规则)"
+  loopedMap: "循环棋盘"
+  canPutEverywhere: "可以下在任意位置"
+_instanceTicker:
+  none: "不显示"
+  remote: "显示给远程用户"
+  always: "始终显示"
 _serverDisconnectedBehavior:
  reload: "自动重载"
+  dialog: "对话框警告"
+  quiet: "安静警告"
 _channel:
  create: "创建频道"
  edit: "编辑频道"
@@ -650,7 +727,7 @@ _theme:
    cwFg: "CW 按钮文本"
    cwHoverBg: "CW 按钮背景（悬停）"
    toastBg: "吐司提示背景"
-    toastFg: "土司提示文本"
+    toastFg: "吐司提示文本"
    buttonBg: "按钮背景"
    buttonHoverBg: "按钮背景（悬停）"
    inputBorder: "输入框边框"
@@ -706,7 +783,7 @@ _tutorial:
  step6_1: "现在，您将可以在时间线上看到其他用户的帖子。"
  step6_2: "您还可以在其他人的帖子上进行「回应」，以快速做出简单回复。"
  step6_3: "在他人的贴子上按下「+」图标，即可选择想要的表情来进行「回应」。"
-  step7_1: "对Misskey基本操作的简单介绍，到此结束了。 辛苦了！"
+  step7_1: "对Misskey基本操作的简单介绍，就到此结束了。 辛苦了！"
  step7_2: "如果你想了解更多有关Misskey的信息，请参见{help}。"
  step7_3: "接下来，享受Misskey带来的乐趣吧🚀"
 _2fa:
@@ -717,7 +794,7 @@ _2fa:
  step2: "然后，扫描屏幕上显示的二维码。"
  step3: "输入您的应用提供的动态口令以完成设置。"
  step4: "从现在开始，任何登录操作都将要求您提供动态口令。"
-  securityKeyInfo: "您可以设置使用支持FIDO2的硬件安全密钥、指纹或设备上的PIN来保护您的登录过程。"
+  securityKeyInfo: "您可以设置使用支持FIDO2的硬件安全密钥、设备上的指纹或PIN来保护您的登录过程。"
 _permissions:
  "read:account": "查看账户信息"
  "write:account": "更改帐户信息"
@@ -780,6 +857,7 @@ _widgets:
  photos: "照片"
  digitalClock: "数字时钟"
  federation: "联邦宇宙"
+  postForm: "投稿窗口"
 _cw:
  hide: "隐藏"
  show: "查看更多"
@@ -1242,8 +1320,11 @@ _notification:
    renote: "转发"
    quote: "引用"
    reaction: "回应"
-    pollVote: "投票"
-    receiveFollowRequest: "关注请求"
+    pollVote: "问卷调查已投票"
+    receiveFollowRequest: "收到关注请求"
+    followRequestAccepted: "关注请求已接受"
+    groupInvited: "加入群组邀请"
+    app: "关联应用的通知"
 _deck:
  alwaysShowMainColumn: "总是显示主列"
  columnAlign: "列对齐"
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@@ -1,21 +1,24 @@
 ---
-_lang_: "中文（繁體）"
+_lang_: "繁體中文"
 introMisskey: "歡迎！ Misskey是一個開源的去中心化的社群網站。\n通過「貼文」來分享現在發生的事情吧！ 📡\n「反應」功能，可以讓你快速的對大家的「帖子」來表達感情👍\n一起來探索新的世界吧！ 🚀"
 monthAndDay: "{month}月 {day}日"
 search: "搜尋"
 notifications: "通知"
-username: "使用名稱"
+username: "使用者名稱"
 password: "密碼"
 fetchingAsApObject: "從 Fediverse 查詢中..."
-ok: "確定"
+ok: "OK"
 gotIt: "知道了"
 cancel: "取消"
 enterUsername: "輸入使用者名稱"
-renotedBy: "由{user}轉發"
+renotedBy: "{user} 轉發了"
 noNotes: "貼文不可用。"
 noNotifications: "沒有通知"
 instance: "實例"
 settings: "設定"
+basicSettings: "基本設定"
+otherSettings: "其他設定"
+openInWindow: "在新視窗開啟"
 profile: "個人檔案"
 timeline: "時間軸"
 noAccountDescription: "此用戶還沒有自我介紹"
@@ -40,6 +43,7 @@ deleteAndEditConfirm: "要刪除並再次編輯嗎？此貼文的所有反應，
 addToList: "添加至清單"
 sendMessage: "發送訊息"
 copyUsername: "複製用戶名"
+searchUser: "搜尋用戶"
 reply: "回覆"
 loadMore: "瀏覽更多"
 youGotNewFollower: "您有新的追隨者"
@@ -66,8 +70,10 @@ followers: "追隨者"
 followsYou: "追隨你的人"
 createList: "建立清單"
 manageLists: "管理清單"
-error: "發生錯誤"
+error: "錯誤"
+somethingHappened: "發生錯誤"
 retry: "重試"
+pageLoadError: "載入頁面失敗"
 enterListName: "輸入清單名稱"
 privacy: "隱私"
 makeFollowManuallyApprove: "手動審核追隨請求"
@@ -93,8 +99,8 @@ attachCancel: "移除附件"
 markAsSensitive: "標記為敏感內容"
 unmarkAsSensitive: "取消標記為敏感內容"
 enterFileName: "請輸入檔案名稱"
-mute: "消音"
-unmute: "解除消音"
+mute: "靜音"
+unmute: "解除靜音"
 block: "封鎖"
 unblock: "解除封鎖"
 suspend: "凍結"
@@ -106,16 +112,18 @@ unsuspendConfirm: "確定解凍此帳號？"
 selectList: "選擇清單"
 selectAntenna: "選擇天線"
 selectWidget: "選擇小工具"
+editWidgets: "編輯小工具"
+editWidgetsExit: "停止編輯"
 customEmojis: "自訂表情符號"
 emoji: "表情符號"
 emojiName: "表情符號名稱"
 emojiUrl: "表情符號URL"
 addEmoji: "新增表情符號"
 settingGuide: "推薦設定"
-cacheRemoteFiles: "遠程文件緩存"
-cacheRemoteFilesDescription: "如果禁用此設定，遠程文件將會被直接連結而非緩存。禁用將節省服務器上的存儲空間，但會因為沒有生成預覽圖而增加流量。"
-flagAsBot: "此帳戶是Bot"
-flagAsCat: "此帳戶是Cat"
+cacheRemoteFiles: "緩存非遠程檔案"
+cacheRemoteFilesDescription: "禁用此設定會停止遠端檔案的緩存，從而節省儲存空間。但資料會因直接連線從而產生額外連接數據。"
+flagAsBot: "此使用者是機器人"
+flagAsCat: "此使用者是貓"
 autoAcceptFollowed: "自動許可追隨"
 addAcount: "新增帳號"
 loginFailed: "登入失敗"
@@ -163,8 +171,8 @@ clearCachedFiles: "清除快取資料"
 clearCachedFilesConfirm: "確定要清除緩存資料嗎？"
 blockedInstances: "已封鎖的實例"
 blockedInstancesDescription: "請逐行輸入需要封鎖的實例。已封鎖的實例將無法與本實例進行通訊。"
-muteAndBlock: "禁言 / 封鎖"
-mutedUsers: "已禁言用戶"
+muteAndBlock: "靜音/封鎖"
+mutedUsers: "已靜音用戶"
 blockedUsers: "已封鎖用戶"
 noUsers: "無用戶"
 editProfile: "編輯個人檔案"
@@ -176,7 +184,6 @@ processing: "處理中"
 preview: "預覽"
 default: "預設"
 noCustomEmojis: "沒有表情符號"
-customEmojisOfRemote: "來自其他實例的表情符號"
 noJobs: "沒有任務"
 federating: "整合搜索中"
 blocked: "已封鎖"
@@ -220,10 +227,11 @@ messageRead: "已讀"
 noMoreHistory: "沒有更多歷史紀錄"
 startMessaging: "開始傳送訊息"
 nUsersRead: "{n}人已讀"
+agreeTo: "我同意{0}"
 tos: "使用條款"
 start: "開始"
 home: "首頁"
-remoteUserCaution: "由於是遠程用戶，信息不完整。"
+remoteUserCaution: "由於該用戶來自遠端實例，因此資料用戶並未即時更新。"
 activity: "動態"
 images: "圖片"
 birthday: "生日"
@@ -293,7 +301,7 @@ disablingTimelinesInfo: "即使您禁用了時間線功能，管理員和協調
 registration: "註冊"
 enableRegistration: "開啟新用戶註冊"
 invite: "邀請"
-proxyRemoteFiles: "代理遠程檔案"
+proxyRemoteFiles: "遠端代理檔案"
 proxyRemoteFilesDescription: "啟用此設置後，由於超出存儲容量而未保存或刪除的遠程文件將被本地代理，並且將生成預覽圖。這不影響服務器的存儲。"
 driveCapacityPerLocalAccount: "每個本地用戶的雲端容量"
 driveCapacityPerRemoteAccount: "每個非本地用戶的雲端容量"
@@ -316,7 +324,7 @@ antennas: "天線"
 manageAntennas: "管理天線"
 name: "名稱"
 antennaSource: "接收來源"
-antennaKeywords: "包含的關鍵字"
+antennaKeywords: "包含關鍵字"
 antennaExcludeKeywords: "排除關鍵字"
 antennaKeywordsDescription: "用空格分隔指定AND、用換行符分隔指定OR"
 notifyAntenna: "通知我有新的貼文"
@@ -401,6 +409,7 @@ noMessagesYet: "沒有訊息"
 newMessageExists: "有新的訊息"
 onlyOneFileCanBeAttached: "只能添加一個附件"
 signinRequired: "請先登入"
+invitations: "邀請"
 invitationCode: "邀請碼"
 checking: "確認中"
 available: "可用的"
@@ -430,12 +439,36 @@ category: "類別"
 tags: "標籤"
 docSource: "文件來源"
 createAccount: "建立帳戶"
+existingAcount: "現有帳戶"
+regenerate: "再生"
 fontSize: "字體大小"
+openImageInNewTab: "於新分頁中開啟圖片"
+local: "本地"
+remote: "遠端"
 total: "合計"
-clinetSettings: "用戶端設定"
+weekOverWeekChanges: "與上週相比"
+dayOverDayChanges: "與前一日相比"
+appearance: "外觀"
+clientSettings: "用戶端設定"
+accountSettings: "帳號設定"
+promotion: "推廣貼文"
+promote: "推廣"
+numberOfDays: "有效天數"
+hideThisNote: "隱藏此貼文"
+showFeaturedNotesInTimeline: "在時間軸上顯示熱門推薦"
+objectStorageBaseUrl: "Base URL"
+objectStorageBucket: "儲存空間（Bucket）"
+objectStoragePrefix: "前綴"
+objectStorageEndpoint: "訪問網域名稱（Endpoint）"
+objectStorageEndpointDesc: "如要使用AWS S3，請留空。否則請根據伺服器要求以'<host>'或 '<host>:<port>'的形式設定訪問網域名稱（Endpoint）。"
+objectStorageRegion: "地域（Region）"
+objectStorageUseSSL: "使用SSL"
+objectStorageUseProxy: "使用網路代理"
 serverLogs: "伺服器日誌"
 deleteAll: "刪除所有記錄"
+sounds: "音效"
 none: "無"
+showInPage: "在頁面中顯示"
 volume: "音量"
 details: "詳細資訊"
 chooseEmoji: "選擇您的表情符號\n"
@@ -443,14 +476,21 @@ unableToProcess: "操作無法完成"
 recentUsed: "最近使用"
 install: "安裝"
 uninstall: "解除安裝"
+installedApps: "已授權的應用程式"
+nothing: "未發現"
+installedDate: "安裝時間"
 lastUsedDate: "最後上線日期"
 state: "狀態"
+sort: "排序"
 ascendingOrder: "昇冪"
 descendingOrder: "降冪"
 scratchpad: "暫存記憶體"
 output: "輸出"
+script: "腳本"
+updateRemoteUser: "更新非本地用戶資料"
 deleteAllFiles: "刪除所有檔案"
 deleteAllFilesConfirm: "要删除所有檔案吗？"
+removeAllFollowing: "解除所有追隨"
 userSuspended: "該用戶已被凍結"
 userSilenced: "該用戶已被禁言。"
 sidebar: "側邊列"
@@ -468,7 +508,6 @@ enableInfiniteScroll: "啟用自動滾動頁面模式"
 visibility: "公開範圍"
 poll: "投票"
 useCw: "隱藏內容"
-fixedWidgetsPosition: "固定小工具的位置"
 enablePlayer: "打開播放器"
 disablePlayer: "關閉播放器"
 expandTweet: "展開推文"
@@ -488,17 +527,56 @@ tokenRequested: "允許訪問帳號"
 notificationType: "通知形式"
 edit: "編輯"
 useStarForReactionFallback: "以★代替未知的表情符號"
-emailConfig: "電郵服務器設定"
+emailConfig: "電子郵件伺服器設定"
 enableEmail: "啟用發送電郵功能"
 emailConfigInfo: "用於確認電郵地址及密碼重置"
 email: "電郵地址"
-smtpConfig: "SMTP服務器設定"
+smtpConfig: "SMTP伺服器設定"
 smtpHost: "主機"
 smtpPort: "端口"
-smtpUser: "使用名稱"
+smtpUser: "使用者名稱"
 smtpPass: "密碼"
+emptyToDisableSmtpAuth: "留空使用者名稱和密碼以禁用SMTP驗證。"
+testEmail: "郵件測試發送"
+wordMute: "靜音文字"
+display: "檢視"
+copy: "複製"
+metrics: "指標"
+overview: "概覽"
+logs: "日誌"
+delayed: "延遲"
+database: "資料庫"
 channel: "頻道"
 create: "新增"
+notificationSetting: "通知設定"
+other: "其他"
+regenerateLoginTokenDescription: "再生用於登入的內部權杖。一般情況下是不需要這樣做的。一旦再生，所有裝置將會被登出。"
+sample: "範例 "
+abuseReports: "檢舉"
+reportAbuse: "檢舉"
+reportAbuseOf: "檢舉{name}"
+send: "發送"
+openInNewTab: "在新分頁中開啟"
+random: "隨機"
+system: "系統"
+_reversi:
+  reversi: "黑白棋"
+  gameSettings: "對弈設定"
+  chooseBoard: "選擇棋盤"
+  rules: "規則"
+  botSettings: "機器人設定"
+  opponentTurn: "對手回合"
+  myTurn: "你的回合"
+  turnOf: "{name}的回合"
+  pastTurnOf: "{name}的回合"
+  surrender: "認輸"
+  black: "黑"
+  white: "白"
+  total: "合計"
+  ended: "已結束"
+  playing: "正在對弈"
+_instanceTicker:
+  always: "總是顯示"
 _serverDisconnectedBehavior:
  reload: "自動重載"
  dialog: "以對話框警告"
@@ -506,7 +584,7 @@ _serverDisconnectedBehavior:
 _channel:
  create: "建立頻道"
  edit: "編輯頻道"
-  setBanner: "設置封面圖"
+  setBanner: "設定橫幅"
  removeBanner: "移除封面圖"
  featured: "流行"
  owned: "管理中"
@@ -515,12 +593,33 @@ _channel:
  notesCount: "有{n}個帖子"
 _sidebar:
  icon: "頭像"
+  hide: "隱藏"
+_wordMute:
+  muteWords: "加入靜音文字"
+  mutedNotes: "已靜音的貼文"
 _theme:
+  constant: "常數"
+  defaultValue: "預設值"
+  color: "顏色"
  func: "函数"
+  argument: "引數"
+  alpha: "透明度"
+  darken: "暗度"
+  lighten: "亮度"
  keys:
+    bg: "背景"
+    fg: "文本"
+    shadow: "陰影"
+    link: "鏈接"
+    hashtag: "#tag"
    mention: "提及"
+    mentionMe: "提及我"
    renote: "轉發貼文"
    divider: "分割線"
+    infoBg: "資訊背景"
+    infoFg: "資訊內容"
+    infoWarnBg: "警告背景"
+    infoWarnFg: "警告字元"
 _sfx:
  note: "貼文"
  noteMy: "我的貼文"
@@ -557,6 +656,7 @@ _tutorial:
  step4_1: "筆記發出去了嗎？"
  step4_2: "如果你的貼文有顯示在時間軸上，就代表已經發文成功。"
  step5_1: "現在試試看追隨其他人來讓你的時間軸變得更生動吧。"
+  step5_2: "你可以在{featured}上看到受歡迎的貼文，你也可以選擇從列表中追隨你喜歡的人，或者在{explore}上找到熱門使用者。"
  step5_3: "想要追隨其他人，只要點擊他們的頭像並按「追隨」即可。"
  step5_4: "如果使用者的名字旁有鎖頭的圖示，代表他們需要手動核准你的追隨請求。"
  step6_1: "現在你可以在時間軸上看到其他用戶的貼文"
@@ -564,6 +664,8 @@ _tutorial:
  step6_3: "在他人的貼文按下「+」的圖示即可選擇想要的表情符號來進行「反應」。"
  step7_1: "以上為Misskey的基本操作說明，教學在此告一段落。辛苦了。"
  step7_2: "歡迎到{help}來瞭解更多Misskey相關介紹。"
+_2fa:
+  registerDevice: "註冊裝置"
 _permissions:
  "read:blocks": "已封鎖用戶名單"
  "write:blocks": "編輯已封鎖用戶名單"
@@ -572,13 +674,32 @@ _permissions:
  "read:favorites": "瀏覽已收藏"
  "write:favorites": "編輯收藏清單"
  "write:following": "追隨/解除追隨"
+  "read:messaging": "顯示訊息"
+  "write:messaging": "撰寫或刪除私人訊息"
+  "read:mutes": "顯示已靜音列表"
+  "write:mutes": "編輯已靜音列表"
  "write:notes": "撰寫或刪除貼文"
  "read:notifications": "查看通知"
+  "write:notifications": "編輯通知"
  "read:reactions": "查看反應"
  "write:reactions": "編輯反應"
  "write:votes": "投票"
+  "read:pages": "顯示頁面"
+  "write:pages": "編輯頁面"
+  "read:page-likes": "顯示頁面的已喜歡"
+  "write:page-likes": "編輯頁面上喜歡"
+  "read:user-groups": "顯示使用者群組"
+  "write:user-groups": "編輯使用者群組"
  "read:channels": "已查看的頻道"
-  "write:channels": "操作頻道"
+  "write:channels": "編輯頻道"
+_auth:
+  shareAccess: "要授權「“{name}”」存取您的帳戶嗎？"
+_antennaSources:
+  all: "全部貼文"
+  homeTimeline: "來自已追隨使用者的貼文"
+  users: "來自特定使用者的貼文"
+  userList: "來自特定清單中的貼文"
+  userGroup: "來自特定群組的貼文"
 _weekday:
  sunday: "週日"
  monday: "週一"
@@ -588,63 +709,236 @@ _weekday:
  friday: "週五"
  saturday: "週六"
 _widgets:
+  memo: "備忘錄"
  notifications: "通知"
  timeline: "時間軸"
+  calendar: "行事曆"
+  trends: "發燒貼文"
  clock: "時鐘"
  rss: "RSS閱讀器"
  activity: "動態"
  photos: "照片"
+  digitalClock: "電子時鐘"
  federation: "聯邦宇宙"
 _cw:
+  hide: "隱藏"
  show: "瀏覽更多"
+  chars: "{count}字元"
  files: "{count} 個檔案"
 _poll:
+  noOnlyOneChoice: "至少需要兩個選項。"
+  expiration: "期限"
+  infinite: "無期限"
+  at: "結束時間"
+  deadlineDate: "截止日期"
  deadlineTime: "小時"
+  duration: "時長"
+  votesCount: "{n}票"
+  totalVotes: "一共{n}票"
  vote: "投票"
+  showResult: "顯示結果"
  voted: "已投票"
+  closed: "已結束"
+  remainingDays: "{d}天{h}小時後結束"
 _visibility:
+  public: "公開"
  home: "首頁"
  followers: "追隨者"
+  specified: "指定使用者"
+  specifiedDescription: "僅發送至指定使用者"
+  localOnly: "僅限本地"
+  localOnlyDescription: "對遠端使用者隱藏"
 _postForm:
+  replyPlaceholder: "回覆此貼文..."
+  quotePlaceholder: "引用此貼文..."
  channelPlaceholder: "發佈到頻道"
+  _placeholders:
+    a: "今天過得如何?"
+    b: "有什麼新鮮事嗎?"
+    c: "有什麼新鮮想法嗎？"
+    d: "想要發布些什麼嗎？"
+    e: "寫些什麼吧..."
+    f: "期待你發佈的內容..."
 _profile:
  name: "名稱"
-  username: "使用名稱"
+  username: "使用者名稱"
+  description: "關於我"
+  youCanIncludeHashtags: "你也可以在「關於我」中加上 #tag"
+  metadata: "更多資訊"
+  metadataLabel: "標籤"
+  metadataContent: "内容"
 _exportOrImport:
+  allNotes: "全部貼文"
  followingList: "追隨中"
-  muteList: "消音"
+  muteList: "靜音"
  blockingList: "封鎖"
  userLists: "清單"
+_charts:
+  usersIncDec: "使用者増減"
+  usersTotal: "使用者合共"
+  activeUsers: "活躍使用者"
+  notesIncDec: "貼文増減"
+  localNotesIncDec: "本地貼文増減"
+  remoteNotesIncDec: "非本地貼文的數目增减"
+  notesTotal: "貼文合共"
+  filesIncDec: "檔案増減"
+  filesTotal: "累計檔案"
+  storageUsageIncDec: "儲存空間的増減"
+  storageUsageTotal: "已使用的儲存空間合共"
 _instanceCharts:
+  requests: "請求"
+  users: "使用者増減"
+  usersTotal: "總計使用者"
+  notes: "貼文増減"
+  notesTotal: "累計貼文"
+  ff: "追隨/追隨者的増減"
+  ffTotal: "追隨/追隨者累計"
  cacheSize: "增加或減少快取用量"
  cacheSizeTotal: "快取大小總計"
+  files: "檔案數量的増減"
+  filesTotal: "檔案數量總計"
 _timelines:
  home: "首頁"
+  local: "本地"
+  social: "社群"
+  global: "全域"
 _rooms:
+  roomOf: "{user}的房間"
+  addFurniture: "擺放家具"
+  translate: "移動 "
+  rotate: "旋轉"
+  exit: "返回"
+  remove: "移除"
+  clear: "全部移除"
+  clearConfirm: "確定要移除全部家具嗎？"
+  leaveConfirm: "修改未儲存，是否要離開？"
+  chooseImage: "選擇圖像"
+  roomType: "房間種類"
+  carpetColor: "地板顏色"
  _roomType:
    default: "預設"
+    washitsu: "和室"
  _furnitures:
+    milk: "牛奶盒"
+    bed: "床"
+    low-table: "咖啡桌"
+    desk: "書桌"
+    chair: "椅子"
+    chair2: "椅子2"
+    fan: "通風機"
+    pc: "電腦"
+    plant: "觀葉植物"
+    plant2: "觀葉植物2"
+    eraser: "橡皮擦"
+    pencil: "鉛筆"
+    pudding: "布丁"
+    cardboard-box: "紙板箱"
+    cardboard-box2: "紙板箱2"
+    cardboard-box3: "紙板箱3"
+    book: "讀物"
+    book2: "讀物2"
+    piano: "鋼琴"
+    moon: "月亮"
+    corkboard: "木栓板"
+    mousepad: "滑鼠墊"
    monitor: "監視器"
    keyboard: "鍵盤"
+    carpet-stripe: "條紋地毯"
+    bin: "垃圾箱"
+    cup-noodle: "杯面"
+    holo-display: "投影機"
+    energy-drink: "能量飲料"
+    doll-ai: "小藍的人偶公仔"
+    banknote: "大疊鈔票"
 _pages:
+  newPage: "建立頁面"
+  editPage: "編輯頁面"
+  created: "頁面已建立"
+  updated: "頁面已更新"
  deleted: "頁面已被刪除"
+  editThisPage: "編輯此頁面"
+  viewSource: "檢視原始碼"
+  viewPage: "顯示頁面"
  like: "喜歡"
  unlike: "收回喜歡"
+  my: "我的頁面"
+  liked: "已喜歡的頁面"
+  inspector: "面板檢查"
+  variables: "變數"
+  title: "標題"
+  url: "頁面網址"
+  font: "字型"
+  fontSerif: "襯線體"
+  fontSansSerif: "無襯線體"
+  inputBlocks: "輸入"
  blocks:
+    text: "文本"
+    textarea: "文字區域"
+    section: "區段"
    image: "圖片"
+    button: "按鈕"
+    if: "如果"
+    _if:
+      variable: "變數"
+    _post:
+      text: "内容"
+      canvasId: "畫布ID"
+    textInput: "插入文字"
+    _textInput:
+      name: "變數名稱"
+      text: "標題"
+      default: "預設值"
+    textareaInput: "多行文字输入"
    _textareaInput:
      name: "變數名稱"
+      text: "標題"
+      default: "預設值"
    numberInput: "輸入數值"
    _numberInput:
      name: "變數名稱"
-    _canvas:
-      width: "寬度"
-    _counter:
      text: "標題"
+      default: "預設值"
+    canvas: "畫布"
+    _canvas:
+      id: "畫布ID"
+      width: "寬度"
+      height: "高度"
+    switch: "開關"
+    _switch:
+      name: "變數名稱"
+      text: "標題"
+      default: "預設值"
+    counter: "計數器"
+    _counter:
+      name: "變數名稱"
+      text: "標題"
+      inc: "増加値"
    _button:
      text: "標題"
+      colored: "彩色"
+      action: "按下按鈕後發生的行為"
+      _action:
+        _dialog:
+          content: "内容"
+        resetRandom: "重設亂數"
+        pushEvent: "發送事件"
+        _pushEvent:
+          event: "事件名稱"
+          no-variable: "沒有"
+        callAiScript: "調用AiScript"
+        _callAiScript:
+          functionName: "函數名稱"
+    radioButton: "選項"
+    _radioButton:
+      name: "變數名稱"
+      title: "標題"
+      default: "預設值"
  script:
    categories:
+      logical: "邏輯運算"
+      operation: "計算"
+      comparison: "對比"
+      random: "隨機"
      value: "數值 "
      fn: "函数"
      text: "文本操作"
@@ -654,6 +948,8 @@ _pages:
      text: "文本"
      multiLineText: "文本 (多行)"
      textList: "文本列表"
+      _strLen:
+        arg1: "文本"
      _strPick:
        arg1: "文本"
        arg2: "字元位置"
@@ -667,18 +963,22 @@ _pages:
      _add:
        arg1: "A"
        arg2: "B"
+      subtract: "减去"
      _subtract:
        arg1: "A"
        arg2: "B"
+      multiply: "乘"
      _multiply:
        arg1: "A"
        arg2: "B"
+      divide: "除"
      _divide:
        arg1: "A"
        arg2: "B"
      _mod:
        arg1: "A"
        arg2: "B"
+      round: "四舍五入"
      _round:
        arg1: "數值"
      eq: "A和B相等"
@@ -720,6 +1020,7 @@ _pages:
      not: "否"
      _not:
        arg1: "否"
+      random: "隨機"
      _random:
        arg1: "機率"
      rannum: "亂數"
@@ -762,6 +1063,8 @@ _pages:
        arg1: "文字"
      _numberToString:
        arg1: "數值"
+      _splitStrByLine:
+        arg1: "文本"
      ref: "變數"
      aiScriptVar: "AiScript的變數"
      fn: "函数"
@@ -777,25 +1080,43 @@ _pages:
      array: "清單"
      stringArray: "文本列表"
    enviromentVariables: "環境變數"
+    pageVariables: "頁面元素"
 _relayStatus:
  requesting: "等待核准"
  accepted: "已通過核准"
  rejected: "已拒絕"
 _notification:
+  youRenoted: "{name} 轉發了你的貼文"
  youGotPoll: "{name}已投票"
  youWereFollowed: "您有新的追隨者"
  yourFollowRequestAccepted: "您的追隨請求已通過"
  youWereInvitedToGroup: "您有新的群組邀請"
  _types:
+    all: "全部 "
    follow: "追隨中"
    mention: "提及"
+    reply: "回覆"
    renote: "轉發貼文"
    quote: "引用"
    reaction: "反應"
+    receiveFollowRequest: "已收到追隨請求"
+    followRequestAccepted: "追隨請求已接受"
+    app: "應用程式通知"
 _deck:
+  alwaysShowMainColumn: "總是顯示主欄"
+  columnAlign: "對齊欄位"
+  addColumn: "新增欄位"
+  swapLeft: "向左移動"
+  swapRight: "向右移動"
+  swapUp: "往上移動"
+  swapDown: "往下移動"
+  stackLeft: "向左折疊"
+  popRight: "向右彈出"
  _columns:
+    widgets: "小工具"
    notifications: "通知"
    tl: "時間軸"
    antenna: "天線"
    list: "清單"
    mentions: "提及"
+    direct: "指定使用者"
--- a/migration/1597236229720-IncludingNotificationTypes.ts
+++ b/migration/1597236229720-IncludingNotificationTypes.ts
@@ -0,0 +1,16 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class IncludingNotificationTypes1597236229720 implements MigrationInterface {
+    name = 'IncludingNotificationTypes1597236229720'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`CREATE TYPE "user_profile_includingnotificationtypes_enum" AS ENUM('follow', 'mention', 'reply', 'renote', 'quote', 'reaction', 'pollVote', 'receiveFollowRequest', 'followRequestAccepted', 'groupInvited', 'app')`);
+        await queryRunner.query(`ALTER TABLE "user_profile" ADD "includingNotificationTypes" "user_profile_includingnotificationtypes_enum" array`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "user_profile" DROP COLUMN "includingNotificationTypes"`);
+        await queryRunner.query(`DROP TYPE "user_profile_includingnotificationtypes_enum"`);
+    }
+
+}
--- a/migration/1597893996136-ChannelNoteIdDescIndex.ts
+++ b/migration/1597893996136-ChannelNoteIdDescIndex.ts
@@ -0,0 +1,16 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class ChannelNoteIdDescIndex1597893996136 implements MigrationInterface {
+    name = 'ChannelNoteIdDescIndex1597893996136'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+				await queryRunner.query(`DROP INDEX "IDX_f22169eb10657bded6d875ac8f"`);
+				await queryRunner.query(`CREATE INDEX "IDX_note_on_channelId_and_id_desc" ON "note" ("channelId", "id" desc)`);
+		}
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+				await queryRunner.query(`DROP INDEX "IDX_note_on_channelId_and_id_desc"`);
+        await queryRunner.query(`CREATE INDEX "IDX_f22169eb10657bded6d875ac8f" ON "note" ("channelId") `);
+    }
+
+}
--- a/migration/1600353287890-mutingNotificationTypes.ts
+++ b/migration/1600353287890-mutingNotificationTypes.ts
@@ -0,0 +1,20 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class mutingNotificationTypes1600353287890 implements MigrationInterface {
+    name = 'mutingNotificationTypes1600353287890'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "user_profile" DROP COLUMN "includingNotificationTypes"`);
+        await queryRunner.query(`DROP TYPE "public"."user_profile_includingnotificationtypes_enum"`);
+        await queryRunner.query(`CREATE TYPE "user_profile_mutingnotificationtypes_enum" AS ENUM('follow', 'mention', 'reply', 'renote', 'quote', 'reaction', 'pollVote', 'receiveFollowRequest', 'followRequestAccepted', 'groupInvited', 'app')`);
+        await queryRunner.query(`ALTER TABLE "user_profile" ADD "mutingNotificationTypes" "user_profile_mutingnotificationtypes_enum" array NOT NULL DEFAULT '{}'`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "user_profile" DROP COLUMN "mutingNotificationTypes"`);
+        await queryRunner.query(`DROP TYPE "user_profile_mutingnotificationtypes_enum"`);
+        await queryRunner.query(`CREATE TYPE "public"."user_profile_includingnotificationtypes_enum" AS ENUM('follow', 'mention', 'reply', 'renote', 'quote', 'reaction', 'pollVote', 'receiveFollowRequest', 'followRequestAccepted', 'groupInvited', 'app')`);
+        await queryRunner.query(`ALTER TABLE "user_profile" ADD "includingNotificationTypes" "user_profile_includingnotificationtypes_enum" array`);
+    }
+
+}
--- a/migration/1603094348345-refine-abuse-user-report.ts
+++ b/migration/1603094348345-refine-abuse-user-report.ts
@@ -0,0 +1,32 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class refineAbuseUserReport1603094348345 implements MigrationInterface {
+    name = 'refineAbuseUserReport1603094348345'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" DROP CONSTRAINT "FK_d049123c413e68ca52abe734203"`);
+        await queryRunner.query(`DROP INDEX "IDX_d049123c413e68ca52abe73420"`);
+        await queryRunner.query(`DROP INDEX "IDX_5cd442c3b2e74fdd99dae20243"`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" RENAME COLUMN "userId" TO "targetUserId"`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" ADD "assigneeId" character varying(32)`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" ADD "resolved" boolean NOT NULL DEFAULT false`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" DROP COLUMN "comment"`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" ADD "comment" character varying(2048) NOT NULL DEFAULT '{}'::varchar[]`);
+        await queryRunner.query(`CREATE INDEX "IDX_2b15aaf4a0dc5be3499af7ab6a" ON "abuse_user_report" ("resolved") `);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" ADD CONSTRAINT "FK_08b883dd5fdd6f9c4c1572b36de" FOREIGN KEY ("assigneeId") REFERENCES "user"("id") ON DELETE SET NULL ON UPDATE NO ACTION`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" DROP CONSTRAINT "FK_08b883dd5fdd6f9c4c1572b36de"`);
+        await queryRunner.query(`DROP INDEX "IDX_2b15aaf4a0dc5be3499af7ab6a"`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" DROP COLUMN "comment"`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" ADD "comment" character varying(512) NOT NULL DEFAULT '{}'::varchar[]`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" DROP COLUMN "resolved"`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" DROP COLUMN "assigneeId"`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" RENAME COLUMN "targetUserId" TO "userId"`);
+        await queryRunner.query(`CREATE UNIQUE INDEX "IDX_5cd442c3b2e74fdd99dae20243" ON "abuse_user_report" ("userId", "reporterId") `);
+        await queryRunner.query(`CREATE INDEX "IDX_d049123c413e68ca52abe73420" ON "abuse_user_report" ("userId") `);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" ADD CONSTRAINT "FK_d049123c413e68ca52abe734203" FOREIGN KEY ("userId") REFERENCES "user"("id") ON DELETE CASCADE ON UPDATE NO ACTION`);
+    }
+
+}
--- a/migration/1603095701770-refine-abuse-user-report2.ts
+++ b/migration/1603095701770-refine-abuse-user-report2.ts
@@ -0,0 +1,20 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class refineAbuseUserReport21603095701770 implements MigrationInterface {
+    name = 'refineAbuseUserReport21603095701770'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" ADD "targetUserHost" character varying(128)`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" ADD "reporterHost" character varying(128)`);
+        await queryRunner.query(`CREATE INDEX "IDX_4ebbf7f93cdc10e8d1ef2fc6cd" ON "abuse_user_report" ("targetUserHost") `);
+        await queryRunner.query(`CREATE INDEX "IDX_f8d8b93740ad12c4ce8213a199" ON "abuse_user_report" ("reporterHost") `);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`DROP INDEX "IDX_f8d8b93740ad12c4ce8213a199"`);
+        await queryRunner.query(`DROP INDEX "IDX_4ebbf7f93cdc10e8d1ef2fc6cd"`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" DROP COLUMN "reporterHost"`);
+        await queryRunner.query(`ALTER TABLE "abuse_user_report" DROP COLUMN "targetUserHost"`);
+    }
+
+}
--- a/migration/1603776877564-instance-theme-color.ts
+++ b/migration/1603776877564-instance-theme-color.ts
@@ -0,0 +1,14 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class instanceThemeColor1603776877564 implements MigrationInterface {
+    name = 'instanceThemeColor1603776877564'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "instance" ADD "themeColor" character varying(64) DEFAULT null`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "instance" DROP COLUMN "themeColor"`);
+    }
+
+}
--- a/migration/1603781553011-instance-favicon.ts
+++ b/migration/1603781553011-instance-favicon.ts
@@ -0,0 +1,14 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class instanceFavicon1603781553011 implements MigrationInterface {
+    name = 'instanceFavicon1603781553011'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "instance" ADD "faviconUrl" character varying(256) DEFAULT null`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "instance" DROP COLUMN "faviconUrl"`);
+    }
+
+}
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.47.0",
+	"version": "12.53.0",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
@@ -30,24 +30,23 @@
 	"resolutions": {
 		"chokidar": "^3.3.1",
 		"constantinople": "^4.0.1",
-		"core-js": "^3.6.5",
 		"gulp/gulp-cli/yargs/yargs-parser": "5.0.0-security.0",
-		"lodash": "^4.17.19",
-		"mocha/serialize-javascript": "^3.1.0"
+		"jsonld/rdf-canonize/node-forge": "0.10.0",
+		"lodash": "^4.17.20"
 	},
 	"dependencies": {
 		"@babel/plugin-transform-runtime": "7.11.0",
 		"@elastic/elasticsearch": "7.8.0",
-		"@fortawesome/fontawesome-svg-core": "1.2.30",
-		"@fortawesome/free-brands-svg-icons": "5.14.0",
-		"@fortawesome/free-regular-svg-icons": "5.14.0",
-		"@fortawesome/free-solid-svg-icons": "5.14.0",
-		"@fortawesome/vue-fontawesome": "0.1.10",
+		"@fortawesome/fontawesome-svg-core": "1.2.32",
+		"@fortawesome/free-brands-svg-icons": "5.15.1",
+		"@fortawesome/free-regular-svg-icons": "5.15.1",
+		"@fortawesome/free-solid-svg-icons": "5.15.1",
+		"@fortawesome/vue-fontawesome": "3.0.0-2",
 		"@koa/cors": "3.1.0",
 		"@koa/multer": "3.0.0",
 		"@koa/router": "9.0.1",
 		"@sinonjs/fake-timers": "6.0.1",
-		"@syuilo/aiscript": "0.11.0",
+		"@syuilo/aiscript": "0.11.1",
 		"@types/bcryptjs": "2.4.2",
 		"@types/bull": "3.14.0",
 		"@types/cbor": "5.0.1",
@@ -93,27 +92,28 @@
 		"@types/request-stats": "3.0.0",
 		"@types/rimraf": "3.0.0",
 		"@types/seedrandom": "2.4.28",
-		"@types/sharp": "0.25.0",
+		"@types/sharp": "0.26.0",
 		"@types/sinonjs__fake-timers": "6.0.1",
 		"@types/speakeasy": "2.0.5",
 		"@types/tinycolor2": "1.4.2",
 		"@types/tmp": "0.2.0",
-		"@types/uuid": "8.0.0",
+		"@types/uuid": "8.3.0",
 		"@types/web-push": "3.3.0",
-		"@types/webpack": "4.41.18",
+		"@types/webpack": "4.41.22",
 		"@types/webpack-stream": "3.2.11",
 		"@types/websocket": "1.0.1",
-		"@types/ws": "7.2.6",
-		"@typescript-eslint/parser": "3.6.0",
+		"@types/ws": "7.2.7",
+		"@typescript-eslint/parser": "4.4.0",
+		"@vue/compiler-sfc": "3.0.2",
 		"abort-controller": "3.0.0",
-		"apexcharts": "3.20.0",
+		"apexcharts": "3.22.0",
 		"autobind-decorator": "2.4.0",
 		"autosize": "4.0.2",
 		"autwh": "0.1.0",
-		"aws-sdk": "2.724.0",
+		"aws-sdk": "2.770.0",
 		"bcryptjs": "2.4.3",
 		"blurhash": "1.1.3",
-		"bull": "3.16.0",
+		"bull": "3.18.0",
 		"cafy": "15.2.1",
 		"cbor": "5.1.0",
 		"chalk": "4.1.0",
@@ -123,45 +123,44 @@
 		"content-disposition": "0.5.3",
 		"core-js": "3.6.5",
 		"crc-32": "1.2.0",
-		"css-loader": "4.2.1",
+		"css-loader": "5.0.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": "7.4.0",
-		"eslint-plugin-vue": "6.2.2",
-		"eventemitter3": "4.0.4",
+		"eslint": "7.11.0",
+		"eslint-plugin-vue": "7.1.0",
+		"eventemitter3": "4.0.7",
 		"feed": "4.2.1",
 		"fibers": "5.0.0",
-		"file-type": "14.7.1",
+		"file-type": "16.0.0",
 		"fluent-ffmpeg": "2.1.2",
 		"glob": "7.1.6",
+		"got": "11.7.0",
 		"gulp": "4.0.2",
-		"gulp-clean-css": "4.3.0",
-		"gulp-dart-sass": "1.0.2",
 		"gulp-rename": "2.0.0",
 		"gulp-replace": "1.0.0",
 		"gulp-sourcemaps": "2.6.5",
-		"gulp-terser": "1.3.2",
+		"gulp-terser": "1.4.0",
 		"gulp-tslint": "8.1.4",
 		"gulp-typescript": "6.0.0-alpha.1",
 		"hard-source-webpack-plugin": "0.13.1",
 		"hcaptcha": "0.0.2",
 		"html-minifier": "4.0.0",
 		"http-proxy-agent": "4.0.1",
-		"http-signature": "1.3.4",
+		"http-signature": "1.3.5",
 		"https-proxy-agent": "5.0.0",
 		"idb-keyval": "3.2.0",
 		"insert-text-at-cursor": "0.3.0",
 		"is-root": "2.1.0",
 		"is-svg": "4.2.1",
 		"js-yaml": "3.14.0",
-		"jsdom": "16.3.0",
+		"jsdom": "16.4.0",
 		"json5": "2.1.3",
-		"json5-loader": "4.0.0",
-		"jsonld": "3.1.1",
+		"json5-loader": "4.0.1",
+		"jsonld": "3.2.0",
 		"jsrsasign": "8.0.20",
 		"katex": "0.12.0",
 		"koa": "2.13.0",
@@ -172,39 +171,39 @@
 		"koa-mount": "4.0.0",
 		"koa-send": "5.0.1",
 		"koa-slow": "2.1.0",
-		"koa-views": "6.3.0",
+		"koa-views": "6.3.1",
 		"langmap": "0.0.16",
 		"lookup-dns-cache": "2.1.0",
-		"markdown-it": "11.0.0",
-		"markdown-it-anchor": "5.3.0",
-		"mocha": "8.1.1",
+		"markdown-it": "11.0.1",
+		"markdown-it-anchor": "6.0.0",
+		"mocha": "8.1.3",
 		"moji": "0.5.1",
 		"ms": "2.1.2",
 		"multer": "1.4.2",
-		"nested-property": "2.0.1",
-		"node-fetch": "2.6.0",
-		"nodemailer": "6.4.11",
-		"nprogress": "0.2.0",
+		"nested-property": "4.0.0",
+		"node-fetch": "2.6.1",
+		"nodemailer": "6.4.13",
 		"object-assign-deep": "0.4.0",
 		"os-utils": "0.0.14",
+		"p-cancelable": "2.0.0",
 		"parse5": "6.0.1",
-		"parsimmon": "1.15.0",
-		"pg": "8.3.0",
-		"portal-vue": "2.1.7",
+		"parsimmon": "1.16.0",
+		"pg": "8.4.1",
 		"portscanner": "2.2.0",
-		"postcss-loader": "3.0.0",
-		"prismjs": "1.21.0",
+		"postcss": "8.1.3",
+		"postcss-loader": "4.0.4",
+		"prismjs": "1.22.0",
 		"probe-image-size": "5.0.0",
 		"promise-limit": "2.7.0",
 		"promise-sequential": "1.1.1",
 		"pug": "2.0.4",
 		"punycode": "2.1.1",
-		"pureimage": "0.2.4",
+		"pureimage": "0.2.5",
 		"qrcode": "1.4.4",
 		"random-seed": "0.3.0",
 		"ratelimiter": "3.4.1",
-		"re2": "1.15.4",
-		"recaptcha-promise": "0.1.3",
+		"re2": "1.15.8",
+		"recaptcha-promise": "1.0.0",
 		"reconnecting-websocket": "4.4.0",
 		"redis": "3.0.2",
 		"redis-lock": "0.1.4",
@@ -216,54 +215,47 @@
 		"rimraf": "3.0.2",
 		"rndstr": "1.0.0",
 		"s-age": "1.1.2",
-		"sass": "1.26.10",
-		"sass-loader": "9.0.3",
+		"sass": "1.27.0",
+		"sass-loader": "10.0.4",
 		"seedrandom": "3.0.5",
-		"sharp": "0.25.4",
+		"sharp": "0.26.2",
 		"speakeasy": "2.0.0",
 		"stringz": "2.1.0",
-		"style-loader": "1.2.1",
+		"style-loader": "2.0.0",
 		"summaly": "2.4.0",
 		"syslog-pro": "1.0.0",
-		"systeminformation": "4.26.10",
+		"systeminformation": "4.27.10",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
 		"three": "0.117.1",
-		"tinycolor2": "1.4.1",
+		"tinycolor2": "1.4.2",
 		"tmp": "0.2.1",
-		"ts-loader": "8.0.2",
-		"ts-node": "8.10.2",
+		"ts-loader": "8.0.6",
+		"ts-node": "9.0.0",
 		"tslint": "6.1.3",
 		"tslint-sonarts": "1.9.0",
-		"typeorm": "0.2.25",
-		"typescript": "3.9.7",
+		"typeorm": "0.2.28",
+		"typescript": "4.0.3",
 		"ulid": "2.3.0",
-		"url-loader": "4.1.0",
-		"uuid": "8.3.0",
-		"v-animate-css": "0.0.3",
+		"url-loader": "4.1.1",
+		"uuid": "8.3.1",
 		"v-debounce": "0.1.2",
-		"vue": "2.6.11",
+		"vue": "3.0.2",
 		"vue-color": "2.7.1",
-		"vue-content-loading": "1.6.0",
-		"vue-cropperjs": "4.1.0",
-		"vue-i18n": "8.20.0",
-		"vue-json-pretty": "1.6.7",
-		"vue-loader": "15.9.3",
-		"vue-marquee-text-component": "1.1.1",
-		"vue-meta": "2.4.0",
-		"vue-prism-component": "1.2.0",
-		"vue-prism-editor": "0.6.1",
-		"vue-router": "3.4.2",
+		"vue-draggable-next": "1.0.8",
+		"vue-i18n": "9.0.0-beta.6",
+		"vue-json-pretty": "1.7.0",
+		"vue-loader": "16.0.0-beta.8",
+		"vue-prism-editor": "1.2.2",
+		"vue-router": "4.0.0-beta.13",
 		"vue-style-loader": "4.1.2",
-		"vue-svg-inline-loader-corejs3": "1.5.0",
-		"vue-template-compiler": "2.6.11",
-		"vuedraggable": "2.24.0",
-		"vuex": "3.5.1",
-		"vuex-persistedstate": "3.0.1",
+		"vue-template-compiler": "2.6.12",
+		"vuex": "4.0.0-beta.4",
+		"vuex-persistedstate": "3.1.0",
 		"web-push": "3.4.4",
-		"webpack": "git+https://github.com/webpack/webpack.git#c1237eae912817c7546e8c54489f7adb60bfbe38",
-		"webpack-cli": "3.3.12",
-		"websocket": "1.0.31",
+		"webpack": "5.3.2",
+		"webpack-cli": "4.1.0",
+		"websocket": "1.0.32",
 		"ws": "7.3.1",
 		"xev": "2.0.1"
 	},
--- a/src/@types/nested-property.d.ts
+++ b/src/@types/nested-property.d.ts
@@ -1,21 +0,0 @@
-type Obj = { [key: string]: any };
-
-declare module 'nested-property' {
-	interface IHasNestedPropertyOptions {
-		own?: boolean;
-	}
-
-	interface IIsInNestedPropertyOptions {
-		validPath?: boolean;
-	}
-
-	export function set<T>(object: T, property: string, value: any): T;
-
-	export function get(object: Obj, property: string): any;
-
-	export function has(object: Obj, property: string, options?: IHasNestedPropertyOptions): boolean;
-
-	export function hasOwn(object: Obj, property: string, options?: IHasNestedPropertyOptions): boolean;
-
-	export function isIn(object: Obj, property: string, objectInPath: Obj, options?: IIsInNestedPropertyOptions): boolean;
-}
--- a/src/client/.eslintrc
+++ b/src/client/.eslintrc
@@ -0,0 +1,12 @@
+{
+	"globals": {
+		"_DEV_": false,
+		"_LANGS_": false,
+		"_VERSION_": false,
+		"_ENV_": false,
+		"_PERF_PREFIX_": false,
+		"_DATA_TRANSFER_DRIVE_FILE_": false,
+		"_DATA_TRANSFER_DRIVE_FOLDER_": false,
+		"_DATA_TRANSFER_DECK_COLUMN_": false
+	}
+}
--- a/src/client/@types/global.d.ts
+++ b/src/client/@types/global.d.ts
@@ -0,0 +1,8 @@
+declare const _LANGS_: string[];
+declare const _VERSION_: string;
+declare const _ENV_: string;
+declare const _DEV_: boolean;
+declare const _PERF_PREFIX_: string;
+declare const _DATA_TRANSFER_DRIVE_FILE_: string;
+declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
+declare const _DATA_TRANSFER_DECK_COLUMN_: string;
--- a/src/client/@types/vue.d.ts
+++ b/src/client/@types/vue.d.ts
--- a/src/client/@types/vuex-shim.d.ts
+++ b/src/client/@types/vuex-shim.d.ts
@@ -0,0 +1,12 @@
+import { ComponentCustomProperties } from 'vue';
+import { Store } from 'vuex';
+
+declare module '@vue/runtime-core' {
+	// tslint:disable-next-line:no-empty-interface
+	interface State {
+	}
+
+	interface ComponentCustomProperties {
+		$store: Store<State>;
+	}
+}
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -1,785 +0,0 @@
-<template>
-<div class="mk-app" v-hotkey.global="keymap">
-	<header class="header" ref="header">
-		<div class="title" ref="title">
-			<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
-				<button class="_button back" v-if="canBack" @click="back()"><fa :icon="faChevronLeft"/></button>
-			</transition>
-			<transition :name="$store.state.device.animation ? 'header' : ''" mode="out-in" appear>
-				<div class="body" :key="pageKey">
-					<div class="default">
-						<portal-target name="avatar" slim/>
-						<h1 class="title"><portal-target name="icon" slim/><portal-target name="title" slim/></h1>
-					</div>
-					<div class="custom">
-						<portal-target name="header" slim/>
-					</div>
-				</div>
-			</transition>
-		</div>
-		<div class="sub">
-			<template v-if="$store.getters.isSignedIn">
-				<button v-if="widgetsEditMode" class="_button edit active" @click="widgetsEditMode = false"><fa :icon="faGripVertical"/></button>
-				<button v-else class="_button edit" @click="widgetsEditMode = true"><fa :icon="faGripVertical"/></button>
-			</template>
-			<div class="search">
-				<fa :icon="faSearch"/>
-				<input type="search" :placeholder="$t('search')" v-model="searchQuery" v-autocomplete="{ model: 'searchQuery' }" :disabled="searchWait" @keypress="searchKeypress"/>
-			</div>
-			<button v-if="$store.getters.isSignedIn" class="post _buttonPrimary" @click="post()"><fa :icon="faPencilAlt"/></button>
-			<x-clock v-if="isDesktop" class="clock"/>
-		</div>
-	</header>
-
-	<x-sidebar ref="nav" @change-view-mode="calcHeaderWidth"/>
-
-	<div class="contents" ref="contents" :class="{ wallpaper, full: $store.state.fullView }">
-		<main ref="main">
-			<div class="content">
-				<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
-					<keep-alive :include="['index']">
-						<router-view></router-view>
-					</keep-alive>
-				</transition>
-			</div>
-			<div class="powerd-by" :class="{ visible: !$store.getters.isSignedIn }">
-				<b><router-link to="/">{{ host }}</router-link></b>
-				<small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small>
-			</div>
-		</main>
-
-		<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>
-						</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>
-		</template>
-	</div>
-
-	<div class="buttons" :class="{ navHidden }">
-		<button class="button nav _button" @click="showNav" ref="navButton"><fa :icon="faBars"/><i v-if="navIndicated"><fa :icon="faCircle"/></i></button>
-		<button 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>
-		<button v-if="$store.getters.isSignedIn" class="button post _buttonPrimary" @click="post()"><fa :icon="faPencilAlt"/></button>
-	</div>
-
-	<button v-if="$store.getters.isSignedIn" class="post _buttonPrimary" :class="{ navHidden }" @click="post()"><fa :icon="faPencilAlt"/></button>
-
-	<stream-indicator v-if="$store.getters.isSignedIn"/>
-</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 { v4 as uuid } from 'uuid';
-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'),
-	},
-
-	data() {
-		return {
-			host: host,
-			pageKey: 0,
-			searching: false,
-			connection: null,
-			searchQuery: '',
-			searchWait: false,
-			widgetsEditMode: false,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-			canBack: false,
-			menuDef: this.$store.getters.nav({}),
-			navHidden: false,
-			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
-		};
-	},
-
-	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,
-				'h|/': this.help
-			};
-		},
-
-		widgets(): any {
-			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 {
-				const right = [{
-					name: 'calendar',
-					id: 'b', place: 'right', data: {}
-				}, {
-					name: 'trends',
-					id: 'c', place: 'right', data: {}
-				}];
-
-				if (this.$route.name !== 'index') {
-					right.unshift({
-						name: 'welcome',
-						id: 'a', place: 'right', data: {}
-					});
-				}
-
-				return {
-					left: [],
-					right,
-					mobile: [],
-				};
-			}
-		},
-
-		menu(): string[] {
-			return this.$store.state.deviceUser.menu;
-		},
-
-		navIndicated(): boolean {
-			if (!this.$store.getters.isSignedIn) return false;
-			for (const def in this.menuDef) {
-				if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-				if (this.menuDef[def].indicated) return true;
-			}
-			return false;
-		}
-	},
-
-	watch: {
-		$route(to, from) {
-			this.pageKey++;
-			this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
-		},
-
-		isDesktop() {
-			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.$store.state.deviceUser.widgets.length === 0) {
-				this.$store.commit('deviceUser/setWidgets', [{
-					name: 'calendar',
-					id: 'a', place: 'right', data: {}
-				}, {
-					name: 'notifications',
-					id: 'b', place: 'right', data: {}
-				}, {
-					name: 'trends',
-					id: 'c', place: 'right', data: {}
-				}]);
-			}
-		}
-	},
-
-	mounted() {
-		this.adjustTitlePosition();
-
-		const ro = new ResizeObserver((entries, observer) => {
-			this.adjustTitlePosition();
-		});
-
-		ro.observe(this.$refs.contents);
-
-		window.addEventListener('resize', this.adjustTitlePosition, { passive: true });
-
-		if (!this.isDesktop) {
-			window.addEventListener('resize', () => {
-				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
-			}, { passive: true });
-		}
-
-		// widget follow
-		this.attachSticky();
-
-		this.$nextTick(() => {
-			this.calcHeaderWidth();
-		});
-	},
-
-	methods: {
-		adjustTitlePosition() {
-			const left = this.$refs.main.getBoundingClientRect().left - this.$refs.nav.$el.offsetWidth;
-			if (left >= 0) {
-				this.$refs.title.style.left = left + 'px';
-			}
-		},
-
-		calcHeaderWidth() {
-			const navWidth = this.$refs.nav.$el.offsetWidth;
-			this.navHidden = navWidth === 0;
-			this.$refs.header.style.width = `calc(100% - ${navWidth}px)`;
-			this.adjustTitlePosition();
-		},
-
-		showNav() {
-			this.$refs.nav.show();
-		},
-
-		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() {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		},
-
-		help() {
-			this.$router.push('/docs/keyboard-shortcut');
-		},
-
-		back() {
-			if (this.canBack) window.history.back();
-		},
-
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
-
-		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;
-				});
-			});
-		},
-
-		searchKeypress(e) {
-			if (e.keyCode === 13) {
-				this.searchWait = true;
-				search(this, this.searchQuery).finally(() => {
-					this.searchWait = false;
-					this.searchQuery = '';
-				});
-			}
-		},
-
-		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');
-		},
-
-		widgetFunc(id) {
-			this.$refs[id][0].setting();
-		},
-
-		onWidgetSort() {
-			this.saveHome();
-		},
-
-		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.$store.commit('deviceUser/addWidget', {
-				name: widget,
-				id: uuid(),
-				place: place,
-				data: {}
-			});
-		},
-
-		removeWidget(widget) {
-			this.$store.commit('deviceUser/removeWidget', widget);
-		},
-
-		saveHome() {
-			this.$store.commit('deviceUser/setWidgets', [...this.widgets.left, ...this.widgets.right, ...this.widgets.mobile]);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-app {
-	$header-height: 60px;
-	$main-width: 670px;
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$header-sub-hide-threshold: 1090px;
-	$left-widgets-hide-threshold: 1600px;
-	$right-widgets-hide-threshold: 1090px;
-
-	// ほんとは単に 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;
-
-	&, > .header > .body {
-		display: flex;
-		margin: 0 auto;
-	}
-
-	> .header {
-		position: fixed;
-		z-index: 1000;
-		top: 0;
-		right: 0;
-		height: $header-height;
-		width: 100%;
-		//background-color: var(--panel);
-		-webkit-backdrop-filter: blur(32px);
-		backdrop-filter: blur(32px);
-		background-color: var(--header);
-		border-bottom: solid 1px var(--divider);
-
-		> .title {
-			position: relative;
-			line-height: $header-height;
-			height: $header-height;
-			max-width: $main-width;
-			text-align: center;
-
-			> .back {
-				position: absolute;
-				z-index: 1;
-				top: 0;
-				left: 0;
-				height: $header-height;
-				width: $header-height;
-			}
-
-			> .body {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				height: $header-height;
-
-				> .default {
-					padding: 0 $header-height;
-
-					> .avatar {
-						$size: 32px;
-						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;
-						font-size: $ui-font-size;
-						margin: 0;
-						line-height: $header-height;
-
-						> [data-icon] {
-							margin-right: 8px;
-						}
-					}
-				}
-
-				> .custom {
-					position: absolute;
-					top: 0;
-					left: 0;
-					height: 100%;
-					width: 100%;
-				}
-			}
-		}
-
-		> .sub {
-			$post-button-size: 42px;
-			$post-button-margin: (($header-height - $post-button-size) / 2);
-			display: flex;
-			align-items: center;
-			position: absolute;
-			top: 0;
-			right: 16px;
-			height: $header-height;
-
-			@media (max-width: $header-sub-hide-threshold) {
-				display: none;
-			}
-
-			> .edit {
-				padding: 16px;
-
-				&.active {
-					color: var(--accent);
-				}
-			}
-
-			> .search {
-				position: relative;
-
-				> input {
-					width: 220px;
-					box-sizing: border-box;
-					margin-right: 8px;
-					padding: 0 12px 0 42px;
-					font-size: 1rem;
-					line-height: 38px;
-					border: none;
-					border-radius: 38px;
-					color: var(--fg);
-					background: var(--bg);
-					-webkit-appearance: textfield;
-
-					&:focus {
-						outline: none;
-					}
-				}
-
-				> [data-icon] {
-					position: absolute;
-					top: 0;
-					left: 16px;
-					height: 100%;
-					pointer-events: none;
-					font-size: 16px;
-				}
-			}
-
-			> .post {
-				width: $post-button-size;
-				height: $post-button-size;
-				margin-left: $post-button-margin;
-				border-radius: 100%;
-				font-size: 16px;
-			}
-
-			> .clock {
-				margin-left: 8px;
-			}
-		}
-	}
-
-	> .contents {
-		display: flex;
-		margin: 0 auto;
-		min-width: 0;
-
-		&.wallpaper {
-			background: var(--wallpaperOverlay);
-			backdrop-filter: blur(4px);
-		}
-
-		&.full {
-			width: 100%;
-
-			> main {
-				width: 100%;
-			}
-
-			> .widgets {
-				display: none;
-			}
-		}
-
-		> main {
-			width: $main-width;
-			min-width: 0;
-
-			> .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});
-					box-sizing: border-box;
-					padding: var(--margin);
-
-					&.full {
-						padding: 0 var(--margin);
-					}
-				}
-			}
-
-			> .powerd-by {
-				font-size: 14px;
-				text-align: center;
-				margin: 32px 0;
-				visibility: hidden;
-
-				&.visible {
-					visibility: visible;
-				}
-
-				&:not(.visible) {
-					@media (min-width: 850px) {
-						display: none;
-					}
-				}
-
-				@media (max-width: 500px) {
-					margin-top: 16px;
-				}
-
-				> small {
-					display: block;
-					margin-top: 8px;
-					opacity: 0.5;
-
-					@media (max-width: 500px) {
-						margin-top: 4px;
-					}
-				}
-			}
-		}
-
-		> .widgets {
-			padding: 0 var(--margin);
-			box-shadow: 1px 0 0 0 var(--divider), -1px 0 0 0 var(--divider);
-
-			&.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;
-			}
-
-			@media (max-width: $right-widgets-hide-threshold) {
-				display: none;
-			}
-
-			> .container {
-				position: sticky;
-				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: var(--margin) 0;
-					width: 300px;
-
-					&:first-child {
-						margin-top: 0;
-					}
-
-					&:last-child {
-						margin-bottom: 0;
-					}
-				}
-			}
-
-			> .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;
-					}
-				}
-			}
-		}
-	}
-
-	> .post {
-		display: block;
-		position: fixed;
-		z-index: 1000;
-		bottom: 32px;
-		right: 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;
-
-		&.navHidden {
-			display: none;
-		}
-
-		@media (min-width: ($header-sub-hide-threshold + 1px)) {
-			display: none;
-		}
-	}
-
-	> .buttons {
-		position: fixed;
-		z-index: 1000;
-		bottom: 0;
-		padding: 0 32px 32px 32px;
-		display: flex;
-		width: 100%;
-		box-sizing: border-box;
-		background: linear-gradient(0deg, var(--bg), var(--X1));
-
-		@media (max-width: 500px) {
-			padding: 0 16px 16px 16px;
-		}
-
-		&:not(.navHidden) {
-			display: none;
-		}
-
-		> .button {
-			position: relative;
-			padding: 0;
-			margin: auto;
-			width: 64px;
-			height: 64px;
-			border-radius: 100%;
-			box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
-
-			&:first-child {
-				margin-left: 0;
-			}
-
-			&:last-child {
-				margin-right: 0;
-			}
-
-			> * {
-				font-size: 22px;
-			}
-
-			&:disabled {
-				cursor: default;
-
-				> * {
-					opacity: 0.5;
-				}
-			}
-
-			&:not(.post) {
-				background: var(--panel);
-				color: var(--fg);
-
-				&:hover {
-					background: var(--X2);
-				}
-
-				> i {
-					position: absolute;
-					top: 0;
-					left: 0;
-					color: var(--indicator);
-					font-size: 16px;
-					animation: blink 1s infinite;
-				}
-			}
-		}
-	}
-}
-</style>
--- a/src/client/components/abuse-report-window.vue
+++ b/src/client/components/abuse-report-window.vue
@@ -0,0 +1,85 @@
+<template>
+<XWindow ref="window" :initial-width="400" :initial-height="500" :can-resize="true" @closed="$emit('closed')">
+	<template #header>
+		<Fa :icon="faExclamationCircle" style="margin-right: 0.5em;"/>
+		<i18n-t keypath="reportAbuseOf" tag="span">
+			<template #name>
+				<b><MkAcct :user="user"/></b>
+			</template>
+		</i18n-t>
+	</template>
+	<div class="dpvffvvy">
+		<div class="_section">
+			<div class="_content">
+				<MkTextarea v-model:value="comment">
+					<span>{{ $t('details') }}</span>
+					<template #desc>{{ $t('fillAbuseReportDescription') }}</template>
+				</MkTextarea>
+			</div>
+		</div>
+		<div class="_section">
+			<div class="_content">
+				<MkButton @click="send" primary full :disabled="comment.length === 0">{{ $t('send') }}</MkButton>
+			</div>
+		</div>
+	</div>
+</XWindow>
+</template>
+
+<script lang="ts">
+import { defineComponent, markRaw } from 'vue';
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+import XWindow from '@/components/ui/window.vue';
+import MkTextarea from '@/components/ui/textarea.vue';
+import MkButton from '@/components/ui/button.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XWindow,
+		MkTextarea,
+		MkButton,
+	},
+
+	props: {
+		user: {
+			type: Object,
+			required: true,
+		},
+		initialComment: {
+			type: String,
+			required: false,
+		},
+	},
+
+	emits: ['closed'],
+
+	data() {
+		return {
+			comment: this.initialComment || '',
+			faExclamationCircle,
+		};
+	},
+
+	methods: {
+		send() {
+			os.apiWithDialog('users/report-abuse', {
+				userId: this.user.id,
+				comment: this.comment,
+			}, undefined, res => {
+				os.dialog({
+					type: 'success',
+					text: this.$t('abuseReported')
+				});
+				this.$refs.window.close();
+			});
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.dpvffvvy {
+	--section-padding: 16px;
+}
+</style>
--- a/src/client/components/acct.vue
+++ b/src/client/components/acct.vue
@@ -6,11 +6,11 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
-import { host } from '../config';
+import { host } from '@/config';

-export default Vue.extend({
+export default defineComponent({
 	props: ['user', 'detail'],
 	data() {
 		return {
--- a/src/client/components/analog-clock.vue
+++ b/src/client/components/analog-clock.vue
@@ -34,10 +34,11 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as tinycolor from 'tinycolor2';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			now: new Date(),
@@ -127,7 +128,7 @@ export default Vue.extend({
 		});
 	},

-	beforeDestroy() {
+	beforeUnmount() {
 		this.enabled = false;
 	},

--- a/src/client/components/autocomplete.vue
+++ b/src/client/components/autocomplete.vue
@@ -1,12 +1,12 @@
 <template>
-<div class="swhvrteh" @contextmenu.prevent="() => {}">
+<div class="swhvrteh _popup _shadow" @contextmenu.prevent="() => {}">
 	<ol class="users" ref="suggests" v-if="type === 'user'">
 		<li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1" class="user">
 			<img class="avatar" :src="user.avatarUrl"/>
 			<span class="name">
-				<mk-user-name :user="user" :key="user.id"/>
+				<MkUserName :user="user" :key="user.id"/>
 			</span>
-			<span class="username">@{{ user | acct }}</span>
+			<span class="username">@{{ acct(user) }}</span>
 		</li>
 		<li @click="chooseUser()" @keydown="onKeydown" tabindex="-1" class="choose">{{ $t('selectUser') }}</li>
 	</ol>
@@ -28,12 +28,13 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import { emojilist } from '../../misc/emojilist';
-import contains from '../scripts/contains';
+import contains from '@/scripts/contains';
 import { twemojiSvgBase } from '../../misc/twemoji-base';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
-import MkUserSelect from './user-select.vue';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { acct } from '@/filters/user';
+import * as os from '@/os';

 type EmojiDef = {
 	emoji: string;
@@ -74,7 +75,7 @@ for (const x of lib) {

 emjdb.sort((a, b) => a.name.length - b.name.length);

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,
@@ -91,11 +92,6 @@ export default Vue.extend({
 			required: true,
 		},

-		complete: {
-			type: Function,
-			required: true,
-		},
-
 		close: {
 			type: Function,
 			required: true,
@@ -110,8 +106,15 @@ export default Vue.extend({
 			type: Number,
 			required: true,
 		},
+
+		showing: {
+			type: Boolean,
+			required: true
+		},
 	},

+	emits: ['done', 'closed'],
+
 	data() {
 		return {
 			getStaticImageUrl,
@@ -119,24 +122,29 @@ export default Vue.extend({
 			users: [],
 			hashtags: [],
 			emojis: [],
+			items: [],
 			select: -1,
-			emojilist,
 			emojiDb: [] as EmojiDef[]
 		}
 	},

 	computed: {
-		items(): HTMLCollection {
-			return (this.$refs.suggests as Element).children;
-		},
-
 		useOsNativeEmojis(): boolean {
 			return this.$store.state.device.useOsNativeEmojis;
 		}
 	},

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

 	mounted() {
@@ -169,7 +177,7 @@ export default Vue.extend({

 		emojiDefinitions.sort((a, b) => a.name.length - b.name.length);

-		this.emojiDb = emojiDefinitions.concat(emjdb);
+		this.emojiDb = markRaw(emojiDefinitions.concat(emjdb));
 		//#endregion

 		this.textarea.addEventListener('keydown', this.onKeydown);
@@ -189,7 +197,7 @@ export default Vue.extend({
 		});
 	},

-	beforeDestroy() {
+	beforeUnmount() {
 		this.textarea.removeEventListener('keydown', this.onKeydown);

 		for (const el of Array.from(document.querySelectorAll('body *'))) {
@@ -198,6 +206,11 @@ export default Vue.extend({
 	},

 	methods: {
+		complete(type, value) {
+			this.$emit('done', { type, value });
+			this.$emit('closed');
+		},
+
 		setPosition() {
 			if (this.x + this.$el.offsetWidth > window.innerWidth) {
 				this.$el.style.left = (window.innerWidth - this.$el.offsetWidth) + 'px';
@@ -236,8 +249,8 @@ export default Vue.extend({
 					this.users = users;
 					this.fetching = false;
 				} else {
-					this.$root.api('users/search', {
-						query: this.q,
+					os.api('users/search-by-username-and-host', {
+						username: this.q,
 						limit: 10,
 						detail: false
 					}).then(users => {
@@ -260,7 +273,7 @@ export default Vue.extend({
 						this.hashtags = hashtags;
 						this.fetching = false;
 					} else {
-						this.$root.api('hashtags/search', {
+						os.api('hashtags/search', {
 							query: this.q,
 							limit: 30
 						}).then(hashtags => {
@@ -355,6 +368,7 @@ export default Vue.extend({

 		selectNext() {
 			if (++this.select >= this.items.length) this.select = 0;
+			if (this.items.length === 0) this.select = -1;
 			this.applySelect();
 		},

@@ -368,20 +382,21 @@ export default Vue.extend({
 				el.removeAttribute('data-selected');
 			}

-			this.items[this.select].setAttribute('data-selected', 'true');
-			(this.items[this.select] as any).focus();
+			if (this.select !== -1) {
+				this.items[this.select].setAttribute('data-selected', 'true');
+				(this.items[this.select] as any).focus();
+			}
 		},

 		chooseUser() {
 			this.close();
-			const vm = this.$root.new(MkUserSelect, {});
-			vm.$once('selected', user => {
+			os.selectUser().then(user => {
 				this.complete('user', user);
-			});
-			vm.$once('closed', () => {
 				this.textarea.focus();
 			});
-		}
+		},
+
+		acct
 	}
 });
 </script>
@@ -393,9 +408,6 @@ export default Vue.extend({
 	max-width: 100%;
 	margin-top: calc(1em + 8px);
 	overflow: hidden;
-	background: var(--panel);
-	border: solid 1px rgba(#000, 0.1);
-	border-radius: 4px;
 	transition: top 0.1s ease, left 0.1s ease;

 	> ol {
--- a/src/client/components/avatar.vue
+++ b/src/client/components/avatar.vue
@@ -1,17 +1,19 @@
 <template>
-<span class="eiwwqkts" :class="{ cat }" :title="user | acct" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
+<span class="eiwwqkts" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
 	<img class="inner" :src="url"/>
 </span>
-<router-link class="eiwwqkts" :class="{ cat }" :to="user | userPage" :title="user | acct" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
+<MkA class="eiwwqkts" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
 	<img class="inner" :src="url"/>
-</router-link>
+</MkA>
 </template>

 <script lang="ts">
-import Vue from 'vue';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { defineComponent } from 'vue';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
+import { acct, userPage } from '../filters/user';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,
@@ -30,6 +32,7 @@ export default Vue.extend({
 			default: false
 		}
 	},
+	emits: ['click'],
 	computed: {
 		cat(): boolean {
 			return this.user.isCat;
@@ -42,25 +45,19 @@ export default Vue.extend({
 	},
 	watch: {
 		'user.avatarBlurhash'() {
-			this.$el.style.color = this.getBlurhashAvgColor(this.user.avatarBlurhash);
+			if (this.$el == null) return;
+			this.$el.style.color = extractAvgColorFromBlurhash(this.user.avatarBlurhash);
 		}
 	},
 	mounted() {
-		this.$el.style.color = this.getBlurhashAvgColor(this.user.avatarBlurhash);
+		this.$el.style.color = extractAvgColorFromBlurhash(this.user.avatarBlurhash);
 	},
 	methods: {
-		getBlurhashAvgColor(s) {
-			return typeof s == 'string'
-				? '#' + [...s.slice(2, 6)]
-						.map(x => '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~'.indexOf(x))
-						.reduce((a, c) => a * 83 + c, 0)
-						.toString(16)
-						.padStart(6, '0')
-				: undefined;
-		},
 		onClick(e) {
 			this.$emit('click', e);
-		}
+		},
+		acct,
+		userPage
 	}
 });
 </script>
--- a/src/client/components/avatars.vue
+++ b/src/client/components/avatars.vue
@@ -1,15 +1,16 @@
 <template>
 <div>
 	<div v-for="user in us" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
-		<mk-avatar :user="user" style="width:32px;height:32px;"/>
+		<MkAvatar :user="user" style="width:32px;height:32px;"/>
 	</div>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		userIds: {
 			required: true
@@ -21,7 +22,7 @@ export default Vue.extend({
 		};
 	},
 	async created() {
-		this.us = await this.$root.api('users/show', {
+		this.us = await os.api('users/show', {
 			userIds: this.userIds
 		});
 	}
--- a/src/client/components/captcha.vue
+++ b/src/client/components/captcha.vue
@@ -1,12 +1,12 @@
 <template>
 <div>
-	<span v-if="!available">{{ $t('waiting') }}<mk-ellipsis/></span>
+	<span v-if="!available">{{ $t('waiting') }}<MkEllipsis/></span>
 	<div ref="captcha"></div>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';

 type Captcha = {
 	render(container: string | Node, options: {
@@ -28,8 +28,9 @@ declare global {
 	interface Window extends CaptchaContainer {
 	}
 }
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		provider: {
 			type: String,
@@ -88,7 +89,7 @@ export default Vue.extend({
 		}
 	},

-	beforeDestroy() {
+	beforeUnmount() {
 		this.reset();
 	},

@@ -110,7 +111,7 @@ export default Vue.extend({
 			}
 		},
 		callback(response?: string) {
-			this.$emit('input', typeof response == 'string' ? response : null);
+			this.$emit('update:value', typeof response == 'string' ? response : null);
 		},
 	},
 });
--- a/src/client/components/channel-follow-button.vue
+++ b/src/client/components/channel-follow-button.vue
@@ -6,23 +6,24 @@
 >
 	<template v-if="!wait">
 		<template v-if="isFollowing">
-			<span v-if="full">{{ $t('unfollow') }}</span><fa :icon="faMinus"/>
+			<span v-if="full">{{ $t('unfollow') }}</span><Fa :icon="faMinus"/>
 		</template>
 		<template v-else>
-			<span v-if="full">{{ $t('follow') }}</span><fa :icon="faPlus"/>
+			<span v-if="full">{{ $t('follow') }}</span><Fa :icon="faPlus"/>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse fixed-width/>
+		<span v-if="full">{{ $t('processing') }}</span><Fa :icon="faSpinner" pulse fixed-width/>
 	</template>
 </button>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faPlus, faMinus, } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		channel: {
 			type: Object,
@@ -49,12 +50,12 @@ export default Vue.extend({

 			try {
 				if (this.isFollowing) {
-					await this.$root.api('channels/unfollow', {
+					await os.api('channels/unfollow', {
 						channelId: this.channel.id
 					});
 					this.isFollowing = false;
 				} else {
-					await this.$root.api('channels/follow', {
+					await os.api('channels/follow', {
 						channelId: this.channel.id
 					});
 					this.isFollowing = true;
--- a/src/client/components/channel-preview.vue
+++ b/src/client/components/channel-preview.vue
@@ -1,29 +1,43 @@
 <template>
-<router-link :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
-	<div class="banner" v-if="channel.bannerUrl" :style="`background-image: url('${channel.bannerUrl}')`">
+<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
+	<div class="banner" :style="bannerStyle">
 		<div class="fade"></div>
-		<div class="name"><fa :icon="faSatelliteDish"/> {{ channel.name }}</div>
+		<div class="name"><Fa :icon="faSatelliteDish"/> {{ channel.name }}</div>
 		<div class="status">
-			<div><fa :icon="faUsers" fixed-width/><i18n path="_channel.usersCount" tag="span" style="margin-left: 4px;"><b place="n">{{ channel.usersCount }}</b></i18n></div>
-			<div><fa :icon="faPencilAlt" fixed-width/><i18n path="_channel.notesCount" tag="span" style="margin-left: 4px;"><b place="n">{{ channel.notesCount }}</b></i18n></div>
+			<div>
+				<Fa :icon="faUsers" fixed-width/>
+				<i18n-t keypath="_channel.usersCount" tag="span" style="margin-left: 4px;">
+					<template #n>
+						<b>{{ channel.usersCount }}</b>
+					</template>
+				</i18n-t>
+			</div>
+			<div>
+				<Fa :icon="faPencilAlt" fixed-width/>
+				<i18n-t keypath="_channel.notesCount" tag="span" style="margin-left: 4px;">
+					<template #n>
+						<b>{{ channel.notesCount }}</b>
+					</template>
+				</i18n-t>
+			</div>
 		</div>
 	</div>
 	<article v-if="channel.description">
 		<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
 	</article>
 	<footer>
-		<span>
-			{{ $t('updatedAt') }}: <mk-time :time="channel.lastNotedAt"/>
+		<span v-if="channel.lastNotedAt">
+			{{ $t('updatedAt') }}: <MkTime :time="channel.lastNotedAt"/>
 		</span>
 	</footer>
-</router-link>
+</MkA>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSatelliteDish, faUsers, faPencilAlt } from '@fortawesome/free-solid-svg-icons';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		channel: {
 			type: Object,
@@ -31,6 +45,16 @@ export default Vue.extend({
 		},
 	},

+	computed: {
+		bannerStyle() {
+			if (this.channel.bannerUrl) {
+				return { backgroundImage: `url(${this.channel.bannerUrl})` };
+			} else {
+				return { backgroundColor: '#4c5e6d' };
+			}
+		}
+	},
+
 	data() {
 		return {
 			faSatelliteDish, faUsers, faPencilAlt,
@@ -44,7 +68,6 @@ export default Vue.extend({
 	display: block;
 	overflow: hidden;
 	width: 100%;
-	border: 1px solid var(--divider);

 	&:hover {
 		text-decoration: none;
--- a/src/client/components/code-core.vue
+++ b/src/client/components/code-core.vue
@@ -1,16 +1,14 @@
 <template>
-<x-prism :inline="inline" :language="prismLang">{{ code }}</x-prism>
+<code v-if="inline" v-html="html" :class="`language-${prismLang}`"></code>
+<pre v-else :class="`language-${prismLang}`"><code v-html="html" :class="`language-${prismLang}`"></code></pre>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import 'prismjs';
 import 'prismjs/themes/prism-okaidia.css';
-import XPrism from 'vue-prism-component';
-export default Vue.extend({
-	components: {
-		XPrism
-	},
+
+export default defineComponent({
 	props: {
 		code: {
 			type: String,
@@ -28,6 +26,9 @@ export default Vue.extend({
 	computed: {
 		prismLang() {
 			return Prism.languages[this.lang] ? this.lang : 'js';
+		},
+		html() {
+			return Prism.highlight(this.code, Prism.languages[this.prismLang], this.prismLang);
 		}
 	}
 });
--- a/src/client/components/code.vue
+++ b/src/client/components/code.vue
@@ -1,12 +1,13 @@
 <template>
-<x-code :code="code" :lang="lang" :inline="inline"/>
+<XCode :code="code" :lang="lang" :inline="inline"/>
 </template>

 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent, defineAsyncComponent } from 'vue';
+
+export default defineComponent({
 	components: {
-		XCode: () => import('./code-core.vue').then(m => m.default)
+		XCode: defineAsyncComponent(() => import('./code-core.vue'))
 	},
 	props: {
 		code: {
--- a/src/client/components/cw-button.vue
+++ b/src/client/components/cw-button.vue
@@ -1,16 +1,16 @@
 <template>
-<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh _button" @click="toggle">
-	<b>{{ value ? this.$t('_cw.hide') : this.$t('_cw.show') }}</b>
-	<span v-if="!value">{{ this.label }}</span>
+<button class="nrvgflfu _button" @click="toggle">
+	<b>{{ value ? $t('_cw.hide') : $t('_cw.show') }}</b>
+	<span v-if="!value">{{ label }}</span>
 </button>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { length } from 'stringz';
 import { concat } from '../../prelude/array';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			type: Boolean,
@@ -36,14 +36,14 @@ export default Vue.extend({
 		length,

 		toggle() {
-			this.$emit('input', !this.value);
+			this.$emit('update:value', !this.value);
 		}
 	}
 });
 </script>

 <style lang="scss" scoped>
-.nrvgflfuaxwgkxoynpnumyookecqrrvh {
+.nrvgflfu {
 	display: inline-block;
 	padding: 4px 8px;
 	font-size: 0.7em;
--- a/src/client/components/date-separated-list.vue
+++ b/src/client/components/date-separated-list.vue
@@ -1,22 +1,22 @@
 <template>
-<component :is="$store.state.device.animation ? 'transition-group' : 'div'" class="sqadhkmv _list_" name="list" tag="div" :data-direction="direction" :data-reversed="reversed ? 'true' : 'false'">
+<transition-group 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'">
 			<p class="date">
-				<span><fa class="icon" :icon="faAngleUp"/>{{ getDateText(item.createdAt) }}</span>
-				<span>{{ getDateText(items[i + 1].createdAt) }}<fa class="icon" :icon="faAngleDown"/></span>
+				<span><Fa class="icon" :icon="faAngleUp"/>{{ getDateText(item.createdAt) }}</span>
+				<span>{{ getDateText(items[i + 1].createdAt) }}<Fa class="icon" :icon="faAngleDown"/></span>
 			</p>
 		</div>
 	</template>
-</component>
+</transition-group>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		items: {
 			type: Array,
@@ -82,14 +82,14 @@ export default Vue.extend({
 	}

 	&[data-direction="up"] {
-		> .list-enter {
+		> .list-enter-from {
 			opacity: 0;
 			transform: translateY(64px);
 		}
 	}

 	&[data-direction="down"] {
-		> .list-enter {
+		> .list-enter-from {
 			opacity: 0;
 			transform: translateY(-64px);
 		}
--- a/src/client/components/deck/notifications-column.vue
+++ b/src/client/components/deck/notifications-column.vue
@@ -1,69 +0,0 @@
-<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('notificationType'),
-			action: () => {
-				this.$root.dialog({
-					title: this.$t('notificationType'),
-					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/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -1,69 +1,56 @@
 <template>
-<div class="mk-dialog" :class="{ iconOnly }">
-	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<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">
-			<template v-if="type == 'signin'">
-				<mk-signin/>
+<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
+	<div class="mk-dialog">
+		<div class="icon" v-if="icon">
+			<Fa :icon="icon"/>
+		</div>
+		<div class="icon" v-else-if="!input && !select" :class="type">
+			<Fa :icon="faCheck" v-if="type === 'success'"/>
+			<Fa :icon="faTimesCircle" v-if="type === 'error'"/>
+			<Fa :icon="faExclamationTriangle" v-if="type === 'warning'"/>
+			<Fa :icon="faInfoCircle" v-if="type === 'info'"/>
+			<Fa :icon="faQuestionCircle" v-if="type === 'question'"/>
+			<Fa :icon="faSpinner" pulse v-if="type === 'waiting'"/>
+		</div>
+		<header v-if="title"><Mfm :text="title"/></header>
+		<div class="body" v-if="text"><Mfm :text="text"/></div>
+		<MkInput v-if="input" v-model:value="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></MkInput>
+		<MkSelect v-if="select" v-model:value="selectedValue" autofocus>
+			<template v-if="select.items">
+				<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
 			</template>
 			<template v-else>
-				<div class="icon" v-if="icon">
-					<fa :icon="icon"/>
-				</div>
-				<div class="icon" v-else-if="!input && !select && !user" :class="type">
-					<fa :icon="faCheck" v-if="type === 'success'"/>
-					<fa :icon="faTimesCircle" v-if="type === 'error'"/>
-					<fa :icon="faExclamationTriangle" v-if="type === 'warning'"/>
-					<fa :icon="faInfoCircle" v-if="type === 'info'"/>
-					<fa :icon="faQuestionCircle" v-if="type === 'question'"/>
-					<fa :icon="faSpinner" pulse v-if="type === 'waiting'"/>
-				</div>
-				<header v-if="title" v-html="title"></header>
-				<header v-if="title == null && user">{{ $t('enterUsername') }}</header>
-				<div class="body" v-if="text" v-html="text"></div>
-				<mk-input v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></mk-input>
-				<mk-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><template #prefix>@</template></mk-input>
-				<mk-select v-if="select" v-model="selectedValue" autofocus>
-					<template v-if="select.items">
-						<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
-					</template>
-					<template v-else>
-						<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
-							<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
-						</optgroup>
-					</template>
-				</mk-select>
-				<div class="buttons" v-if="!iconOnly && (showOkButton || showCancelButton) && !actions">
-					<mk-button inline @click="ok" v-if="showOkButton" primary :autofocus="!input && !select && !user" :disabled="!canOk">{{ (showCancelButton || input || select || user) ? $t('ok') : $t('gotIt') }}</mk-button>
-					<mk-button inline @click="cancel" v-if="showCancelButton || input || select || user">{{ $t('cancel') }}</mk-button>
-				</div>
-				<div class="buttons" v-if="actions">
-					<mk-button v-for="action in actions" inline @click="() => { action.callback(); close(); }" :primary="action.primary" :key="action.text">{{ action.text }}</mk-button>
-				</div>
+				<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
+					<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
+				</optgroup>
 			</template>
+		</MkSelect>
+		<div class="buttons" v-if="(showOkButton || showCancelButton) && !actions">
+			<MkButton inline @click="ok" v-if="showOkButton" primary :autofocus="!input && !select">{{ (showCancelButton || input || select) ? $t('ok') : $t('gotIt') }}</MkButton>
+			<MkButton inline @click="cancel" v-if="showCancelButton || input || select">{{ $t('cancel') }}</MkButton>
 		</div>
-	</transition>
-</div>
+		<div class="buttons" v-if="actions">
+			<MkButton v-for="action in actions" inline @click="() => { action.callback(); close(); }" :primary="action.primary" :key="action.text">{{ action.text }}</MkButton>
+		</div>
+	</div>
+</MkModal>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faInfoCircle, faExclamationTriangle, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
-import MkButton from './ui/button.vue';
-import MkInput from './ui/input.vue';
-import MkSelect from './ui/select.vue';
-import MkSignin from './signin.vue';
-import parseAcct from '../../misc/acct/parse';
+import MkModal from '@/components/ui/modal.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInput from '@/components/ui/input.vue';
+import MkSelect from '@/components/ui/select.vue';

-export default Vue.extend({
+export default defineComponent({
 	components: {
+		MkModal,
 		MkButton,
 		MkInput,
 		MkSelect,
-		MkSignin,
 	},

 	props: {
@@ -86,9 +73,6 @@ export default Vue.extend({
 		select: {
 			required: false
 		},
-		user: {
-			required: false
-		},
 		icon: {
 			required: false
 		},
@@ -107,87 +91,44 @@ export default Vue.extend({
 			type: Boolean,
 			default: true
 		},
-		iconOnly: {
-			type: Boolean,
-			default: false
-		},
-		autoClose: {
-			type: Boolean,
-			default: false
-		}
 	},

+	emits: ['done', 'closed'],
+
 	data() {
 		return {
-			show: true,
 			inputValue: this.input && this.input.default ? this.input.default : null,
-			userInputValue: null,
 			selectedValue: this.select ? this.select.default ? this.select.default : this.select.items ? this.select.items[0].value : this.select.groupedItems[0].items[0].value : null,
-			canOk: true,
 			faTimesCircle, faQuestionCircle, faSpinner, faInfoCircle, faExclamationTriangle, faCheck
 		};
 	},

-	watch: {
-		userInputValue() {
-			if (this.user) {
-				this.$root.api('users/show', parseAcct(this.userInputValue)).then(u => {
-					this.canOk = u != null;
-				}).catch(() => {
-					this.canOk = false;
-				});
-			}
-		}
-	},
-
 	mounted() {
-		if (this.user) this.canOk = false;
-
-		if (this.autoClose) {
-			setTimeout(() => {
-				this.close();
-			}, 1000);
-		}
-
 		document.addEventListener('keydown', this.onKeydown);
 	},

-	beforeDestroy() {
+	beforeUnmount() {
 		document.removeEventListener('keydown', this.onKeydown);
 	},

 	methods: {
+		done(canceled, result?) {
+			this.$emit('done', { canceled, result });
+			this.$refs.modal.close();
+		},
+
 		async ok() {
-			if (!this.canOk) return;
 			if (!this.showOkButton) return;

-			if (this.user) {
-				const user = await this.$root.api('users/show', parseAcct(this.userInputValue));
-				if (user) {
-					this.$emit('ok', user);
-					this.close();
-				}
-			} else {
-				const result =
-					this.input ? this.inputValue :
-					this.select ? this.selectedValue :
-					true;
-				this.$emit('ok', result);
-				this.close();
-			}
+			const result =
+				this.input ? this.inputValue :
+				this.select ? this.selectedValue :
+				true;
+			this.done(false, result);
 		},

 		cancel() {
-			this.$emit('cancel');
-			this.close();
-		},
-
-		close() {
-			if (!this.show) return;
-			this.show = false;
-			this.$el.style.pointerEvents = 'none';
-			(this.$refs.bg as any).style.pointerEvents = 'none';
-			(this.$refs.main as any).style.pointerEvents = 'none';
+			this.done(true);
 		},

 		onBgClick() {
@@ -214,95 +155,60 @@ export default Vue.extend({
 </script>

 <style lang="scss" scoped>
-.dialog-enter-active, .dialog-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.dialog-enter, .dialog-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.bg-fade-enter-active, .bg-fade-leave-active {
-	transition: opacity 0.3s !important;
-}
-.bg-fade-enter, .bg-fade-leave-to {
-	opacity: 0;
-}
-
 .mk-dialog {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: fixed;
-	z-index: 30000;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);

-	&.iconOnly > .main {
-		min-width: 0;
-		width: initial;
+	> .icon {
+		font-size: 32px;
+
+		&.success {
+			color: var(--success);
+		}
+
+		&.error {
+			color: var(--error);
+		}
+
+		&.warning {
+			color: var(--warn);
+		}
+
+		> * {
+			display: block;
+			margin: 0 auto;
+		}
+
+		& + header {
+			margin-top: 16px;
+		}
 	}

-	> .main {
-		display: block;
-		position: fixed;
-		margin: auto;
-		padding: 32px;
-		min-width: 320px;
-		max-width: 480px;
-		box-sizing: border-box;
-		width: calc(100% - 32px);
-		text-align: center;
-		background: var(--panel);
-		border-radius: var(--radius);
+	> header {
+		margin: 0 0 8px 0;
+		font-weight: bold;
+		font-size: 20px;

-		> .icon {
-			font-size: 32px;
-
-			&.success {
-				color: var(--accent);
-			}
-
-			&.error {
-				color: #ec4137;
-			}
-
-			&.warning {
-				color: #ecb637;
-			}
-
-			> * {
-				display: block;
-				margin: 0 auto;
-			}
-
-			& + header {
-				margin-top: 16px;
-			}
+		& + .body {
+			margin-top: 8px;
 		}
+	}

-		> header {
-			margin: 0 0 8px 0;
-			font-weight: bold;
-			font-size: 20px;
+	> .body {
+		margin: 16px 0 0 0;
+	}

-			& + .body {
-				margin-top: 8px;
-			}
-		}
+	> .buttons {
+		margin-top: 16px;

-		> .body {
-			margin: 16px 0 0 0;
-		}
-
-		> .buttons {
-			margin-top: 16px;
-
-			> * {
-				margin: 0 8px;
-			}
+		> * {
+			margin: 0 8px;
 		}
 	}
 }
--- a/src/client/components/drive-file-thumbnail.vue
+++ b/src/client/components/drive-file-thumbnail.vue
@@ -1,20 +1,20 @@
 <template>
 <div class="zdjebgpv" ref="thumbnail">
-	<img-with-blurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
-	<fa :icon="faFileImage" class="icon" v-else-if="is === 'image'"/>
-	<fa :icon="faFileVideo" class="icon" v-else-if="is === 'video'"/>
-	<fa :icon="faMusic" class="icon" v-else-if="is === 'audio' || is === 'midi'"/>
-	<fa :icon="faFileCsv" class="icon" v-else-if="is === 'csv'"/>
-	<fa :icon="faFilePdf" class="icon" v-else-if="is === 'pdf'"/>
-	<fa :icon="faFileAlt" class="icon" v-else-if="is === 'textfile'"/>
-	<fa :icon="faFileArchive" class="icon" v-else-if="is === 'archive'"/>
-	<fa :icon="faFile" class="icon" v-else/>
-	<fa :icon="faFilm" class="icon-sub" v-if="isThumbnailAvailable && is === 'video'"/>
+	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :style="`object-fit: ${ fit }`"/>
+	<Fa :icon="faFileImage" class="icon" v-else-if="is === 'image'"/>
+	<Fa :icon="faFileVideo" class="icon" v-else-if="is === 'video'"/>
+	<Fa :icon="faMusic" class="icon" v-else-if="is === 'audio' || is === 'midi'"/>
+	<Fa :icon="faFileCsv" class="icon" v-else-if="is === 'csv'"/>
+	<Fa :icon="faFilePdf" class="icon" v-else-if="is === 'pdf'"/>
+	<Fa :icon="faFileAlt" class="icon" v-else-if="is === 'textfile'"/>
+	<Fa :icon="faFileArchive" class="icon" v-else-if="is === 'archive'"/>
+	<Fa :icon="faFile" class="icon" v-else/>
+	<Fa :icon="faFilm" class="icon-sub" v-if="isThumbnailAvailable && is === 'video'"/>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import {
 	faFile,
 	faFileAlt,
@@ -28,7 +28,7 @@ import {
 	} from '@fortawesome/free-solid-svg-icons';
 import ImgWithBlurhash from './img-with-blurhash.vue';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		ImgWithBlurhash
 	},
--- a/src/client/components/drive-select-dialog.vue
+++ b/src/client/components/drive-select-dialog.vue
@@ -0,0 +1,70 @@
+<template>
+<XModalWindow ref="dialog"
+	:width="800"
+	:height="500"
+	:with-ok-button="true"
+	:ok-button-disabled="(type === 'file') && (selected.length === 0)"
+	@click="cancel()"
+	@close="cancel()"
+	@ok="ok()"
+	@closed="$emit('closed')"
+>
+	<template #header>
+		{{ multiple ? ((type === 'file') ? $t('selectFiles') : $t('selectFolders')) : ((type === 'file') ? $t('selectFile') : $t('selectFolder')) }}
+		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
+	</template>
+	<XDrive :multiple="multiple" @changeSelection="onChangeSelection" @selected="ok()" :select="type"/>
+</XModalWindow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XDrive from './drive.vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
+import number from '@/filters/number';
+
+export default defineComponent({
+	components: {
+		XDrive,
+		XModalWindow,
+	},
+
+	props: {
+		type: {
+			type: String,
+			required: false,
+			default: 'file'
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		}
+	},
+
+	emits: ['done', 'closed'],
+
+	data() {
+		return {
+			selected: []
+		};
+	},
+
+	methods: {
+		ok() {
+			this.$emit('done', this.selected);
+			this.$refs.dialog.close();
+		},
+
+		cancel() {
+			this.$emit('done');
+			this.$refs.dialog.close();
+		},
+
+		onChangeSelection(xs) {
+			this.selected = xs;
+		},
+
+		number
+	}
+});
+</script>
--- a/src/client/components/drive-window.vue
+++ b/src/client/components/drive-window.vue
@@ -1,53 +1,44 @@
 <template>
-<x-window ref="window" :width="800" :height="500" @closed="() => { $emit('closed'); destroyDom(); }" :with-ok-button="true" :ok-button-disabled="(type === 'file') && (selected.length === 0)" @ok="ok()">
+<XWindow ref="window"
+	:initial-width="800"
+	:initial-height="500"
+	:can-resize="true"
+	@closed="$emit('closed')"
+>
 	<template #header>
-		{{ multiple ? ((type === 'file') ? $t('selectFiles') : $t('selectFolders')) : ((type === 'file') ? $t('selectFile') : $t('selectFolder')) }}
-		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length | number }})</span>
+		{{ $t('drive') }}
 	</template>
-	<div>
-		<x-drive :multiple="multiple" @change-selection="onChangeSelection" :select="type"/>
-	</div>
-</x-window>
+	<XDrive :initial-folder="initialFolder"/>
+</XWindow>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XDrive from './drive.vue';
-import XWindow from './window.vue';
+import XWindow from '@/components/ui/window.vue';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XDrive,
 		XWindow,
 	},

 	props: {
-		type: {
-			type: String,
-			required: false,
-			default: 'file' 
+		initialFolder: {
+			type: Object,
+			required: false
 		},
-		multiple: {
-			type: Boolean,
-			default: false
-		}
 	},

+	emits: ['closed'],
+
 	data() {
 		return {
-			selected: []
 		};
 	},

 	methods: {
-		ok() {
-			this.$emit('selected', this.selected);
-			this.$refs.window.close();
-		},

-		onChangeSelection(xs) {
-			this.selected = xs;
-		}
 	}
 });
 </script>
--- a/src/client/components/drive.file.vue
+++ b/src/client/components/drive.file.vue
@@ -1,7 +1,8 @@
 <template>
 <div class="ncvczrfv"
-	:data-is-selected="isSelected"
+	:class="{ isSelected }"
 	@click="onClick"
+	@contextmenu.stop="onContextmenu"
 	draggable="true"
 	@dragstart="onDragstart"
 	@dragend="onDragend"
@@ -20,7 +21,7 @@
 		<p>{{ $t('nsfw') }}</p>
 	</div>

-	<x-file-thumbnail class="thumbnail" :file="file" fit="contain"/>
+	<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>

 	<p class="name">
 		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
@@ -30,17 +31,17 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import copyToClipboard from '../scripts/copy-to-clipboard';
-//import updateAvatar from '../api/update-avatar';
-//import updateBanner from '../api/update-banner';
-import XFileThumbnail from './drive-file-thumbnail.vue';
 import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
+import bytes from '../filters/bytes';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XFileThumbnail
+		MkDriveFileThumbnail
 	},

 	props: {
@@ -60,6 +61,8 @@ export default Vue.extend({
 		}
 	},

+	emits: ['chosen'],
+
 	data() {
 		return {
 			isDragging: false
@@ -72,48 +75,54 @@ export default Vue.extend({
 			return this.$parent;
 		},
 		title(): string {
-			return `${this.file.name}\n${this.file.type} ${Vue.filter('bytes')(this.file.size)}`;
+			return `${this.file.name}\n${this.file.type} ${bytes(this.file.size)}`;
 		}
 	},

 	methods: {
+		getMenu() {
+			return [{
+				text: this.$t('rename'),
+				icon: faICursor,
+				action: this.rename
+			}, {
+				text: this.file.isSensitive ? this.$t('unmarkAsSensitive') : this.$t('markAsSensitive'),
+				icon: this.file.isSensitive ? faEye : faEyeSlash,
+				action: this.toggleSensitive
+			}, null, {
+				text: this.$t('copyUrl'),
+				icon: faLink,
+				action: this.copyUrl
+			}, {
+				type: 'a',
+				href: this.file.url,
+				target: '_blank',
+				text: this.$t('download'),
+				icon: faDownload,
+				download: this.file.name
+			}, null, {
+				text: this.$t('delete'),
+				icon: faTrashAlt,
+				danger: true,
+				action: this.deleteFile
+			}];
+		},
+
 		onClick(ev) {
 			if (this.selectMode) {
 				this.$emit('chosen', this.file);
 			} else {
-				this.$root.menu({
-					items: [{
-						text: this.$t('rename'),
-						icon: faICursor,
-						action: this.rename
-					}, {
-						text: this.file.isSensitive ? this.$t('unmarkAsSensitive') : this.$t('markAsSensitive'),
-						icon: this.file.isSensitive ? faEye : faEyeSlash,
-						action: this.toggleSensitive
-					}, null, {
-						text: this.$t('copyUrl'),
-						icon: faLink,
-						action: this.copyUrl
-					}, {
-						type: 'a',
-						href: this.file.url,
-						target: '_blank',
-						text: this.$t('download'),
-						icon: faDownload,
-						download: this.file.name
-					}, null, {
-						text: this.$t('delete'),
-						icon: faTrashAlt,
-						action: this.deleteFile
-					}],
-					source: ev.currentTarget || ev.target,
-				});
+				os.modalMenu(this.getMenu(), ev.currentTarget || ev.target);
 			}
 		},

+		onContextmenu(e) {
+			os.contextMenu(this.getMenu(), e);
+		},
+
 		onDragstart(e) {
 			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('mk_drive_file', JSON.stringify(this.file));
+			e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(this.file));
 			this.isDragging = true;

 			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
@@ -127,7 +136,7 @@ export default Vue.extend({
 		},

 		rename() {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('renameFile'),
 				input: {
 					placeholder: this.$t('inputNewFileName'),
@@ -136,7 +145,7 @@ export default Vue.extend({
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: this.file.id,
 					name: name
 				});
@@ -144,7 +153,7 @@ export default Vue.extend({
 		},

 		toggleSensitive() {
-			this.$root.api('drive/files/update', {
+			os.api('drive/files/update', {
 				fileId: this.file.id,
 				isSensitive: !this.file.isSensitive
 			});
@@ -152,18 +161,15 @@ export default Vue.extend({

 		copyUrl() {
 			copyToClipboard(this.file.url);
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.success();
 		},

 		setAsAvatar() {
-			updateAvatar(this.$root)(this.file);
+			os.updateAvatar(this.file);
 		},

 		setAsBanner() {
-			updateBanner(this.$root)(this.file);
+			os.updateBanner(this.file);
 		},

 		addApp() {
@@ -171,17 +177,19 @@ export default Vue.extend({
 		},

 		async deleteFile() {
-			const { canceled } = await this.$root.dialog({
+			const { canceled } = await os.dialog({
 				type: 'warning',
 				text: this.$t('driveFileDeleteConfirm', { name: this.file.name }),
 				showCancelButton: true
 			});
 			if (canceled) return;

-			this.$root.api('drive/files/delete', {
+			os.api('drive/files/delete', {
 				fileId: this.file.id
 			});
-		}
+		},
+
+		bytes
 	}
 });
 </script>
@@ -197,6 +205,10 @@ export default Vue.extend({
 		cursor: pointer;
 	}

+	> * {
+		pointer-events: none;
+	}
+
 	&:hover {
 		background: rgba(#000, 0.05);

@@ -233,7 +245,7 @@ export default Vue.extend({
 		}
 	}

-	&[data-is-selected] {
+	&.isSelected {
 		background: var(--accent);

 		&:hover {
--- a/src/client/components/drive.folder.vue
+++ b/src/client/components/drive.folder.vue
@@ -1,7 +1,8 @@
 <template>
 <div class="rghtznwe"
-	:data-draghover="draghover"
+	:class="{ draghover }"
 	@click="onClick"
+	@contextmenu.stop="onContextmenu"
 	@mouseover="onMouseover"
 	@mouseout="onMouseout"
 	@dragover.prevent.stop="onDragover"
@@ -14,8 +15,8 @@
 	:title="title"
 >
 	<p class="name">
-		<template v-if="hover"><fa :icon="faFolderOpen" fixed-width/></template>
-		<template v-if="!hover"><fa :icon="faFolder" fixed-width/></template>
+		<template v-if="hover"><Fa :icon="faFolderOpen" fixed-width/></template>
+		<template v-if="!hover"><Fa :icon="faFolder" fixed-width/></template>
 		{{ folder.name }}
 	</p>
 	<p class="upload" v-if="$store.state.settings.uploadFolder == folder.id">
@@ -26,10 +27,12 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
-import { faFolder, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
+import { defineComponent } from 'vue';
+import { faFolder, faFolderOpen, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
+import * as os from '@/os';
+import { faICursor } from '@fortawesome/free-solid-svg-icons';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		folder: {
 			type: Object,
@@ -47,6 +50,8 @@ export default Vue.extend({
 		}
 	},

+	emits: ['chosen'],
+
 	data() {
 		return {
 			hover: false,
@@ -91,8 +96,8 @@ export default Vue.extend({
 			}

 			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
-			const isDriveFolder = e.dataTransfer.types[0] == 'mk_drive_folder';
+			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
+			const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;

 			if (isFile || isDriveFile || isDriveFolder) {
 				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
@@ -121,11 +126,11 @@ export default Vue.extend({
 			}

 			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				this.browser.removeFile(file.id);
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: file.id,
 					folderId: this.folder.id
 				});
@@ -133,7 +138,7 @@ export default Vue.extend({
 			//#endregion

 			//#region ドライブのフォルダ
-			const driveFolder = e.dataTransfer.getData('mk_drive_folder');
+			const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
 			if (driveFolder != null && driveFolder != '') {
 				const folder = JSON.parse(driveFolder);

@@ -141,7 +146,7 @@ export default Vue.extend({
 				if (folder.id == this.folder.id) return;

 				this.browser.removeFolder(folder.id);
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					parentId: this.folder.id
 				}).then(() => {
@@ -149,15 +154,15 @@ export default Vue.extend({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$root.dialog({
+							os.dialog({
 								title: this.$t('unableToProcess'),
 								text: this.$t('circularReferenceFolder')
 							});
 							break;
 						default:
-							this.$root.dialog({
+							os.dialog({
 								type: 'error',
-								text: this.$t('error')
+								text: this.$t('somethingHappened')
 							});
 					}
 				});
@@ -167,7 +172,7 @@ export default Vue.extend({

 		onDragstart(e) {
 			e.dataTransfer.effectAllowed = 'move';
-			e.dataTransfer.setData('mk_drive_folder', JSON.stringify(this.folder));
+			e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(this.folder));
 			this.isDragging = true;

 			// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
@@ -189,7 +194,7 @@ export default Vue.extend({
 		},

 		rename() {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('renameFolder'),
 				input: {
 					placeholder: this.$t('inputNewFolderName'),
@@ -197,7 +202,7 @@ export default Vue.extend({
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: this.folder.id,
 					name: name
 				});
@@ -205,7 +210,7 @@ export default Vue.extend({
 		},

 		deleteFolder() {
-			this.$root.api('drive/folders/delete', {
+			os.api('drive/folders/delete', {
 				folderId: this.folder.id
 			}).then(() => {
 				if (this.$store.state.settings.uploadFolder === this.folder.id) {
@@ -217,14 +222,14 @@ export default Vue.extend({
 			}).catch(err => {
 				switch(err.id) {
 					case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							title: this.$t('unableToDelete'),
 							text: this.$t('hasChildFilesOrFolders')
 						});
 						break;
 					default:
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							text: this.$t('unableToDelete')
 						});
@@ -238,6 +243,28 @@ export default Vue.extend({
 				value: this.folder.id
 			});
 		},
+
+		onContextmenu(e) {
+			os.contextMenu([{
+				text: this.$t('openInWindow'),
+				icon: faWindowRestore,
+				action: () => {
+					os.popup(import('./drive-window.vue'), {
+						initialFolder: this.folder
+					}, {
+					}, 'closed');
+				}
+			}, null, {
+				text: this.$t('rename'),
+				icon: faICursor,
+				action: this.rename
+			}, null, {
+				text: this.$t('delete'),
+				icon: faTrashAlt,
+				danger: true,
+				action: this.deleteFolder
+			}], e);
+		},
 	}
 });
 </script>
@@ -272,7 +299,7 @@ export default Vue.extend({
 		}
 	}

-	&[data-draghover] {
+	&.draghover {
 		&:after {
 			content: "";
 			pointer-events: none;
--- a/src/client/components/drive.nav-folder.vue
+++ b/src/client/components/drive.nav-folder.vue
@@ -1,22 +1,23 @@
 <template>
 <div class="drylbebk"
-	:data-draghover="draghover"
+	:class="{ draghover }"
 	@click="onClick"
 	@dragover.prevent.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
-	<i v-if="folder == null"><fa :icon="faCloud"/></i>
+	<i v-if="folder == null"><Fa :icon="faCloud"/></i>
 	<span>{{ folder == null ? $t('drive') : folder.name }}</span>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCloud } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		folder: {
 			type: Object,
@@ -58,8 +59,8 @@ export default Vue.extend({
 			}

 			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
-			const isDriveFolder = e.dataTransfer.types[0] == 'mk_drive_folder';
+			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
+			const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;

 			if (isFile || isDriveFile || isDriveFolder) {
 				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
@@ -90,11 +91,11 @@ export default Vue.extend({
 			}

 			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				this.browser.removeFile(file.id);
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: file.id,
 					folderId: this.folder ? this.folder.id : null
 				});
@@ -102,13 +103,13 @@ export default Vue.extend({
 			//#endregion

 			//#region ドライブのフォルダ
-			const driveFolder = e.dataTransfer.getData('mk_drive_folder');
+			const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
 			if (driveFolder != null && driveFolder != '') {
 				const folder = JSON.parse(driveFolder);
 				// 移動先が自分自身ならreject
 				if (this.folder && folder.id == this.folder.id) return;
 				this.browser.removeFolder(folder.id);
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					parentId: this.folder ? this.folder.id : null
 				});
@@ -125,7 +126,7 @@ export default Vue.extend({
 		pointer-events: none;
 	}

-	&[data-draghover] {
+	&.draghover {
 		background: #eee;
 	}

--- a/src/client/components/drive.vue
+++ b/src/client/components/drive.vue
@@ -2,34 +2,35 @@
 <div class="yfudmmck">
 	<nav>
 		<div class="path" @contextmenu.prevent.stop="() => {}">
-			<x-nav-folder :class="{ current: folder == null }"/>
+			<XNavFolder :class="{ current: folder == null }"/>
 			<template v-for="f in hierarchyFolders">
-				<span class="separator" :key="f.id + ':separator'"><fa :icon="faAngleRight"/></span>
-				<x-nav-folder :folder="f" :key="f.id"/>
+				<span class="separator"><Fa :icon="faAngleRight"/></span>
+				<XNavFolder :folder="f"/>
 			</template>
-			<span class="separator" v-if="folder != null"><fa :icon="faAngleRight"/></span>
+			<span class="separator" v-if="folder != null"><Fa :icon="faAngleRight"/></span>
 			<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
 		</div>
 	</nav>
-	<div class="main" :class="{ uploading: uploadings.length > 0, fetching }"
+	<div class="main _section" :class="{ uploading: uploadings.length > 0, fetching }"
 		ref="main"
 		@dragover.prevent.stop="onDragover"
 		@dragenter="onDragenter"
 		@dragleave="onDragleave"
 		@drop.prevent.stop="onDrop"
+		@contextmenu="onContextmenu"
 	>
 		<div class="contents" ref="contents">
 			<div class="folders" ref="foldersContainer" v-show="folders.length > 0">
-				<x-folder v-for="f in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
+				<XFolder v-for="f in folders" :key="f.id" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
-				<mk-button ref="moreFolders" v-if="moreFolders">{{ $t('loadMore') }}</mk-button>
+				<MkButton ref="moreFolders" v-if="moreFolders">{{ $t('loadMore') }}</MkButton>
 			</div>
 			<div class="files" ref="filesContainer" v-show="files.length > 0">
-				<x-file v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
+				<XFile v-for="file in files" :key="file.id" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
 				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
 				<div class="padding" v-for="(n, i) in 16" :key="i"></div>
-				<mk-button ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $t('loadMore') }}</mk-button>
+				<MkButton ref="loadMoreFiles" @click="fetchMoreFiles" v-show="moreFiles">{{ $t('loadMore') }}</MkButton>
 			</div>
 			<div class="empty" v-if="files.length == 0 && folders.length == 0 && !fetching">
 				<p v-if="draghover">{{ $t('empty-draghover') }}</p>
@@ -37,34 +38,33 @@
 				<p v-if="!draghover && folder != null">{{ $t('emptyFolder') }}</p>
 			</div>
 		</div>
-		<mk-loading v-if="fetching"/>
+		<MkLoading v-if="fetching"/>
 	</div>
 	<div class="dropzone" v-if="draghover"></div>
-	<x-uploader ref="uploader" @change="onChangeUploaderUploads" @uploaded="onUploaderUploaded"/>
 	<input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" @change="onChangeFileInput"/>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
-import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import { defineComponent } from 'vue';
+import { faAngleRight, faFolderPlus, faICursor, faLink, faUpload } from '@fortawesome/free-solid-svg-icons';
 import XNavFolder from './drive.nav-folder.vue';
 import XFolder from './drive.folder.vue';
 import XFile from './drive.file.vue';
-import XUploader from './uploader.vue';
 import MkButton from './ui/button.vue';
+import * as os from '@/os';
+import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNavFolder,
 		XFolder,
 		XFile,
-		XUploader,
 		MkButton,
 	},

 	props: {
-		initFolder: {
+		initialFolder: {
 			type: Object,
 			required: false
 		},
@@ -85,6 +85,8 @@ export default Vue.extend({
 		}
 	},

+	emits: ['selected', 'change-selection', 'move-root', 'cd', 'open-folder'],
+
 	data() {
 		return {
 			/**
@@ -100,7 +102,7 @@ export default Vue.extend({
 			hierarchyFolders: [],
 			selectedFiles: [],
 			selectedFolders: [],
-			uploadings: [],
+			uploadings: os.uploads,
 			connection: null,

 			/**
@@ -140,7 +142,7 @@ export default Vue.extend({
 			});
 		}

-		this.connection = this.$root.stream.useSharedConnection('drive');
+		this.connection = os.stream.useSharedConnection('drive');

 		this.connection.on('fileCreated', this.onStreamDriveFileCreated);
 		this.connection.on('fileUpdated', this.onStreamDriveFileUpdated);
@@ -149,8 +151,8 @@ export default Vue.extend({
 		this.connection.on('folderUpdated', this.onStreamDriveFolderUpdated);
 		this.connection.on('folderDeleted', this.onStreamDriveFolderDeleted);

-		if (this.initFolder) {
-			this.move(this.initFolder);
+		if (this.initialFolder) {
+			this.move(this.initialFolder);
 		} else {
 			this.fetch();
 		}
@@ -164,7 +166,7 @@ export default Vue.extend({
 		}
 	},

-	beforeDestroy() {
+	beforeUnmount() {
 		this.connection.dispose();
 		this.ilFilesObserver.disconnect();
 	},
@@ -204,14 +206,6 @@ export default Vue.extend({
 			this.removeFolder(folderId);
 		},

-		onChangeUploaderUploads(uploads) {
-			this.uploadings = uploads;
-		},
-
-		onUploaderUploaded(file) {
-			this.addFile(file, true);
-		},
-
 		onDragover(e): any {
 			// ドラッグ元が自分自身の所有するアイテムだったら
 			if (this.isDragSource) {
@@ -221,8 +215,8 @@ export default Vue.extend({
 			}

 			const isFile = e.dataTransfer.items[0].kind == 'file';
-			const isDriveFile = e.dataTransfer.types[0] == 'mk_drive_file';
-			const isDriveFolder = e.dataTransfer.types[0] == 'mk_drive_folder';
+			const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
+			const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;

 			if (isFile || isDriveFile || isDriveFolder) {
 				e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
@@ -253,12 +247,12 @@ export default Vue.extend({
 			}

 			//#region ドライブのファイル
-			const driveFile = e.dataTransfer.getData('mk_drive_file');
+			const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 			if (driveFile != null && driveFile != '') {
 				const file = JSON.parse(driveFile);
 				if (this.files.some(f => f.id == file.id)) return;
 				this.removeFile(file.id);
-				this.$root.api('drive/files/update', {
+				os.api('drive/files/update', {
 					fileId: file.id,
 					folderId: this.folder ? this.folder.id : null
 				});
@@ -266,7 +260,7 @@ export default Vue.extend({
 			//#endregion

 			//#region ドライブのフォルダ
-			const driveFolder = e.dataTransfer.getData('mk_drive_folder');
+			const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
 			if (driveFolder != null && driveFolder != '') {
 				const folder = JSON.parse(driveFolder);

@@ -274,7 +268,7 @@ export default Vue.extend({
 				if (this.folder && folder.id == this.folder.id) return false;
 				if (this.folders.some(f => f.id == folder.id)) return false;
 				this.removeFolder(folder.id);
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					parentId: this.folder ? this.folder.id : null
 				}).then(() => {
@@ -282,15 +276,15 @@ export default Vue.extend({
 				}).catch(err => {
 					switch (err) {
 						case 'detected-circular-definition':
-							this.$root.dialog({
+							os.dialog({
 								title: this.$t('unableToProcess'),
 								text: this.$t('circularReferenceFolder')
 							});
 							break;
 						default:
-							this.$root.dialog({
+							os.dialog({
 								type: 'error',
-								text: this.$t('error')
+								text: this.$t('somethingHappened')
 							});
 					}
 				});
@@ -303,19 +297,19 @@ export default Vue.extend({
 		},

 		urlUpload() {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('uploadFromUrl'),
 				input: {
 					placeholder: this.$t('uploadFromUrlDescription')
 				}
 			}).then(({ canceled, result: url }) => {
 				if (canceled) return;
-				this.$root.api('drive/files/upload_from_url', {
+				os.api('drive/files/upload_from_url', {
 					url: url,
 					folderId: this.folder ? this.folder.id : undefined
 				});

-				this.$root.dialog({
+				os.dialog({
 					title: this.$t('uploadFromUrlRequested'),
 					text: this.$t('uploadFromUrlMayTakeTime')
 				});
@@ -323,14 +317,14 @@ export default Vue.extend({
 		},

 		createFolder() {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('createFolder'),
 				input: {
 					placeholder: this.$t('folderName')
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/folders/create', {
+				os.api('drive/folders/create', {
 					name: name,
 					parentId: this.folder ? this.folder.id : undefined
 				}).then(folder => {
@@ -340,7 +334,7 @@ export default Vue.extend({
 		},

 		renameFolder(folder) {
-			this.$root.dialog({
+			os.dialog({
 				title: this.$t('renameFolder'),
 				input: {
 					placeholder: this.$t('inputNewFolderName'),
@@ -348,7 +342,7 @@ export default Vue.extend({
 				}
 			}).then(({ canceled, result: name }) => {
 				if (canceled) return;
-				this.$root.api('drive/folders/update', {
+				os.api('drive/folders/update', {
 					folderId: folder.id,
 					name: name
 				}).then(folder => {
@@ -359,7 +353,7 @@ export default Vue.extend({
 		},

 		deleteFolder(folder) {
-			this.$root.api('drive/folders/delete', {
+			os.api('drive/folders/delete', {
 				folderId: folder.id
 			}).then(() => {
 				// 削除時に親フォルダに移動
@@ -367,14 +361,14 @@ export default Vue.extend({
 			}).catch(err => {
 				switch(err.id) {
 					case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							title: this.$t('unableToDelete'),
 							text: this.$t('hasChildFilesOrFolders')
 						});
 						break;
 					default:
-						this.$root.dialog({
+						os.dialog({
 							type: 'error',
 							text: this.$t('unableToDelete')
 						});
@@ -390,7 +384,9 @@ export default Vue.extend({

 		upload(file, folder) {
 			if (folder && typeof folder == 'object') folder = folder.id;
-			(this.$refs.uploader as any).upload(file, folder);
+			os.upload(file, folder).then(res => {
+				this.addFile(res, true);
+			});
 		},

 		chooseFile(file) {
@@ -441,7 +437,7 @@ export default Vue.extend({

 			this.fetching = true;

-			this.$root.api('drive/folders/show', {
+			os.api('drive/folders/show', {
 				folderId: target
 			}).then(folder => {
 				this.folder = folder;
@@ -465,7 +461,7 @@ export default Vue.extend({

 			if (this.folders.some(f => f.id == folder.id)) {
 				const exist = this.folders.map(f => f.id).indexOf(folder.id);
-				Vue.set(this.folders, exist, folder);
+				this.folders[exist] = folder;
 				return;
 			}

@@ -482,7 +478,7 @@ export default Vue.extend({

 			if (this.files.some(f => f.id == file.id)) {
 				const exist = this.files.map(f => f.id).indexOf(file.id);
-				Vue.set(this.files, exist, file);
+				this.files[exist] = file;
 				return;
 			}

@@ -543,7 +539,7 @@ export default Vue.extend({
 			const filesMax = 30;

 			// フォルダ一覧取得
-			this.$root.api('drive/folders', {
+			os.api('drive/folders', {
 				folderId: this.folder ? this.folder.id : null,
 				limit: foldersMax + 1
 			}).then(folders => {
@@ -556,7 +552,7 @@ export default Vue.extend({
 			});

 			// ファイル一覧取得
-			this.$root.api('drive/files', {
+			os.api('drive/files', {
 				folderId: this.folder ? this.folder.id : null,
 				type: this.type,
 				limit: filesMax + 1
@@ -587,7 +583,7 @@ export default Vue.extend({
 			const max = 30;

 			// ファイル一覧取得
-			this.$root.api('drive/files', {
+			os.api('drive/files', {
 				folderId: this.folder ? this.folder.id : null,
 				type: this.type,
 				untilId: this.files[this.files.length - 1].id,
@@ -602,17 +598,57 @@ export default Vue.extend({
 				for (const x of files) this.appendFile(x);
 				this.fetching = false;
 			});
-		}
+		},
+
+		getMenu() {
+			return [{
+				text: this.$t('addFile'),
+				type: 'label'
+			}, {
+				text: this.$t('upload'),
+				icon: faUpload,
+				action: () => { this.selectLocalFile(); }
+			}, {
+				text: this.$t('fromUrl'),
+				icon: faLink,
+				action: () => { this.urlUpload(); }
+			}, null, {
+				text: this.folder ? this.folder.name : this.$t('drive'),
+				type: 'label'
+			}, this.folder ? {
+				text: this.$t('renameFolder'),
+				icon: faICursor,
+				action: () => { this.renameFolder(this.folder); }
+			} : undefined, this.folder ? {
+				text: this.$t('deleteFolder'),
+				icon: faTrashAlt,
+				action: () => { this.deleteFolder(this.folder); }
+			} : undefined, {
+				text: this.$t('createFolder'),
+				icon: faFolderPlus,
+				action: () => { this.createFolder(); }
+			}];
+		},
+
+		onContextmenu(e) {
+			os.contextMenu(this.getMenu(), e);
+		},
 	}
 });
 </script>

 <style lang="scss" scoped>
 .yfudmmck {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
 	> nav {
 		display: block;
 		z-index: 2;
 		width: 100%;
+		padding: 0 8px;
+		box-sizing: border-box;
 		overflow: auto;
 		font-size: 0.9em;
 		box-shadow: 0 1px 0 var(--divider);
@@ -666,7 +702,7 @@ export default Vue.extend({
 	}

 	> .main {
-		padding: 8px 0;
+		flex: 1;
 		overflow: auto;

 		&, * {
@@ -734,11 +770,6 @@ export default Vue.extend({
 		pointer-events: none;
 	}

-	> .mk-uploader {
-		height: 100px;
-		padding: 16px;
-	}
-
 	> input {
 		display: none;
 	}
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -1,6 +1,6 @@
 <template>
-<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
-	<div class="omfetrab">
+<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div class="omfetrab _popup">
 		<header>
 			<button v-for="(category, i) in categories"
 				class="_button"
@@ -8,26 +8,26 @@
 				:class="{ active: category.isActive }"
 				:key="i"
 			>
-				<fa :icon="category.icon" fixed-width/>
+				<Fa :icon="category.icon" fixed-width/>
 			</button>
 		</header>

 		<div class="emojis">
 			<template v-if="categories[0].isActive">
-				<header class="category"><fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
+				<header class="category"><Fa :icon="faHistory" fixed-width/> {{ $t('recentUsed') }}</header>
 				<div class="list">
-					<button v-for="(emoji, i) in ($store.state.device.recentEmojis || [])"
+					<button v-for="emoji in ($store.state.device.recentEmojis || [])"
 						class="_button"
 						:title="emoji.name"
 						@click="chosen(emoji)"
-						:key="i"
+						:key="emoji"
 					>
-						<mk-emoji v-if="emoji.char != null" :emoji="emoji.char"/>
+						<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>
 						<img v-else :src="$store.state.device.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
 					</button>
 				</div>

-				<header class="category"><fa :icon="faAsterisk" fixed-width/> {{ $t('customEmojis') }}</header>
+				<header class="category"><Fa :icon="faAsterisk" fixed-width/> {{ $t('customEmojis') }}</header>
 			</template>

 			<template v-if="categories.find(x => x.isActive).name">
@@ -38,7 +38,7 @@
 						@click="chosen(emoji)"
 						:key="emoji.name"
 					>
-						<mk-emoji :emoji="emoji.char"/>
+						<MkEmoji :emoji="emoji.char"/>
 					</button>
 				</div>
 			</template>
@@ -59,32 +59,34 @@
 			</template>
 		</div>
 	</div>
-</x-popup>
+</MkModal>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import { emojilist } from '../../misc/emojilist';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faHistory, faUser } from '@fortawesome/free-solid-svg-icons';
 import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import { groupByX } from '../../prelude/array';
-import XPopup from './popup.vue';
+import MkModal from '@/components/ui/modal.vue';

-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XPopup,
+		MkModal,
 	},

 	props: {
-		source: {
-			required: true
+		src: {
+			required: false
 		},
 	},

+	emits: ['done', 'closed'],
+
 	data() {
 		return {
-			emojilist,
+			emojilist: markRaw(emojilist),
 			getStaticImageUrl,
 			customEmojis: {},
 			faGlobe, faHistory,
@@ -135,7 +137,7 @@ export default Vue.extend({
 	created() {
 		let local = this.$store.state.instance.meta.emojis;
 		local = groupByX(local, (x: any) => x.category || '');
-		this.customEmojis = local;
+		this.customEmojis = markRaw(local);
 	},

 	methods: {
@@ -162,12 +164,9 @@ export default Vue.extend({
 			recents = recents.filter((e: any) => getKey(e) !== getKey(emoji));
 			recents.unshift(emoji)
 			this.$store.commit('device/set', { key: 'recentEmojis', value: recents.splice(0, 16) });
-			this.$emit('chosen', getKey(emoji));
+			this.$emit('done', getKey(emoji));
+			this.$refs.modal.close();
 		},
-
-		close() {
-			this.$refs.popup.close();
-		}
 	}
 });
 </script>
@@ -186,7 +185,7 @@ export default Vue.extend({
 			transition: color 0.2s ease;

 			&:hover {
-				color: var(--textHighlighted);
+				color: var(--fgHighlighted);
 				transition: color 0s;
 			}

--- a/src/client/components/emoji.vue
+++ b/src/client/components/emoji.vue
@@ -6,11 +6,11 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { defineComponent } from 'vue';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { twemojiSvgBase } from '../../misc/twemoji-base';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		name: {
 			type: String,
--- a/src/client/components/error.vue
+++ b/src/client/components/error.vue
@@ -1,19 +1,19 @@
 <template>
 <transition :name="$store.state.device.animation ? 'zoom' : ''" appear>
-	<div class="mjndxjcg _panel">
+	<div class="mjndxjcg">
 		<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>
+		<p><Fa :icon="faExclamationTriangle"/> {{ $t('somethingHappened') }}</p>
+		<MkButton @click="() => $emit('retry')" class="button">{{ $t('retry') }}</MkButton>
 	</div>
 </transition>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from './ui/button.vue';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 	},
--- a/src/client/components/file-type-icon.vue
+++ b/src/client/components/file-type-icon.vue
@@ -1,14 +1,15 @@
 <template>
 <span class="mk-file-type-icon">
-	<template v-if="kind == 'image'"><fa :icon="faFileImage"/></template>
+	<template v-if="kind == 'image'"><Fa :icon="faFileImage"/></template>
 </span>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faFileImage } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,
--- a/src/client/components/follow-button.vue
+++ b/src/client/components/follow-button.vue
@@ -7,32 +7,33 @@
 >
 	<template v-if="!wait">
 		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
-			<span v-if="full">{{ $t('followRequestPending') }}</span><fa :icon="faHourglassHalf"/>
+			<span v-if="full">{{ $t('followRequestPending') }}</span><Fa :icon="faHourglassHalf"/>
 		</template>
 		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
-			<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse/>
+			<span v-if="full">{{ $t('processing') }}</span><Fa :icon="faSpinner" pulse/>
 		</template>
 		<template v-else-if="isFollowing">
-			<span v-if="full">{{ $t('unfollow') }}</span><fa :icon="faMinus"/>
+			<span v-if="full">{{ $t('unfollow') }}</span><Fa :icon="faMinus"/>
 		</template>
 		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ $t('followRequest') }}</span><fa :icon="faPlus"/>
+			<span v-if="full">{{ $t('followRequest') }}</span><Fa :icon="faPlus"/>
 		</template>
 		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ $t('follow') }}</span><fa :icon="faPlus"/>
+			<span v-if="full">{{ $t('follow') }}</span><Fa :icon="faPlus"/>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse fixed-width/>
+		<span v-if="full">{{ $t('processing') }}</span><Fa :icon="faSpinner" pulse fixed-width/>
 	</template>
 </button>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faPlus, faMinus, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,
@@ -58,7 +59,7 @@ export default Vue.extend({
 	created() {
 		// 渡されたユーザー情報が不完全な場合
 		if (this.user.isFollowing == null) {
-			this.$root.api('users/show', {
+			os.api('users/show', {
 				userId: this.user.id
 			}).then(u => {
 				this.isFollowing = u.isFollowing;
@@ -68,13 +69,13 @@ export default Vue.extend({
 	},

 	mounted() {
-		this.connection = this.$root.stream.useSharedConnection('main');
+		this.connection = os.stream.useSharedConnection('main');

 		this.connection.on('follow', this.onFollowChange);
 		this.connection.on('unfollow', this.onFollowChange);
 	},

-	beforeDestroy() {
+	beforeUnmount() {
 		this.connection.dispose();
 	},

@@ -91,7 +92,7 @@ export default Vue.extend({

 			try {
 				if (this.isFollowing) {
-					const { canceled } = await this.$root.dialog({
+					const { canceled } = await os.dialog({
 						type: 'warning',
 						text: this.$t('unfollowConfirm', { name: this.user.name || this.user.username }),
 						showCancelButton: true
@@ -99,21 +100,21 @@ export default Vue.extend({

 					if (canceled) return;

-					await this.$root.api('following/delete', {
+					await os.api('following/delete', {
 						userId: this.user.id
 					});
 				} else {
 					if (this.hasPendingFollowRequestFromYou) {
-						await this.$root.api('following/requests/cancel', {
+						await os.api('following/requests/cancel', {
 							userId: this.user.id
 						});
 					} else if (this.user.isLocked) {
-						await this.$root.api('following/create', {
+						await os.api('following/create', {
 							userId: this.user.id
 						});
 						this.hasPendingFollowRequestFromYou = true;
 					} else {
-						await this.$root.api('following/create', {
+						await os.api('following/create', {
 							userId: this.user.id
 						});
 						this.hasPendingFollowRequestFromYou = true;
--- a/src/client/components/form-dialog.vue
+++ b/src/client/components/form-dialog.vue
@@ -1,41 +1,50 @@
 <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">
+<XModalWindow ref="dialog"
+	:width="400"
+	:can-close="false"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	@click="cancel()"
+	@ok="ok()"
+	@close="cancel()"
+	@closed="$emit('closed')"
+>
 	<template #header>
 		{{ title }}
 	</template>
-	<div class="xkpnjxcv">
+	<div class="xkpnjxcv _section">
 		<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">
+			<MkInput v-if="form[item].type === 'number'" v-model:value="values[item]" type="number" :step="form[item].step || 1">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</mk-input>
-			<mk-input v-else-if="form[item].type === 'string' && !item.multiline" v-model="values[item]" type="text">
+			</MkInput>
+			<MkInput v-else-if="form[item].type === 'string' && !item.multiline" v-model:value="values[item]" type="text">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</mk-input>
-			<mk-textarea v-else-if="form[item].type === 'string' && item.multiline" v-model="values[item]">
+			</MkInput>
+			<MkTextarea v-else-if="form[item].type === 'string' && item.multiline" v-model:value="values[item]">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</mk-textarea>
-			<mk-switch v-else-if="form[item].type === 'boolean'" v-model="values[item]">
+			</MkTextarea>
+			<MkSwitch v-else-if="form[item].type === 'boolean'" v-model:value="values[item]">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
-			</mk-switch>
+			</MkSwitch>
 		</label>
 	</div>
-</x-window>
+</XModalWindow>
 </template>

 <script lang="ts">
-import Vue from 'vue';
-import XWindow from './window.vue';
+import { defineComponent } from 'vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
 import MkInput from './ui/input.vue';
 import MkTextarea from './ui/textarea.vue';
 import MkSwitch from './ui/switch.vue';

-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XWindow,
+		XModalWindow,
 		MkInput,
 		MkTextarea,
 		MkSwitch,
@@ -52,6 +61,8 @@ export default Vue.extend({
 		},
 	},

+	emits: ['done'],
+
 	data() {
 		return {
 			values: {}
@@ -60,15 +71,24 @@ export default Vue.extend({

 	created() {
 		for (const item in this.form) {
-			Vue.set(this.values, item, this.form[item].hasOwnProperty('default') ? this.form[item].default : null);
+			this.values[item] = this.form[item].hasOwnProperty('default') ? this.form[item].default : null;
 		}
 	},

 	methods: {
 		ok() {
-			this.$emit('ok', this.values);
-			this.$refs.window.close();
+			this.$emit('done', {
+				result: this.values
+			});
+			this.$refs.dialog.close();
 		},
+
+		cancel() {
+			this.$emit('done', {
+				canceled: true
+			});
+			this.$refs.dialog.close();
+		}
 	}
 });
 </script>
@@ -77,7 +97,10 @@ export default Vue.extend({
 .xkpnjxcv {
 	> label {
 		display: block;
-		padding: 16px 24px;
+
+		&:not(:last-child) {
+			margin-bottom: 32px;
+		}
 	}
 }
 </style>
--- a/src/client/components/formula-core.vue
+++ b/src/client/components/formula-core.vue
@@ -5,9 +5,10 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
-import * as katex from 'katex';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+import * as katex from 'katex';import * as os from '@/os';
+
+export default defineComponent({
 	props: {
 		formula: {
 			type: String,
--- a/src/client/components/formula.vue
+++ b/src/client/components/formula.vue
@@ -1,12 +1,13 @@
 <template>
-<x-formula :formula="formula" :block="block" />
+<XFormula :formula="formula" :block="block" />
 </template>

 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent, defineAsyncComponent } from 'vue';import * as os from '@/os';
+
+export default defineComponent({
 	components: {
-		XFormula: () => import('./formula-core.vue').then(m => m.default)
+		XFormula: defineAsyncComponent(() => import('./formula-core.vue'))
 	},
 	props: {
 		formula: {
--- a/src/client/components/google.vue
+++ b/src/client/components/google.vue
@@ -1,15 +1,16 @@
 <template>
 <div class="mk-google">
 	<input type="search" v-model="query" :placeholder="q">
-	<button @click="search"><fa :icon="faSearch"/> {{ $t('search') }}</button>
+	<button @click="search"><Fa :icon="faSearch"/> {{ $t('search') }}</button>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: ['q'],
 	data() {
 		return {
@@ -23,7 +24,7 @@ export default Vue.extend({
 	methods: {
 		search() {
 			const engine = this.$store.state.settings.webSearchEngine ||
-				'https://www.google.com/?#q={{query}}';
+				'https://www.google.com/search?q={{query}}';
 			const url = engine.replace('{{query}}', this.query)
 			window.open(url, '_blank');
 		}
--- a/src/client/components/header-clock.vue
+++ b/src/client/components/header-clock.vue
@@ -1,101 +0,0 @@
-<template>
-<div class="eqryymyo">
-	<div class="header">
-		<time ref="time" class="_ghost">
-			<span class="yyyymmdd">{{ yyyy }}/{{ mm }}/{{ dd }}</span>
-			<br>
-			<span class="hhnn">{{ hh }}<span :style="{ visibility: now.getSeconds() % 2 == 0 ? 'visible' : 'hidden' }">:</span>{{ nn }}</span>
-		</time>
-	</div>
-	<div class="content _panel _ghost">
-		<mk-clock/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import MkClock from './analog-clock.vue';
-
-export default Vue.extend({
-	components: {
-		MkClock
-	},
-	data() {
-		return {
-			now: new Date(),
-			clock: null
-		};
-	},
-	computed: {
-		yyyy(): number {
-			return this.now.getFullYear();
-		},
-		mm(): string {
-			return ('0' + (this.now.getMonth() + 1)).slice(-2);
-		},
-		dd(): string {
-			return ('0' + this.now.getDate()).slice(-2);
-		},
-		hh(): string {
-			return ('0' + this.now.getHours()).slice(-2);
-		},
-		nn(): string {
-			return ('0' + this.now.getMinutes()).slice(-2);
-		}
-	},
-	mounted() {
-		this.tick();
-		this.clock = setInterval(this.tick, 1000);
-	},
-	beforeDestroy() {
-		clearInterval(this.clock);
-	},
-	methods: {
-		tick() {
-			this.now = new Date();
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.eqryymyo {
-	display: inline-block;
-	overflow: visible;
-
-	> .header {
-		padding: 0 12px;
-		padding-top: 4px;
-		text-align: center;
-		font-size: 12px;
-		font-family: Lucida Console, Courier, monospace;
-
-		&:hover + .content {
-			opacity: 1;
-		}
-
-		> time {
-			display: table-cell;
-			vertical-align: middle;
-			height: 48px;
-
-			> .yyyymmdd {
-				opacity: 0.7;
-			}
-		}
-	}
-
-	> .content {
-		opacity: 0;
-		display: block;
-		position: absolute;
-		top: auto;
-		right: 0;
-		margin: 16px 0 0 0;
-		padding: 16px;
-		width: 230px;
-		transition: opacity 0.2s ease;
-	}
-}
-</style>
--- a/src/client/components/image-viewer.vue
+++ b/src/client/components/image-viewer.vue
@@ -1,16 +1,26 @@
 <template>
-<x-modal ref="modal" @closed="() => { $emit('closed'); destroyDom(); }">
-	<img class="xubzgfga" ref="img" :src="image.url" :alt="image.name" :title="image.name" @click="close" tabindex="-1"/>
-</x-modal>
+<MkModal ref="modal" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div class="xubzgfga">
+		<header>{{ image.name }}</header>
+		<img :src="image.url" :alt="image.name" :title="image.name" @click="$refs.modal.close()"/>
+		<footer>
+			<span>{{ image.type }}</span>
+			<span>{{ bytes(image.size) }}</span>
+			<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
+		</footer>
+	</div>
+</MkModal>
 </template>

 <script lang="ts">
-import Vue from 'vue';
-import XModal from './modal.vue';
+import { defineComponent } from 'vue';
+import bytes from '@/filters/bytes';
+import number from '@/filters/number';
+import MkModal from '@/components/ui/modal.vue';

-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XModal,
+		MkModal,
 	},

 	props: {
@@ -20,32 +30,50 @@ export default Vue.extend({
 		},
 	},

-	mounted() {
-		this.$nextTick(() => {
-			this.$refs.img.focus();
-		});
-	},
+	emits: ['closed'],

 	methods: {
-		close() {
-			this.$refs.modal.close();
-		},
+		bytes,
+		number,
 	}
 });
 </script>

 <style lang="scss" scoped>
 .xubzgfga {
-	position: fixed;
-	z-index: 2;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	max-width: 100%;
-	max-height: 100%;
-	margin: auto;
-	cursor: zoom-out;
-	image-orientation: from-image;
+	max-width: 1024px;
+
+	> header,
+	> footer {
+		display: inline-block;
+		padding: 6px 9px;
+		font-size: 90%;
+		background: rgba(0, 0, 0, 0.5);
+		border-radius: 6px;
+		color: #fff;
+	}
+
+	> header {
+		margin-bottom: 8px;
+		opacity: 0.9;
+	}
+
+	> img {
+		display: block;
+		max-width: 100%;
+		cursor: zoom-out;
+		image-orientation: from-image;
+	}
+
+	> footer {
+		margin-top: 8px;
+		opacity: 0.8;
+
+		> span + span {
+			margin-left: 0.5em;
+			padding-left: 0.5em;
+			border-left: solid 1px rgba(255, 255, 255, 0.5);
+		}
+	}
 }
 </style>
--- a/src/client/components/img-with-blurhash.vue
+++ b/src/client/components/img-with-blurhash.vue
@@ -1,15 +1,15 @@
 <template>
-<div class="xubzgfgb" :title="title">
+<div class="xubzgfgb" :class="{ cover }" :title="title">
 	<canvas ref="canvas" :width="size" :height="size" :title="title" v-if="!loaded"/>
 	<img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { decode } from 'blurhash';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		src: {
 			type: String,
@@ -35,6 +35,11 @@ export default Vue.extend({
 			required: false,
 			default: 64
 		},
+		cover: {
+			type: Boolean,
+			required: false,
+			default: true,
+		}
 	},

 	data() {
@@ -49,6 +54,7 @@ export default Vue.extend({

 	methods: {
 		draw() {
+			if (this.hash == null) return;
 			const pixels = decode(this.hash, this.size, this.size);
 			const ctx = (this.$refs.canvas as HTMLCanvasElement).getContext('2d');
 			const imageData = ctx!.createImageData(this.size, this.size);
@@ -70,9 +76,23 @@ export default Vue.extend({

 	> canvas,
 	> img {
+		display: block;
 		width: 100%;
 		height: 100%;
+	}
+
+	> canvas {
 		object-fit: cover;
 	}
+
+	> img {
+		object-fit: contain;
+	}
+
+	&.cover {
+		> img {
+			object-fit: cover;
+		}
+	}
 }
 </style>
--- a/src/client/components/index.ts
+++ b/src/client/components/index.ts
@@ -1,6 +1,7 @@
-import Vue from 'vue';
+import { App } from 'vue';

 import mfm from './misskey-flavored-markdown.vue';
+import a from './ui/a.vue';
 import acct from './acct.vue';
 import avatar from './avatar.vue';
 import emoji from './emoji.vue';
@@ -10,16 +11,17 @@ import time from './time.vue';
 import url from './url.vue';
 import loading from './loading.vue';
 import error from './error.vue';
-import streamIndicator from './stream-indicator.vue';

-Vue.component('mfm', mfm);
-Vue.component('mk-acct', acct);
-Vue.component('mk-avatar', avatar);
-Vue.component('mk-emoji', emoji);
-Vue.component('mk-user-name', userName);
-Vue.component('mk-ellipsis', ellipsis);
-Vue.component('mk-time', time);
-Vue.component('mk-url', url);
-Vue.component('mk-loading', loading);
-Vue.component('mk-error', error);
-Vue.component('stream-indicator', streamIndicator);
+export default function(app: App) {
+	app.component('Mfm', mfm);
+	app.component('MkA', a);
+	app.component('MkAcct', acct);
+	app.component('MkAvatar', avatar);
+	app.component('MkEmoji', emoji);
+	app.component('MkUserName', userName);
+	app.component('MkEllipsis', ellipsis);
+	app.component('MkTime', time);
+	app.component('MkUrl', url);
+	app.component('MkLoading', loading);
+	app.component('MkError', error);
+}
--- a/src/client/components/instance-stats.vue
+++ b/src/client/components/instance-stats.vue
@@ -1,93 +1,93 @@
 <template>
-<div class="zbcjwnqg" v-size="{ max: [550, 1200] }">
+<div class="zbcjwnqg" v-size="{ max: [550, 1000] }">
 	<div class="stats" v-if="info">
 		<div class="_panel">
 			<div>
-				<b><fa :icon="faUser"/>{{ $t('users') }}</b>
+				<b><Fa :icon="faUser"/>{{ $t('users') }}</b>
 				<small>{{ $t('local') }}</small>
 			</div>
 			<div>
 				<dl class="total">
 					<dt>{{ $t('total') }}</dt>
-					<dd>{{ info.originalUsersCount | number }}</dd>
+					<dd>{{ number(info.originalUsersCount) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersLocalDoD > 0 }">
 					<dt>{{ $t('dayOverDayChanges') }}</dt>
-					<dd>{{ usersLocalDoD | number }}</dd>
+					<dd>{{ number(usersLocalDoD) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersLocalWoW > 0 }">
 					<dt>{{ $t('weekOverWeekChanges') }}</dt>
-					<dd>{{ usersLocalWoW | number }}</dd>
+					<dd>{{ number(usersLocalWoW) }}</dd>
 				</dl>
 			</div>
 		</div>
 		<div class="_panel">
 			<div>
-				<b><fa :icon="faUser"/>{{ $t('users') }}</b>
+				<b><Fa :icon="faUser"/>{{ $t('users') }}</b>
 				<small>{{ $t('remote') }}</small>
 			</div>
 			<div>
 				<dl class="total">
 					<dt>{{ $t('total') }}</dt>
-					<dd>{{ (info.usersCount - info.originalUsersCount) | number }}</dd>
+					<dd>{{ number((info.usersCount - info.originalUsersCount)) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersRemoteDoD > 0 }">
 					<dt>{{ $t('dayOverDayChanges') }}</dt>
-					<dd>{{ usersRemoteDoD | number }}</dd>
+					<dd>{{ number(usersRemoteDoD) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: usersRemoteWoW > 0 }">
 					<dt>{{ $t('weekOverWeekChanges') }}</dt>
-					<dd>{{ usersRemoteWoW | number }}</dd>
+					<dd>{{ number(usersRemoteWoW) }}</dd>
 				</dl>
 			</div>
 		</div>
 		<div class="_panel">
 			<div>
-				<b><fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
+				<b><Fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
 				<small>{{ $t('local') }}</small>
 			</div>
 			<div>
 				<dl class="total">
 					<dt>{{ $t('total') }}</dt>
-					<dd>{{ info.originalNotesCount | number }}</dd>
+					<dd>{{ number(info.originalNotesCount) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesLocalDoD > 0 }">
 					<dt>{{ $t('dayOverDayChanges') }}</dt>
-					<dd>{{ notesLocalDoD | number }}</dd>
+					<dd>{{ number(notesLocalDoD) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesLocalWoW > 0 }">
 					<dt>{{ $t('weekOverWeekChanges') }}</dt>
-					<dd>{{ notesLocalWoW | number }}</dd>
+					<dd>{{ number(notesLocalWoW) }}</dd>
 				</dl>
 			</div>
 		</div>
 		<div class="_panel">
 			<div>
-				<b><fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
+				<b><Fa :icon="faPencilAlt"/>{{ $t('notes') }}</b>
 				<small>{{ $t('remote') }}</small>
 			</div>
 			<div>
 				<dl class="total">
 					<dt>{{ $t('total') }}</dt>
-					<dd>{{ (info.notesCount - info.originalNotesCount) | number }}</dd>
+					<dd>{{ number((info.notesCount - info.originalNotesCount)) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesRemoteDoD > 0 }">
 					<dt>{{ $t('dayOverDayChanges') }}</dt>
-					<dd>{{ notesRemoteDoD | number }}</dd>
+					<dd>{{ number(notesRemoteDoD) }}</dd>
 				</dl>
 				<dl class="diff" :class="{ inc: notesRemoteWoW > 0 }">
 					<dt>{{ $t('weekOverWeekChanges') }}</dt>
-					<dd>{{ notesRemoteWoW | number }}</dd>
+					<dd>{{ number(notesRemoteWoW) }}</dd>
 				</dl>
 			</div>
 		</div>
 	</div>

 	<section class="_card">
-		<div class="_title" style="position: relative;"><fa :icon="faChartBar"/> {{ $t('statistics') }}<button @click="fetchChart" class="_button" style="position: absolute; right: 0; bottom: 0; top: 0; padding: inherit;"><fa :icon="faSync"/></button></div>
+		<div class="_title" style="position: relative;"><Fa :icon="faChartBar"/> {{ $t('statistics') }}<button @click="fetchChart" class="_button" style="position: absolute; right: 0; bottom: 0; top: 0; padding: inherit;"><Fa :icon="faSync"/></button></div>
 		<div class="_content" style="margin-top: -8px;">
 			<div class="selects" style="display: flex;">
-				<mk-select v-model="chartSrc" style="margin: 0; flex: 1;">
+				<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
 					<optgroup :label="$t('federation')">
 						<option value="federation-instances">{{ $t('_charts.federationInstancesIncDec') }}</option>
 						<option value="federation-instances-total">{{ $t('_charts.federationInstancesTotal') }}</option>
@@ -109,11 +109,11 @@
 						<option value="drive">{{ $t('_charts.storageUsageIncDec') }}</option>
 						<option value="drive-total">{{ $t('_charts.storageUsageTotal') }}</option>
 					</optgroup>
-				</mk-select>
-				<mk-select v-model="chartSpan" style="margin: 0;">
+				</MkSelect>
+				<MkSelect v-model:value="chartSpan" style="margin: 0;">
 					<option value="hour">{{ $t('perHour') }}</option>
 					<option value="day">{{ $t('perDay') }}</option>
-				</mk-select>
+				</MkSelect>
 			</div>
 			<canvas ref="chart"></canvas>
 		</div>
@@ -122,10 +122,11 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, markRaw } from 'vue';
 import { faChartBar, faUser, faPencilAlt, faSync } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import MkSelect from './ui/select.vue';
+import number from '@/filters/number';

 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
 const negate = arr => arr.map(x => -x);
@@ -136,8 +137,9 @@ const alpha = (hex, a) => {
 	const b = parseInt(result[3], 16);
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSelect
 	},
@@ -216,7 +218,7 @@ export default Vue.extend({
 	},

 	async created() {
-		this.info = await this.$root.api('stats');
+		this.info = await os.api('stats');

 		this.now = new Date();

@@ -226,17 +228,17 @@ export default Vue.extend({
 	methods: {
 		async fetchChart() {
 			const [perHour, perDay] = await Promise.all([Promise.all([
-				this.$root.api('charts/federation', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/users', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/active-users', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/notes', { limit: this.chartLimit, span: 'hour' }),
-				this.$root.api('charts/drive', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/federation', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/users', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/active-users', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/notes', { limit: this.chartLimit, span: 'hour' }),
+				os.api('charts/drive', { limit: this.chartLimit, span: 'hour' }),
 			]), Promise.all([
-				this.$root.api('charts/federation', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/users', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/active-users', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/notes', { limit: this.chartLimit, span: 'day' }),
-				this.$root.api('charts/drive', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/federation', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/users', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/active-users', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/notes', { limit: this.chartLimit, span: 'day' }),
+				os.api('charts/drive', { limit: this.chartLimit, span: 'day' }),
 			])]);

 			const chart = {
@@ -279,7 +281,7 @@ export default Vue.extend({
 			const gridColor = this.$store.state.device.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';

 			Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-			this.chartInstance = new Chart(this.$refs.chart, {
+			this.chartInstance = markRaw(new Chart(this.$refs.chart, {
 				type: 'line',
 				data: {
 					labels: new Array(this.chartLimit).fill(0).map((_, i) => this.getDate(i).toLocaleString()).slice().reverse(),
@@ -344,7 +346,7 @@ export default Vue.extend({
 						mode: 'index',
 					}
 				}
-			});
+			}));
 		},

 		getDate(ago: number) {
@@ -622,13 +624,15 @@ export default Vue.extend({
 				}]
 			};
 		},
+
+		number
 	}
 });
 </script>

 <style lang="scss" scoped>
 .zbcjwnqg {
-	&.max-width_1200px {
+	&.max-width_1000px {
 		> .stats {
 			grid-template-columns: 1fr 1fr;
 			grid-template-rows: 1fr 1fr;
--- a/src/client/components/instance-ticker.vue
+++ b/src/client/components/instance-ticker.vue
@@ -0,0 +1,62 @@
+<template>
+<div class="hpaizdrt" :style="bg">
+	<img v-if="info.faviconUrl" class="icon" :src="info.faviconUrl"/>
+	<span class="name">{{ info.name }}</span>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { instanceName } from '@/config';
+
+export default defineComponent({
+	props: {
+		instance: {
+			type: Object,
+			required: false
+		},
+	},
+
+	data() {
+		return {
+			info: this.instance || {
+				faviconUrl: '/favicon.ico',
+				name: instanceName,
+				themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
+			}
+		}
+	},
+
+	computed: {
+		bg(): any {
+			const themeColor = this.info.themeColor || '#777777';
+			return {
+				background: `linear-gradient(90deg, ${themeColor}, ${themeColor + '00'})`
+			};
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.hpaizdrt {
+	$height: 1.1rem;
+
+	height: $height;
+	border-radius: 4px 0 0 4px;
+	overflow: hidden;
+	color: #fff;
+
+	> .icon {
+		height: 100%;
+	}
+
+	> .name {
+		margin-left: 4px;
+		line-height: $height;
+		font-size: 0.9em;
+		vertical-align: top;
+		font-weight: bold;
+	}
+}
+</style>
--- a/src/client/components/link.vue
+++ b/src/client/components/link.vue
@@ -1,22 +1,22 @@
 <template>
-<component :is="self ? 'router-link' : 'a'" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
+<component :is="self ? 'MkA' : 'a'" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
 	@mouseover="onMouseover"
 	@mouseleave="onMouseleave"
 	:title="url"
 >
 	<slot></slot>
-	<fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
+	<Fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
 </component>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
-import { url as local } from '../config';
-import MkUrlPreview from './url-preview-popup.vue';
-import { isDeviceTouch } from '../scripts/is-device-touch';
+import { url as local } from '@/config';
+import { isDeviceTouch } from '@/scripts/is-device-touch';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		url: {
 			type: String,
@@ -36,29 +36,34 @@ export default Vue.extend({
 			target: self ? null : '_blank',
 			showTimer: null,
 			hideTimer: null,
-			preview: null,
+			checkTimer: null,
+			close: null,
 			faExternalLinkSquareAlt
 		};
 	},
 	methods: {
-		showPreview() {
+		async showPreview() {
 			if (!document.body.contains(this.$el)) return;
-			if (this.preview) return;
+			if (this.close) return;

-			this.preview = new MkUrlPreview({
-				parent: this,
-				propsData: {
-					url: this.url,
-					source: this.$el
-				}
-			}).$mount();
+			const { dispose } = await os.popup(import('@/components/url-preview-popup.vue'), {
+				url: this.url,
+				source: this.$el
+			});

-			document.body.appendChild(this.preview.$el);
+			this.close = () => {
+				dispose();
+			};
+
+			this.checkTimer = setInterval(() => {
+				if (!document.body.contains(this.$el)) this.closePreview();
+			}, 1000);
 		},
 		closePreview() {
-			if (this.preview) {
-				this.preview.destroyDom();
-				this.preview = null;
+			if (this.close) {
+				clearInterval(this.checkTimer);
+				this.close();
+				this.close = null;
 			}
 		},
 		onMouseover() {
--- a/src/client/components/loading.vue
+++ b/src/client/components/loading.vue
@@ -5,9 +5,10 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		inline: {
 			type: Boolean,
--- a/src/client/components/media-banner.vue
+++ b/src/client/components/media-banner.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-media-banner">
 	<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
-		<span class="icon"><fa :icon="faExclamationTriangle"/></span>
+		<span class="icon"><Fa :icon="faExclamationTriangle"/></span>
 		<b>{{ $t('sensitive') }}</b>
 		<span>{{ $t('clickToShow') }}</span>
 	</div>
@@ -19,17 +19,18 @@
 		:title="media.name"
 		:download="media.name"
 	>
-		<span class="icon"><fa icon="download"/></span>
+		<span class="icon"><Fa icon="download"/></span>
 		<b>{{ media.name }}</b>
 	</a>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		media: {
 			type: Object,
--- a/src/client/components/media-image.vue
+++ b/src/client/components/media-image.vue
@@ -1,34 +1,36 @@
 <template>
 <div class="qjewsnkg" v-if="hide" @click="hide = false">
-	<img-with-blurhash class="bg" :hash="image.blurhash" :title="image.name"/>
+	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.name"/>
 	<div class="text">
 		<div>
-			<b><fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
+			<b><Fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
 			<span>{{ $t('clickToShow') }}</span>
 		</div>
 	</div>
 </div>
-<div class="gqnyydlz" v-else>
-	<i><fa :icon="faEyeSlash" @click="hide = true"/></i>
+<div class="gqnyydlz" :style="{ background: color }" v-else>
+	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
 	<a
 		:href="image.url"
 		:title="image.name"
 		@click.prevent="onClick"
 	>
-		<img-with-blurhash :hash="image.blurhash" :src="url" :alt="image.name" :title="image.name"/>
+		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.name" :title="image.name" :cover="false"/>
 		<div class="gif" v-if="image.type === 'image/gif'">GIF</div>
 	</a>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
-import { getStaticImageUrl } from '../scripts/get-static-image-url';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
 import ImageViewer from './image-viewer.vue';
 import ImgWithBlurhash from './img-with-blurhash.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		ImgWithBlurhash
 	},
@@ -44,8 +46,8 @@ export default Vue.extend({
 	data() {
 		return {
 			hide: true,
-			faExclamationTriangle,
-			faEyeSlash
+			color: null,
+			faExclamationTriangle, faEyeSlash,
 		};
 	},
 	computed: {
@@ -64,19 +66,25 @@ export default Vue.extend({
 		}
 	},
 	created() {
-		this.hide = this.image.isSensitive && !this.$store.state.device.alwaysShowNsfw;
+		// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
+		this.$watch('image', () => {
+			this.hide = this.image.isSensitive && !this.$store.state.device.alwaysShowNsfw;
+			if (this.image.blurhash) {
+				this.color = extractAvgColorFromBlurhash(this.image.blurhash);
+			}
+		}, {
+			deep: true,
+			immediate: true,
+		});
 	},
 	methods: {
 		onClick() {
 			if (this.$store.state.device.imageNewTab) {
 				window.open(this.image.url, '_blank');
 			} else {
-				const viewer = this.$root.new(ImageViewer, {
+				os.popup(ImageViewer, {
 					image: this.image
-				});
-				this.$once('hook:beforeDestroy', () => {
-					viewer.close();
-				});
+				}, {}, 'closed');
 			}
 		}
 	}
@@ -117,6 +125,7 @@ export default Vue.extend({

 .gqnyydlz {
 	position: relative;
+	border: solid 1px var(--divider);

 	> i {
 		display: block;
--- a/src/client/components/media-list.vue
+++ b/src/client/components/media-list.vue
@@ -1,13 +1,11 @@
 <template>
 <div class="mk-media-list">
-	<template v-for="media in mediaList.filter(media => !previewable(media))">
-		<x-banner :media="media" :key="media.id"/>
-	</template>
+	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :media="media" :key="media.id"/>
 	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container" ref="gridOuter">
 		<div :data-count="mediaList.filter(media => previewable(media)).length" :style="gridInnerStyle">
 			<template v-for="media in mediaList">
-				<x-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
-				<x-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
+				<XVideo :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
+				<XImage :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
 			</template>
 		</div>
 	</div>
@@ -15,12 +13,13 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XBanner from './media-banner.vue';
 import XImage from './media-image.vue';
 import XVideo from './media-video.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XBanner,
 		XImage,
@@ -33,8 +32,6 @@ export default Vue.extend({
 		raw: {
 			default: false
 		},
-		// specify the parent element
-		parentElement: {}
 	},
 	data() {
 		return {
@@ -46,7 +43,7 @@ export default Vue.extend({
 		this.size();
 		window.addEventListener('resize', this.size);
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		window.removeEventListener('resize', this.size);
 	},
 	activated() {
@@ -67,7 +64,7 @@ export default Vue.extend({

 				if (this.$refs.gridOuter) {
 					let height = 287;
-					const parent = this.parentElement || this.$parent.$el;
+					const parent = this.$parent.$el;

 					if (this.$refs.gridOuter.clientHeight) {
 						height = this.$refs.gridOuter.clientHeight;
@@ -82,11 +79,6 @@ export default Vue.extend({
 			});
 		}
 	},
-	watch: {
-		parentElement() {
-			this.size();
-		}
-	}
 });
 </script>

--- a/src/client/components/media-video.vue
+++ b/src/client/components/media-video.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="icozogqfvdetwohsdglrbswgrejoxbdj" v-if="hide" @click="hide = false">
 	<div>
-		<b><fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
+		<b><Fa :icon="faExclamationTriangle"/> {{ $t('sensitive') }}</b>
 		<span>{{ $t('clickToShow') }}</span>
 	</div>
 </div>
 <div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>
-	<i><fa :icon="faEyeSlash" @click="hide = true"/></i>
+	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
 	<a
 		:href="video.url"
 		rel="nofollow noopener"
@@ -14,17 +14,18 @@
 		:style="imageStyle"
 		:title="video.name"
 	>
-		<fa :icon="faPlayCircle"/>
+		<Fa :icon="faPlayCircle"/>
 	</a>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		video: {
 			type: Object,
--- a/src/client/components/mention.vue
+++ b/src/client/components/mention.vue
@@ -1,11 +1,11 @@
 <template>
-<router-link class="ldlomzub" :class="{ isMe }" :to="url" v-user-preview="canonical" v-if="url.startsWith('/')">
+<MkA class="ldlomzub" :class="{ isMe }" :to="url" v-user-preview="canonical" v-if="url.startsWith('/')">
 	<span class="me" v-if="isMe">{{ $t('you') }}</span>
 	<span class="main">
 		<span class="username">@{{ username }}</span>
 		<span class="host" v-if="(host != localHost) || $store.state.settings.showFullAcct">@{{ toUnicode(host) }}</span>
 	</span>
-</router-link>
+</MkA>
 <a class="ldlomzub" :href="url" target="_blank" rel="noopener" v-else>
 	<span class="main">
 		<span class="username">@{{ username }}</span>
@@ -15,12 +15,13 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
-import { host as localHost } from '../config';
+import { host as localHost } from '@/config';
 import { wellKnownServices } from '../../well-known-services';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		username: {
 			type: String,
--- a/src/client/components/menu.vue
+++ b/src/client/components/menu.vue
@@ -1,191 +0,0 @@
-<template>
-<x-popup :source="source" :no-center="noCenter" :fixed="fixed" :width="width" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }" v-hotkey.global="keymap">
-	<div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items">
-		<template v-for="(item, i) in items.filter(item => item !== undefined)">
-			<div v-if="item === null" class="divider" :key="i"></div>
-			<span v-else-if="item.type === 'label'" class="label item" :key="i">
-				<span>{{ item.text }}</span>
-			</span>
-			<router-link v-else-if="item.type === 'link'" :to="item.to" @click.native="close()" :tabindex="i" class="_button item" :key="i">
-				<fa v-if="item.icon" :icon="item.icon" fixed-width/>
-				<mk-avatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
-				<span>{{ item.text }}</span>
-				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
-			</router-link>
-			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item" :key="i">
-				<fa v-if="item.icon" :icon="item.icon" fixed-width/>
-				<span>{{ item.text }}</span>
-				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
-			</a>
-			<button v-else-if="item.type === 'user'" @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i">
-				<mk-avatar :user="item.user" class="avatar"/><mk-user-name :user="item.user"/>
-				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
-			</button>
-			<button v-else @click="clicked(item.action)" :tabindex="i" class="_button item" :key="i">
-				<fa v-if="item.icon" :icon="item.icon" fixed-width/>
-				<mk-avatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
-				<span>{{ item.text }}</span>
-				<i v-if="item.indicate"><fa :icon="faCircle"/></i>
-			</button>
-		</template>
-	</div>
-</x-popup>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { faCircle } from '@fortawesome/free-solid-svg-icons';
-import XPopup from './popup.vue';
-import { focusPrev, focusNext } from '../scripts/focus';
-
-export default Vue.extend({
-	components: {
-		XPopup
-	},
-	props: {
-		source: {
-			required: true
-		},
-		items: {
-			type: Array,
-			required: true
-		},
-		align: {
-			type: String,
-			required: false
-		},
-		noCenter: {
-			type: Boolean,
-			required: false
-		},
-		fixed: {
-			type: Boolean,
-			required: false
-		},
-		width: {
-			type: Number,
-			required: false
-		},
-		direction: {
-			type: String,
-			required: false
-		},
-		viaKeyboard: {
-			type: Boolean,
-			required: false
-		},
-	},
-	data() {
-		return {
-			faCircle
-		};
-	},
-	computed: {
-		keymap(): any {
-			return {
-				'up|k|shift+tab': this.focusUp,
-				'down|j|tab': this.focusDown,
-			};
-		},
-	},
-	mounted() {
-		if (this.viaKeyboard) {
-			this.$nextTick(() => {
-				focusNext(this.$refs.items.children[0], true);
-			});
-		}
-	},
-	methods: {
-		clicked(fn) {
-			fn();
-			this.close();
-		},
-		close() {
-			this.$refs.popup.close();
-		},
-		focusUp() {
-			focusPrev(document.activeElement);
-		},
-		focusDown() {
-			focusNext(document.activeElement);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.rrevdjwt {
-	padding: 8px 0;
-
-	&.left {
-		> .item {
-			text-align: left;
-		}
-	}
-
-	> .item {
-		display: block;
-		position: relative;
-		padding: 8px 16px;
-		width: 100%;
-		box-sizing: border-box;
-		white-space: nowrap;
-		font-size: 0.9em;
-		line-height: 20px;
-		text-align: center;
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-		&:hover {
-			color: #fff;
-			background: var(--accent);
-			text-decoration: none;
-		}
-
-		&:active {
-			color: #fff;
-			background: var(--accentDarken);
-		}
-
-		&:not(:active):focus {
-			box-shadow: 0 0 0 2px var(--focus) inset;
-		}
-
-		&.label {
-			pointer-events: none;
-			font-size: 0.7em;
-			padding-bottom: 4px;
-
-			> span {
-				opacity: 0.7;
-			}
-		}
-
-		> [data-icon] {
-			margin-right: 4px;
-			width: 20px;
-		}
-
-		> .avatar {
-			margin-right: 4px;
-			width: 20px;
-			height: 20px;
-		}
-
-		> i {
-			position: absolute;
-			top: 5px;
-			left: 13px;
-			color: var(--indicator);
-			font-size: 12px;
-			animation: blink 1s infinite;
-		}
-	}
-
-	> .divider {
-		margin: 8px 0;
-		height: 1px;
-		background: var(--divider);
-	}
-}
-</style>
--- a/src/client/components/mfm.ts
+++ b/src/client/components/mfm.ts
@@ -1,16 +1,18 @@
-import Vue, { VNode } from 'vue';
+import { VNode, defineComponent, h } from 'vue';
 import { MfmForest } from '../../mfm/prelude';
 import { parse, parsePlain } from '../../mfm/parse';
 import MkUrl from './url.vue';
 import MkLink from './link.vue';
 import MkMention from './mention.vue';
+import MkEmoji from './emoji.vue';
 import { concat } from '../../prelude/array';
 import MkFormula from './formula.vue';
 import MkCode from './code.vue';
 import MkGoogle from './google.vue';
-import { host } from '../config';
+import MkA from './ui/a.vue';
+import { host } from '@/config';

-export default Vue.component('misskey-flavored-markdown', {
+export default defineComponent({
 	props: {
 		text: {
 			type: String,
@@ -41,7 +43,7 @@ export default Vue.component('misskey-flavored-markdown', {
 		},
 	},

-	render(createElement) {
+	render() {
 		if (this.text == null || this.text == '') return;

 		const ast = (this.plain ? parsePlain : parse)(this.text);
@@ -53,67 +55,49 @@ export default Vue.component('misskey-flavored-markdown', {

 					if (!this.plain) {
 						const x = text.split('\n')
-							.map(t => t == '' ? [createElement('br')] : [this._v(t), createElement('br')]); // NOTE: this._vはHACK SEE: https://github.com/syuilo/misskey/pull/6399#issuecomment-632820283
+							.map(t => t == '' ? [h('br')] : [t, h('br')]);
 						x[x.length - 1].pop();
 						return x;
 					} else {
-						return [this._v(text.replace(/\n/g, ' '))];
+						return [text.replace(/\n/g, ' ')];
 					}
 				}

 				case 'bold': {
-					return [createElement('b', genEl(token.children))];
+					return [h('b', genEl(token.children))];
 				}

 				case 'strike': {
-					return [createElement('del', genEl(token.children))];
+					return [h('del', genEl(token.children))];
 				}

 				case 'italic': {
-					return (createElement as any)('i', {
-						attrs: {
-							style: 'font-style: oblique;'
-						},
+					return h('i', {
+						style: 'font-style: oblique;'
 					}, genEl(token.children));
 				}

 				case 'big': {
-					return (createElement as any)('strong', {
-						attrs: {
-							style: `display: inline-block; font-size: 150%;`
-						},
-						directives: [this.$store.state.device.animatedMfm ? {
-							name: 'animate-css',
-							value: { classes: 'tada', iteration: 'infinite' }
-						}: {}]
+					return h('strong', {
+						style: `display: inline-block; font-size: 150%;` + (this.$store.state.device.animatedMfm ? 'animation: anime-tada 1s linear infinite both;' : ''),
 					}, genEl(token.children));
 				}

 				case 'small': {
-					return [createElement('small', {
-						attrs: {
-							style: 'opacity: 0.7;'
-						},
+					return [h('small', {
+						style: 'opacity: 0.7;'
 					}, genEl(token.children))];
 				}

 				case 'center': {
-					return [createElement('div', {
-						attrs: {
-							style: 'text-align:center;'
-						}
+					return [h('div', {
+						style: 'text-align:center;'
 					}, genEl(token.children))];
 				}

 				case 'motion': {
-					return (createElement as any)('span', {
-						attrs: {
-							style: 'display: inline-block;'
-						},
-						directives: [this.$store.state.device.animatedMfm ? {
-							name: 'animate-css',
-							value: { classes: 'rubberBand', iteration: 'infinite' }
-						} : {}]
+					return h('span', {
+						style: 'display: inline-block;' + (this.$store.state.device.animatedMfm ? 'animation: anime-rubberBand 1s linear infinite both;' : ''),
 					}, genEl(token.children));
 				}

@@ -123,163 +107,138 @@ export default Vue.component('misskey-flavored-markdown', {
 						token.node.props.attr == 'alternate' ? 'alternate' :
 						'normal';
 					const style = this.$store.state.device.animatedMfm
-						? `animation: spin 1.5s linear infinite; animation-direction: ${direction};` : '';
-					return (createElement as any)('span', {
-						attrs: {
-							style: 'display: inline-block;' + style
-						},
+						? `animation: anime-spin 1.5s linear infinite; animation-direction: ${direction};` : '';
+					return h('span', {
+						style: 'display: inline-block;' + style
 					}, genEl(token.children));
 				}

 				case 'jump': {
-					return (createElement as any)('span', {
-						attrs: {
-							style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: jump 0.75s linear infinite;' : 'display: inline-block;'
-						},
+					return h('span', {
+						style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: anime-jump 0.75s linear infinite;' : 'display: inline-block;'
 					}, genEl(token.children));
 				}

 				case 'flip': {
-					return (createElement as any)('span', {
-						attrs: {
-							style: 'display: inline-block; transform: scaleX(-1);'
-						},
+					return h('span', {
+						style: 'display: inline-block; transform: scaleX(-1);'
+					}, genEl(token.children));
+				}
+
+				case 'twitch': {
+					return h('span', {
+						style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: anime-twitch 0.5s ease infinite;' : 'display: inline-block;'
+					}, genEl(token.children));
+				}
+
+				case 'shake': {
+					return h('span', {
+						style: this.$store.state.device.animatedMfm ? 'display: inline-block; animation: anime-shake 0.5s ease infinite;' : 'display: inline-block;'
 					}, genEl(token.children));
 				}

 				case 'url': {
-					return [createElement(MkUrl, {
+					return [h(MkUrl, {
 						key: Math.random(),
-						props: {
-							url: token.node.props.url,
-							rel: 'nofollow noopener',
-						},
+						url: token.node.props.url,
+						rel: 'nofollow noopener',
 					})];
 				}

 				case 'link': {
-					return [createElement(MkLink, {
+					return [h(MkLink, {
 						key: Math.random(),
-						props: {
-							url: token.node.props.url,
-							rel: 'nofollow noopener',
-						},
+						url: token.node.props.url,
+						rel: 'nofollow noopener',
 					}, genEl(token.children))];
 				}

 				case 'mention': {
-					return [createElement(MkMention, {
+					return [h(MkMention, {
 						key: Math.random(),
-						props: {
-							host: (token.node.props.host == null && this.author && this.author.host != null ? this.author.host : token.node.props.host) || host,
-							username: token.node.props.username
-						}
+						host: (token.node.props.host == null && this.author && this.author.host != null ? this.author.host : token.node.props.host) || host,
+						username: token.node.props.username
 					})];
 				}

 				case 'hashtag': {
-					return [createElement('router-link', {
+					return [h(MkA, {
 						key: Math.random(),
-						attrs: {
-							to: this.isNote ? `/tags/${encodeURIComponent(token.node.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.node.props.hashtag)}`,
-							style: 'color:var(--hashtag);'
-						}
+						to: this.isNote ? `/tags/${encodeURIComponent(token.node.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.node.props.hashtag)}`,
+						style: 'color:var(--hashtag);'
 					}, `#${token.node.props.hashtag}`)];
 				}

 				case 'blockCode': {
-					return [createElement(MkCode, {
+					return [h(MkCode, {
 						key: Math.random(),
-						props: {
-							code: token.node.props.code,
-							lang: token.node.props.lang,
-						}
+						code: token.node.props.code,
+						lang: token.node.props.lang,
 					})];
 				}

 				case 'inlineCode': {
-					return [createElement(MkCode, {
+					return [h(MkCode, {
 						key: Math.random(),
-						props: {
-							code: token.node.props.code,
-							lang: token.node.props.lang,
-							inline: true
-						}
+						code: token.node.props.code,
+						lang: token.node.props.lang,
+						inline: true
 					})];
 				}

 				case 'quote': {
-					if (this.shouldBreak) {
-						return [createElement('div', {
-							attrs: {
-								class: 'quote'
-							}
+					if (!this.nowrap) {
+						return [h('div', {
+							class: 'quote'
 						}, genEl(token.children))];
 					} else {
-						return [createElement('span', {
-							attrs: {
-								class: 'quote'
-							}
+						return [h('span', {
+							class: 'quote'
 						}, genEl(token.children))];
 					}
 				}

 				case 'title': {
-					return [createElement('div', {
-						attrs: {
-							class: 'title'
-						}
+					return [h('div', {
+						class: 'title'
 					}, genEl(token.children))];
 				}

 				case 'emoji': {
-					return [createElement('mk-emoji', {
+					return [h(MkEmoji, {
 						key: Math.random(),
-						attrs: {
-							emoji: token.node.props.emoji,
-							name: token.node.props.name
-						},
-						props: {
-							customEmojis: this.customEmojis,
-							normal: this.plain
-						}
+						emoji: token.node.props.emoji,
+						name: token.node.props.name,
+						customEmojis: this.customEmojis,
+						normal: this.plain
 					})];
 				}

 				case 'mathInline': {
-					//const MkFormula = () => import('./formula.vue').then(m => m.default);
-					return [createElement(MkFormula, {
+					return [h(MkFormula, {
 						key: Math.random(),
-						props: {
-							formula: token.node.props.formula,
-							block: false
-						}
+						formula: token.node.props.formula,
+						block: false
 					})];
 				}

 				case 'mathBlock': {
-					//const MkFormula = () => import('./formula.vue').then(m => m.default);
-					return [createElement(MkFormula, {
+					return [h(MkFormula, {
 						key: Math.random(),
-						props: {
-							formula: token.node.props.formula,
-							block: true
-						}
+						formula: token.node.props.formula,
+						block: true
 					})];
 				}

 				case 'search': {
-					//const MkGoogle = () => import('./google.vue').then(m => m.default);
-					return [createElement(MkGoogle, {
+					return [h(MkGoogle, {
 						key: Math.random(),
-						props: {
-							q: token.node.props.query
-						}
+						q: token.node.props.query
 					})];
 				}

 				default: {
-					console.log('unknown ast type:', token.node.type);
+					console.error('unrecognized ast type:', token.node.type);

 					return [];
 				}
@@ -287,6 +246,6 @@ export default Vue.component('misskey-flavored-markdown', {
 		}));

 		// Parse ast to DOM
-		return createElement('span', genEl(ast));
+		return h('span', genEl(ast));
 	}
 });
--- a/src/client/components/mini-chart.vue
+++ b/src/client/components/mini-chart.vue
@@ -30,10 +30,11 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		src: {
 			type: Array,
@@ -64,7 +65,7 @@ export default Vue.extend({
 		// Vueが何故かWatchを発動させない場合があるので
 		this.clock = setInterval(this.draw, 1000);
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		clearInterval(this.clock);
 	},
 	methods: {
--- a/src/client/components/misskey-flavored-markdown.vue
+++ b/src/client/components/misskey-flavored-markdown.vue
@@ -3,10 +3,10 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MfmCore from './mfm';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MfmCore
 	}
@@ -24,7 +24,7 @@ export default Vue.extend({
 		text-overflow: ellipsis;
 	}

-	::v-deep .quote {
+	::v-deep(.quote) {
 		display: block;
 		margin: 8px;
 		padding: 6px 0 6px 12px;
@@ -33,15 +33,17 @@ export default Vue.extend({
 		opacity: 0.7;
 	}

-	::v-deep pre {
+	::v-deep(pre) {
 		font-size: 0.8em;
 	}

-	::v-deep > code {
+	> ::v-deep(code) {
+		font-size: 0.8em;
 		word-break: break-all;
+		padding: 4px 6px;
 	}

-	::v-deep .title {
+	::v-deep(.title) {
 		text-align: center;
 		border-bottom: solid 1px var(--divider);
 	}
--- a/src/client/components/modal.vue
+++ b/src/client/components/modal.vue
@@ -1,90 +0,0 @@
-<template>
-<div class="mk-modal" v-hotkey.global="keymap">
-	<transition :name="$store.state.device.animation ? 'bg-fade' : ''" appear>
-		<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="canClose ? close() : () => {}"><slot></slot></div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	props: {
-		canClose: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-	},
-	data() {
-		return {
-			show: true,
-		};
-	},
-	computed: {
-		keymap(): any {
-			return {
-				'esc': this.close,
-			};
-		},
-	},
-	methods: {
-		close() {
-			this.show = false;
-			(this.$refs.bg as any).style.pointerEvents = 'none';
-			(this.$refs.content as any).style.pointerEvents = 'none';
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.modal-enter-active, .modal-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.modal-enter, .modal-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.bg-fade-enter-active, .bg-fade-leave-active {
-	transition: opacity 0.3s !important;
-}
-.bg-fade-enter, .bg-fade-leave-to {
-	opacity: 0;
-}
-
-.mk-modal {
-	> .bg {
-		z-index: 10000;
-	}
-
-	> .content {
-		position: fixed;
-		z-index: 10000;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		max-width: calc(100% - 16px);
-		max-height: calc(100% - 16px);
-		overflow: auto;
-		margin: auto;
-
-		::v-deep > * {
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			margin: auto;
-			max-height: 100%;
-			max-width: 100%;
-		}
-	}
-}
-</style>
--- a/src/client/components/note-header.vue
+++ b/src/client/components/note-header.vue
@@ -1,33 +1,36 @@
 <template>
 <header class="kkwtjztg">
-	<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">
-		<mk-user-name :user="note.user"/>
-	</router-link>
+	<MkA class="name" :to="userPage(note.user)" v-user-preview="note.user.id">
+		<MkUserName :user="note.user"/>
+	</MkA>
 	<span class="is-bot" v-if="note.user.isBot">bot</span>
-	<span class="username"><mk-acct :user="note.user"/></span>
-	<span class="admin" v-if="note.user.isAdmin"><fa :icon="faBookmark"/></span>
-	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><fa :icon="farBookmark"/></span>
+	<span class="username"><MkAcct :user="note.user"/></span>
+	<span class="admin" v-if="note.user.isAdmin"><Fa :icon="faBookmark"/></span>
+	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><Fa :icon="farBookmark"/></span>
 	<div class="info">
-		<span class="mobile" v-if="note.viaMobile"><fa :icon="faMobileAlt"/></span>
-		<router-link class="created-at" :to="note | notePage">
-			<mk-time :time="note.createdAt"/>
-		</router-link>
+		<span class="mobile" v-if="note.viaMobile"><Fa :icon="faMobileAlt"/></span>
+		<MkA class="created-at" :to="notePage(note)">
+			<MkTime :time="note.createdAt"/>
+		</MkA>
 		<span class="visibility" v-if="note.visibility !== 'public'">
-			<fa v-if="note.visibility === 'home'" :icon="faHome"/>
-			<fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
-			<fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+			<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
+			<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
+			<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
 		</span>
-		<span class="localOnly" v-if="note.localOnly"><fa :icon="faBiohazard"/></span>
+		<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
 	</div>
 </header>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
 import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
+import notePage from '../filters/note';
+import { userPage } from '../filters/user';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		note: {
 			type: Object,
@@ -39,6 +42,11 @@ export default Vue.extend({
 		return {
 			faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark, faBiohazard
 		};
+	},
+
+	methods: {
+		notePage,
+		userPage
 	}
 });
 </script>
--- a/src/client/components/note-preview.vue
+++ b/src/client/components/note-preview.vue
@@ -1,15 +1,15 @@
 <template>
 <div class="yohlumlk">
-	<mk-avatar class="avatar" :user="note.user"/>
+	<MkAvatar class="avatar" :user="note.user"/>
 	<div class="main">
-		<x-note-header class="header" :note="note" :mini="true"/>
+		<XNoteHeader class="header" :note="note" :mini="true"/>
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
-				<x-cw-button v-model="showContent" :note="note"/>
+				<XCwButton v-model:value="showContent" :note="note"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
-				<x-sub-note-content class="text" :note="note"/>
+				<XSubNote-content class="text" :note="note"/>
 			</div>
 		</div>
 	</div>
@@ -17,12 +17,13 @@
 </template>

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

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNoteHeader,
 		XSubNoteContent,
--- a/src/client/components/note.sub.vue
+++ b/src/client/components/note.sub.vue
@@ -1,32 +1,33 @@
 <template>
 <div class="wrpstxzv" :class="{ children }" v-size="{ max: [450] }">
 	<div class="main">
-		<mk-avatar class="avatar" :user="note.user"/>
+		<MkAvatar class="avatar" :user="note.user"/>
 		<div class="body">
-			<x-note-header class="header" :note="note" :mini="true"/>
+			<XNoteHeader class="header" :note="note" :mini="true"/>
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
-					<mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
-					<x-cw-button v-model="showContent" :note="note"/>
+					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
+					<XCwButton v-model:value="showContent" :note="note"/>
 				</p>
 				<div class="content" v-show="note.cw == null || showContent">
-					<x-sub-note-content class="text" :note="note"/>
+					<XSubNote-content class="text" :note="note"/>
 				</div>
 			</div>
 		</div>
 	</div>
-	<x-sub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :children="true"/>
+	<XSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :children="true"/>
 </div>
 </template>

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

-export default Vue.extend({
-	name: 'x-sub',
+export default defineComponent({
+	name: 'XSub',

 	components: {
 		XNoteHeader,
@@ -65,7 +66,7 @@ export default Vue.extend({

 	created() {
 		if (this.detail) {
-			this.$root.api('notes/children', {
+			os.api('notes/children', {
 				noteId: this.note.id,
 				limit: 5
 			}).then(replies => {
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -8,96 +8,101 @@
 	v-hotkey="keymap"
 	v-size="{ max: [500, 450, 350, 300] }"
 >
-	<x-sub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
-	<x-sub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
-	<div class="info" v-if="pinned"><fa :icon="faThumbtack"/> {{ $t('pinnedNote') }}</div>
-	<div class="info" v-if="appearNote._prId_"><fa :icon="faBullhorn"/> {{ $t('promotion') }}<button class="_textButton hide" @click="readPromo()">{{ $t('hideThisNote') }} <fa :icon="faTimes"/></button></div>
-	<div class="info" v-if="appearNote._featuredId_"><fa :icon="faBolt"/> {{ $t('featured') }}</div>
+	<XSub v-for="note in conversation" class="reply-to-more" :key="note.id" :note="note"/>
+	<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
+	<div class="info" v-if="pinned"><Fa :icon="faThumbtack"/> {{ $t('pinnedNote') }}</div>
+	<div class="info" v-if="appearNote._prId_"><Fa :icon="faBullhorn"/> {{ $t('promotion') }}<button class="_textButton hide" @click="readPromo()">{{ $t('hideThisNote') }} <Fa :icon="faTimes"/></button></div>
+	<div class="info" v-if="appearNote._featuredId_"><Fa :icon="faBolt"/> {{ $t('featured') }}</div>
 	<div class="renote" v-if="isRenote">
-		<mk-avatar class="avatar" :user="note.user"/>
-		<fa :icon="faRetweet"/>
-		<i18n path="renotedBy" tag="span">
-			<router-link class="name" :to="note.user | userPage" v-user-preview="note.userId" place="user">
-				<mk-user-name :user="note.user"/>
-			</router-link>
-		</i18n>
+		<MkAvatar class="avatar" :user="note.user"/>
+		<Fa :icon="faRetweet"/>
+		<i18n-t keypath="renotedBy" tag="span">
+			<template #user>
+				<MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
+					<MkUserName :user="note.user"/>
+				</MkA>
+			</template>
+		</i18n-t>
 		<div class="info">
 			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
-				<fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
-				<mk-time :time="note.createdAt"/>
+				<Fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
+				<MkTime :time="note.createdAt"/>
 			</button>
 			<span class="visibility" v-if="note.visibility !== 'public'">
-				<fa v-if="note.visibility === 'home'" :icon="faHome"/>
-				<fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
-				<fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+				<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
+				<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
+				<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
 			</span>
-			<span class="localOnly" v-if="note.localOnly"><fa :icon="faBiohazard"/></span>
+			<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
 		</div>
 	</div>
-	<article class="article">
-		<mk-avatar class="avatar" :user="appearNote.user"/>
+	<article class="article" @contextmenu="onContextmenu">
+		<MkAvatar class="avatar" :user="appearNote.user"/>
 		<div class="main">
-			<x-note-header class="header" :note="appearNote" :mini="true"/>
-			<div class="body" ref="noteBody">
+			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
+			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
+			<div class="body">
 				<p v-if="appearNote.cw != null" class="cw">
-				<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
-					<x-cw-button v-model="showContent" :note="appearNote"/>
+					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
+					<XCwButton v-model:value="showContent" :note="appearNote"/>
 				</p>
 				<div class="content" v-show="appearNote.cw == null || showContent">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $t('private') }})</span>
-						<router-link class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><fa :icon="faReply"/></router-link>
-						<mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
+						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><Fa :icon="faReply"/></MkA>
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
 						<a class="rp" v-if="appearNote.renote != null">RN:</a>
 					</div>
 					<div class="files" v-if="appearNote.files.length > 0">
-						<x-media-list :media-list="appearNote.files" :parent-element="noteBody"/>
+						<XMediaList :media-list="appearNote.files"/>
 					</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" :detail="detail" class="url-preview"/>
-					<div class="renote" v-if="appearNote.renote"><x-note-preview :note="appearNote.renote"/></div>
+					<XPoll v-if="appearNote.poll" :note="appearNote" ref="pollViewer" class="poll"/>
+					<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="detail" class="url-preview"/>
+					<div class="renote" v-if="appearNote.renote"><XNotePreview :note="appearNote.renote"/></div>
 				</div>
-				<router-link v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</router-link>
+				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><Fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<footer class="footer">
-				<x-reactions-viewer :note="appearNote" ref="reactionsViewer"/>
+				<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
 				<button @click="reply()" class="button _button">
-					<template v-if="appearNote.reply"><fa :icon="faReplyAll"/></template>
-					<template v-else><fa :icon="faReply"/></template>
+					<template v-if="appearNote.reply"><Fa :icon="faReplyAll"/></template>
+					<template v-else><Fa :icon="faReply"/></template>
 					<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
 				</button>
 				<button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton">
-					<fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
+					<Fa :icon="faRetweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
 				</button>
 				<button v-else class="button _button">
-					<fa :icon="faBan"/>
+					<Fa :icon="faBan"/>
 				</button>
 				<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
-					<fa :icon="faPlus"/>
+					<Fa :icon="faPlus"/>
 				</button>
 				<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
-					<fa :icon="faMinus"/>
+					<Fa :icon="faMinus"/>
 				</button>
 				<button class="button _button" @click="menu()" ref="menuButton">
-					<fa :icon="faEllipsisH"/>
+					<Fa :icon="faEllipsisH"/>
 				</button>
 			</footer>
 		</div>
 	</article>
-	<x-sub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
+	<XSub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
 </div>
 <div v-else class="_panel muted" @click="muted = false">
-	<i18n path="userSaysSomething" tag="small">
-		<router-link class="name" :to="appearNote.user | userPage" v-user-preview="appearNote.userId" place="name">
-			<mk-user-name :user="appearNote.user"/>
-		</router-link>
-	</i18n>
+	<i18n-t keypath="userSaysSomething" tag="small">
+		<template #name>
+			<MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.userId">
+				<MkUserName :user="appearNote.user"/>
+			</MkA>
+		</template>
+	</i18n-t>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
-import { faSatelliteDish, 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 { computed, defineAsyncComponent, defineComponent, markRaw, ref } from 'vue';
+import { faSatelliteDish, faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug, faExclamationCircle } 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,21 +113,24 @@ import XReactionsViewer from './reactions-viewer.vue';
 import XMediaList from './media-list.vue';
 import XCwButton from './cw-button.vue';
 import XPoll from './poll.vue';
-import MkUrlPreview from './url-preview.vue';
-import MkReactionPicker from './reaction-picker.vue';
-import pleaseLogin from '../scripts/please-login';
-import { focusPrev, focusNext } from '../scripts/focus';
-import { url } from '../config';
-import copyToClipboard from '../scripts/copy-to-clipboard';
-import { checkWordMute } from '../scripts/check-word-mute';
-import { utils } from '@syuilo/aiscript';
+import { pleaseLogin } from '@/scripts/please-login';
+import { focusPrev, focusNext } from '@/scripts/focus';
+import { url } from '@/config';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { checkWordMute } from '@/scripts/check-word-mute';
+import { userPage } from '@/filters/user';
+import * as os from '@/os';
+import { noteActions, noteViewInterruptors } from '@/store';

-export default Vue.extend({
-	model: {
-		prop: 'note',
-		event: 'updated'
-	},
+function markRawAll(...xs) {
+	for (const x of xs) {
+		markRaw(x);
+	}
+}

+markRawAll(faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish);
+
+export default defineComponent({
 	components: {
 		XSub,
 		XNoteHeader,
@@ -131,13 +139,14 @@ export default Vue.extend({
 		XMediaList,
 		XCwButton,
 		XPoll,
-		MkUrlPreview,
+		MkUrlPreview: defineAsyncComponent(() => import('@/components/url-preview.vue')),
+		MkInstanceTicker: defineAsyncComponent(() => import('@/components/instance-ticker.vue')),
 	},

 	inject: {
 		inChannel: {
 			default: null
-		}
+		},
 	},

 	props: {
@@ -157,6 +166,8 @@ export default Vue.extend({
 		},
 	},

+	emits: ['update:note'],
+
 	data() {
 		return {
 			connection: null,
@@ -165,12 +176,14 @@ export default Vue.extend({
 			showContent: false,
 			isDeleted: false,
 			muted: false,
-			noteBody: this.$refs.noteBody,
 			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish
 		};
 	},

 	computed: {
+		rs() {
+			return this.$store.state.settings.reactions;
+		},
 		keymap(): any {
 			return {
 				'r': () => this.reply(true),
@@ -184,16 +197,16 @@ export default Vue.extend({
 				'esc': this.blur,
 				'm|o': () => this.menu(true),
 				's': this.toggleShowContent,
-				'1': () => this.reactDirectly(this.$store.state.settings.reactions[0]),
-				'2': () => this.reactDirectly(this.$store.state.settings.reactions[1]),
-				'3': () => this.reactDirectly(this.$store.state.settings.reactions[2]),
-				'4': () => this.reactDirectly(this.$store.state.settings.reactions[3]),
-				'5': () => this.reactDirectly(this.$store.state.settings.reactions[4]),
-				'6': () => this.reactDirectly(this.$store.state.settings.reactions[5]),
-				'7': () => this.reactDirectly(this.$store.state.settings.reactions[6]),
-				'8': () => this.reactDirectly(this.$store.state.settings.reactions[7]),
-				'9': () => this.reactDirectly(this.$store.state.settings.reactions[8]),
-				'0': () => this.reactDirectly(this.$store.state.settings.reactions[9]),
+				'1': () => this.reactDirectly(this.rs[0]),
+				'2': () => this.reactDirectly(this.rs[1]),
+				'3': () => this.reactDirectly(this.rs[2]),
+				'4': () => this.reactDirectly(this.rs[3]),
+				'5': () => this.reactDirectly(this.rs[4]),
+				'6': () => this.reactDirectly(this.rs[5]),
+				'7': () => this.reactDirectly(this.rs[6]),
+				'8': () => this.reactDirectly(this.rs[7]),
+				'9': () => this.reactDirectly(this.rs[8]),
+				'0': () => this.reactDirectly(this.rs[9]),
 			};
 		},

@@ -246,27 +259,33 @@ export default Vue.extend({
 			} else {
 				return null;
 			}
+		},
+
+		showTicker() {
+			if (this.$store.state.device.instanceTicker === 'always') return true;
+			if (this.$store.state.device.instanceTicker === 'remote' && this.appearNote.user.instance) return true;
+			return false;
 		}
 	},

 	async created() {
 		if (this.$store.getters.isSignedIn) {
-			this.connection = this.$root.stream;
+			this.connection = os.stream;
 		}

 		// plugin
-		if (this.$store.state.noteViewInterruptors.length > 0) {
+		if (noteViewInterruptors.length > 0) {
 			let result = this.note;
-			for (const interruptor of this.$store.state.noteViewInterruptors) {
-				result = utils.valToJs(await interruptor.handler(JSON.parse(JSON.stringify(result))));
+			for (const interruptor of noteViewInterruptors) {
+				result = await interruptor.handler(JSON.parse(JSON.stringify(result)));
 			}
-			this.$emit('updated', Object.freeze(result));
+			this.$emit('update:note', Object.freeze(result));
 		}

 		this.muted = await checkWordMute(this.appearNote, this.$store.state.i, this.$store.state.settings.mutedWords);

 		if (this.detail) {
-			this.$root.api('notes/children', {
+			os.api('notes/children', {
 				noteId: this.appearNote.id,
 				limit: 30
 			}).then(replies => {
@@ -274,7 +293,7 @@ export default Vue.extend({
 			});

 			if (this.appearNote.replyId) {
-				this.$root.api('notes/conversation', {
+				os.api('notes/conversation', {
 					noteId: this.appearNote.replyId
 				}).then(conversation => {
 					this.conversation = conversation.reverse();
@@ -289,11 +308,9 @@ export default Vue.extend({
 		if (this.$store.getters.isSignedIn) {
 			this.connection.on('_connected_', this.onStreamConnected);
 		}
-
-		this.noteBody = this.$refs.noteBody;
 	},

-	beforeDestroy() {
+	beforeUnmount() {
 		this.decapture(true);

 		if (this.$store.getters.isSignedIn) {
@@ -303,7 +320,7 @@ export default Vue.extend({

 	methods: {
 		updateAppearNote(v) {
-			this.$emit('updated', Object.freeze(this.isRenote ? {
+			this.$emit('update:note', Object.freeze(this.isRenote ? {
 				...this.note,
 				renote: {
 					...this.note.renote,
@@ -316,7 +333,7 @@ export default Vue.extend({
 		},

 		readPromo() {
-			(this as any).$root.api('promo/read', {
+			os.api('promo/read', {
 				noteId: this.appearNote.id
 			});
 			this.isDeleted = true;
@@ -439,8 +456,8 @@ export default Vue.extend({
 		},

 		reply(viaKeyboard = false) {
-			pleaseLogin(this.$root);
-			this.$root.post({
+			pleaseLogin();
+			os.post({
 				reply: this.appearNote,
 				animation: !viaKeyboard,
 			}, () => {
@@ -449,57 +466,56 @@ export default Vue.extend({
 		},

 		renote(viaKeyboard = false) {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			this.blur();
-			this.$root.menu({
-				items: [{
-					text: this.$t('renote'),
-					icon: faRetweet,
-					action: () => {
-						(this as any).$root.api('notes/create', {
-							renoteId: this.appearNote.id
-						});
-					}
-				}, {
-					text: this.$t('quote'),
-					icon: faQuoteRight,
-					action: () => {
-						this.$root.post({
-							renote: this.appearNote,
-						});
-					}
-				}]
-				source: this.$refs.renoteButton,
+			os.modalMenu([{
+				text: this.$t('renote'),
+				icon: faRetweet,
+				action: () => {
+					os.api('notes/create', {
+						renoteId: this.appearNote.id
+					});
+				}
+			}, {
+				text: this.$t('quote'),
+				icon: faQuoteRight,
+				action: () => {
+					os.post({
+						renote: this.appearNote,
+					});
+				}
+			}], this.$refs.renoteButton, {
 				viaKeyboard
 			});
 		},

 		renoteDirectly() {
-			(this as any).$root.api('notes/create', {
+			os.api('notes/create', {
 				renoteId: this.appearNote.id
 			});
 		},

 		react(viaKeyboard = false) {
-			pleaseLogin(this.$root);
+			pleaseLogin();
 			this.blur();
-			const picker = this.$root.new(MkReactionPicker, {
-				source: this.$refs.reactButton,
+			os.popup(import('@/components/reaction-picker.vue'), {
 				showFocus: viaKeyboard,
-			});
-			picker.$once('chosen', reaction => {
-				this.$root.api('notes/reactions/create', {
-					noteId: this.appearNote.id,
-					reaction: reaction
-				}).then(() => {
-					picker.close();
-				});
-			});
-			picker.$once('closed', this.focus);
+				src: this.$refs.reactButton,
+			}, {
+				done: reaction => {
+					if (reaction) {
+						os.api('notes/reactions/create', {
+							noteId: this.appearNote.id,
+							reaction: reaction
+						});
+					}
+					this.focus();
+				},
+			}, 'closed');
 		},

 		reactDirectly(reaction) {
-			this.$root.api('notes/reactions/create', {
+			os.api('notes/reactions/create', {
 				noteId: this.appearNote.id,
 				reaction: reaction
 			});
@@ -508,87 +524,68 @@ export default Vue.extend({
 		undoReact(note) {
 			const oldReaction = note.myReaction;
 			if (!oldReaction) return;
-			this.$root.api('notes/reactions/delete', {
+			os.api('notes/reactions/delete', {
 				noteId: note.id
 			});
 		},

 		favorite() {
-			pleaseLogin(this.$root);
-			this.$root.api('notes/favorites/create', {
+			pleaseLogin();
+			os.apiWithDialog('notes/favorites/create', {
 				noteId: this.appearNote.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
 			});
 		},

 		del() {
-			this.$root.dialog({
+			os.dialog({
 				type: 'warning',
 				text: this.$t('noteDeleteConfirm'),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) return;

-				this.$root.api('notes/delete', {
+				os.api('notes/delete', {
 					noteId: this.appearNote.id
 				});
 			});
 		},

 		delEdit() {
-			this.$root.dialog({
+			os.dialog({
 				type: 'warning',
 				text: this.$t('deleteAndEditConfirm'),
 				showCancelButton: true
 			}).then(({ canceled }) => {
 				if (canceled) return;

-				this.$root.api('notes/delete', {
+				os.api('notes/delete', {
 					noteId: this.appearNote.id
 				});

-				this.$root.post({ initialNote: this.appearNote, renote: this.appearNote.renote, reply: this.appearNote.reply });
+				os.post({ initialNote: this.appearNote, renote: this.appearNote.renote, reply: this.appearNote.reply, channel: this.appearNote.channel });
 			});
 		},

 		toggleFavorite(favorite: boolean) {
-			this.$root.api(favorite ? 'notes/favorites/create' : 'notes/favorites/delete', {
+			os.apiWithDialog(favorite ? 'notes/favorites/create' : 'notes/favorites/delete', {
 				noteId: this.appearNote.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
 			});
 		},

 		toggleWatch(watch: boolean) {
-			this.$root.api(watch ? 'notes/watching/create' : 'notes/watching/delete', {
+			os.apiWithDialog(watch ? 'notes/watching/create' : 'notes/watching/delete', {
 				noteId: this.appearNote.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
 			});
 		},

-		async menu(viaKeyboard = false) {
+		getMenu() {
 			let menu;
 			if (this.$store.getters.isSignedIn) {
-				const state = await this.$root.api('notes/state', {
+				const statePromise = os.api('notes/state', {
 					noteId: this.appearNote.id
 				});
+
 				menu = [{
-					type: 'link',
-					icon: faInfoCircle,
-					text: this.$t('details'),
-					to: '/notes/' + this.appearNote.id
-				}, null, {
 					icon: faCopy,
 					text: this.$t('copyContent'),
 					action: this.copyContent
@@ -604,7 +601,7 @@ export default Vue.extend({
 					}
 				} : undefined,
 				null,
-				state.isFavorited ? {
+				statePromise.then(state => state.isFavorited ? {
 					icon: faStar,
 					text: this.$t('unfavorite'),
 					action: () => this.toggleFavorite(false)
@@ -612,8 +609,8 @@ export default Vue.extend({
 					icon: faStar,
 					text: this.$t('favorite'),
 					action: () => this.toggleFavorite(true)
-				},
-				this.appearNote.userId != this.$store.state.i.id ? state.isWatching ? {
+				}),
+				(this.appearNote.userId != this.$store.state.i.id) ? statePromise.then(state => state.isWatching ? {
 					icon: faEyeSlash,
 					text: this.$t('unwatch'),
 					action: () => this.toggleWatch(false)
@@ -621,7 +618,7 @@ export default Vue.extend({
 					icon: faEye,
 					text: this.$t('watch'),
 					action: () => this.toggleWatch(true)
-				} : undefined,
+				}) : undefined,
 				this.appearNote.userId == this.$store.state.i.id ? (this.$store.state.i.pinnedNoteIds || []).includes(this.appearNote.id) ? {
 					icon: faThumbtack,
 					text: this.$t('unpin'),
@@ -640,6 +637,21 @@ export default Vue.extend({
 					}]
 					: []
 				),
+				...(this.appearNote.userId != this.$store.state.i.id ? [
+					null,
+					{
+						icon: faExclamationCircle,
+						text: this.$t('reportAbuse'),
+						action: () => {
+							const u = `${url}/notes/${this.appearNote.id}`;
+							os.popup(import('@/components/abuse-report-window.vue'), {
+								user: this.appearNote.user,
+								initialComment: `Note: ${u}\n-----\n`
+							}, {}, 'closed');
+						}
+					}]
+					: []
+				),
 				...(this.appearNote.userId == this.$store.state.i.id || this.$store.state.i.isModerator || this.$store.state.i.isAdmin ? [
 					null,
 					this.appearNote.userId == this.$store.state.i.id ? {
@@ -650,6 +662,7 @@ export default Vue.extend({
 					{
 						icon: faTrashAlt,
 						text: this.$t('delete'),
+						danger: true,
 						action: this.del
 					}]
 					: []
@@ -674,8 +687,8 @@ 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 => ({
+			if (noteActions.length > 0) {
+				menu = menu.concat([null, ...noteActions.map(action => ({
 					icon: faPlug,
 					text: action.title,
 					action: () => {
@@ -684,27 +697,40 @@ export default Vue.extend({
 				}))]);
 			}

-			this.$root.menu({
-				items: menu,
-				source: this.$refs.menuButton,
+			return menu;
+		},
+
+		onContextmenu(e) {
+			const isLink = (el: HTMLElement) => {
+				if (el.tagName === 'A') return true;
+				if (el.parentElement) {
+					return isLink(el.parentElement);
+				}
+			};
+			if (isLink(e.target)) return;
+			if (window.getSelection().toString() !== '') return;
+			os.contextMenu(this.getMenu(), e).then(this.focus);
+		},
+
+		menu(viaKeyboard = false) {
+			os.modalMenu(this.getMenu(), this.$refs.menuButton, {
 				viaKeyboard
 			}).then(this.focus);
 		},

 		showRenoteMenu(viaKeyboard = false) {
 			if (!this.isMyRenote) return;
-			this.$root.menu({
-				items: [{
-					text: this.$t('unrenote'),
-					icon: faTrashAlt,
-					action: () => {
-						this.$root.api('notes/delete', {
-							noteId: this.note.id
-						});
-						this.isDeleted = true;
-					}
-				}],
-				source: this.$refs.renoteTime,
+			os.modalMenu([{
+				text: this.$t('unrenote'),
+				icon: faTrashAlt,
+				danger: true,
+				action: () => {
+					os.api('notes/delete', {
+						noteId: this.note.id
+					});
+					this.isDeleted = true;
+				}
+			}], this.$refs.renoteTime, {
 				viaKeyboard: viaKeyboard
 			});
 		},
@@ -715,31 +741,20 @@ export default Vue.extend({

 		copyContent() {
 			copyToClipboard(this.appearNote.text);
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.success();
 		},

 		copyLink() {
 			copyToClipboard(`${url}/notes/${this.appearNote.id}`);
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.success();
 		},

 		togglePin(pin: boolean) {
-			this.$root.api(pin ? 'i/pin' : 'i/unpin', {
+			os.apiWithDialog(pin ? 'i/pin' : 'i/unpin', {
 				noteId: this.appearNote.id
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}).catch(e => {
+			}, undefined, null, e => {
 				if (e.id === '72dab508-c64d-498f-8740-a8eec1ba385a') {
-					this.$root.dialog({
+					os.dialog({
 						type: 'error',
 						text: this.$t('pinLimitExceeded')
 					});
@@ -748,26 +763,16 @@ export default Vue.extend({
 		},

 		async promote() {
-			const { canceled, result: days } = await this.$root.dialog({
+			const { canceled, result: days } = await os.dialog({
 				title: this.$t('numberOfDays'),
 				input: { type: 'number' }
 			});

 			if (canceled) return;

-			this.$root.api('admin/promo/create', {
+			os.apiWithDialog('admin/promo/create', {
 				noteId: this.appearNote.id,
 				expiresAt: Date.now() + (86400000 * days)
-			}).then(() => {
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
-			}).catch(e => {
-				this.$root.dialog({
-					type: 'error',
-					text: e
-				});
 			});
 		},

@@ -785,7 +790,9 @@ export default Vue.extend({

 		focusAfter() {
 			focusNext(this.$el);
-		}
+		},
+
+		userPage
 	}
 });
 </script>
@@ -795,10 +802,28 @@ export default Vue.extend({
 	position: relative;
 	transition: box-shadow 0.1s ease;
 	overflow: hidden;
+	contain: content;

 	&:focus {
 		outline: none;
-		box-shadow: 0 0 0 3px var(--focus);
+
+		&:after {
+			content: "";
+			pointer-events: none;
+			display: block;
+			position: absolute;
+			z-index: 10;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			margin: auto;
+			width: calc(100% - 8px);
+			height: calc(100% - 8px);
+			border: dashed 1px var(--focus);
+			border-radius: var(--radius);
+			box-sizing: border-box;
+		}
 	}

 	&:hover > .article > .main > .footer > .button {
--- a/src/client/components/notes.vue
+++ b/src/client/components/notes.vue
@@ -1,42 +1,41 @@
 <template>
-<div class="mk-notes">
+<div class="_list_">
 	<div class="_fullinfo" v-if="empty">
 		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 		<div>{{ $t('noNotes') }}</div>
 	</div>

-	<mk-error v-if="error" @retry="init()"/>
+	<MkError v-if="error" @retry="init()"/>

 	<div v-show="more && reversed" style="margin-bottom: var(--margin);">
-		<button class="_panel _button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<button class="_loadMore" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-			<template v-if="moreFetching"><mk-loading inline/></template>
+			<template v-if="moreFetching"><MkLoading inline/></template>
 		</button>
 	</div>

-	<x-list ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
-		<x-note :note="note" @updated="updated(note, $event)" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
-	</x-list>
+	<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
+		<XNote :note="note" @update:note="updated(note, $event)" :detail="detail" :key="note._featuredId_ || note._prId_ || note.id"/>
+	</XList>

 	<div v-show="more && !reversed" style="margin-top: var(--margin);">
-		<button class="_panel _button" ref="loadMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+		<button class="_loadMore" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 			<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-			<template v-if="moreFetching"><mk-loading inline/></template>
+			<template v-if="moreFetching"><MkLoading inline/></template>
 		</button>
 	</div>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
-import paging from '../scripts/paging';
+import { defineComponent } from 'vue';
+import paging from '@/scripts/paging';
 import XNote from './note.vue';
 import XList from './date-separated-list.vue';
-import MkButton from './ui/button.vue';

-export default Vue.extend({
+export default defineComponent({
 	components: {
-		XNote, XList, MkButton
+		XNote, XList,
 	},

 	mixins: [
@@ -68,6 +67,8 @@ export default Vue.extend({
 		}
 	},

+	emits: ['before', 'after'],
+
 	computed: {
 		notes(): any[] {
 			return this.prop ? this.items.map(item => item[this.prop]) : this.items;
@@ -82,9 +83,9 @@ export default Vue.extend({
 		updated(oldValue, newValue) {
 			const i = this.notes.findIndex(n => n === oldValue);
 			if (this.prop) {
-				Vue.set(this.items[i], this.prop, newValue);
+				this.items[i][this.prop] = newValue;
 			} else {
-				Vue.set(this.items, i, newValue);
+				this.items[i] = newValue;
 			}
 		},

@@ -94,4 +95,3 @@ export default Vue.extend({
 	}
 });
 </script>
-
--- a/src/client/components/notification-setting-window.vue
+++ b/src/client/components/notification-setting-window.vue
@@ -0,0 +1,97 @@
+<template>
+<XModalWindow ref="dialog"
+	:width="400"
+	:height="450"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	@ok="ok()"
+	@close="$refs.dialog.close()"
+	@closed="$emit('closed')"
+>
+	<template #header>{{ $t('notificationSetting') }}</template>
+	<div v-if="showGlobalToggle" class="_section">
+		<MkSwitch v-model:value="useGlobalSetting">
+			{{ $t('useGlobalSetting') }}
+			<template #desc>{{ $t('useGlobalSettingDesc') }}</template>
+		</MkSwitch>
+	</div>
+	<div v-if="!useGlobalSetting" class="_section">
+		<MkInfo>{{ $t('notificationSettingDesc') }}</MkInfo>
+		<MkButton inline @click="disableAll">{{ $t('disableAll') }}</MkButton>
+		<MkButton inline @click="enableAll">{{ $t('enableAll') }}</MkButton>
+		<MkSwitch v-for="type in notificationTypes" :key="type" v-model:value="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</MkSwitch>
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import XModalWindow from '@/components/ui/modal-window.vue';
+import MkSwitch from './ui/switch.vue';
+import MkInfo from './ui/info.vue';
+import MkButton from './ui/button.vue';
+import { notificationTypes } from '../../types';
+
+export default defineComponent({
+	components: {
+		XModalWindow,
+		MkSwitch,
+		MkInfo,
+		MkButton
+	},
+
+	props: {
+		includingTypes: {
+			// TODO: これで型に合わないものを弾いてくれるのかどうか要調査
+			type: Array as PropType<typeof notificationTypes[number][]>,
+			required: false,
+			default: null,
+		},
+		showGlobalToggle: {
+			type: Boolean,
+			required: false,
+			default: true,
+		}
+	},
+
+	emits: ['done', 'closed'],
+
+	data() {
+		return {
+			typesMap: {} as Record<typeof notificationTypes[number], boolean>,
+			useGlobalSetting: false,
+			notificationTypes,
+		};
+	},
+
+	created() {
+		this.useGlobalSetting = this.includingTypes === null && this.showGlobalToggle;
+
+		for (const type of this.notificationTypes) {
+			this.typesMap[type] = this.includingTypes === null || this.includingTypes.includes(type);
+		}
+	},
+
+	methods: {
+		ok() {
+			const includingTypes = this.useGlobalSetting ? null : (Object.keys(this.typesMap) as typeof notificationTypes[number][])
+				.filter(type => this.typesMap[type]);
+
+			this.$emit('done', { includingTypes });
+			this.$refs.dialog.close();
+		},
+
+		disableAll() {
+			for (const type in this.typesMap) {
+				this.typesMap[type as typeof notificationTypes[number]] = false;
+			}
+		},
+
+		enableAll() {
+			for (const type in this.typesMap) {
+				this.typesMap[type as typeof notificationTypes[number]] = true;
+			}
+		}
+	}
+});
+</script>
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -1,71 +1,75 @@
 <template>
 <div class="qglefbjs" :class="notification.type" v-size="{ max: [500, 600] }">
 	<div class="head">
-		<mk-avatar v-if="notification.user" class="icon" :user="notification.user"/>
-		<img v-else class="icon" :src="notification.icon" alt=""/>
+		<MkAvatar v-if="notification.user" class="icon" :user="notification.user"/>
+		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
 		<div class="sub-icon" :class="notification.type">
-			<fa :icon="faPlus" v-if="notification.type === 'follow'"/>
-			<fa :icon="faClock" v-else-if="notification.type === 'receiveFollowRequest'"/>
-			<fa :icon="faCheck" v-else-if="notification.type === 'followRequestAccepted'"/>
-			<fa :icon="faIdCardAlt" v-else-if="notification.type === 'groupInvited'"/>
-			<fa :icon="faRetweet" v-else-if="notification.type === 'renote'"/>
-			<fa :icon="faReply" v-else-if="notification.type === 'reply'"/>
-			<fa :icon="faAt" v-else-if="notification.type === 'mention'"/>
-			<fa :icon="faQuoteLeft" v-else-if="notification.type === 'quote'"/>
-			<fa :icon="faPollH" v-else-if="notification.type === 'pollVote'"/>
-			<x-reaction-icon v-else-if="notification.type === 'reaction'" :reaction="notification.reaction" :custom-emojis="notification.note.emojis" :no-style="true"/>
+			<Fa :icon="faPlus" v-if="notification.type === 'follow'"/>
+			<Fa :icon="faClock" v-else-if="notification.type === 'receiveFollowRequest'"/>
+			<Fa :icon="faCheck" v-else-if="notification.type === 'followRequestAccepted'"/>
+			<Fa :icon="faIdCardAlt" v-else-if="notification.type === 'groupInvited'"/>
+			<Fa :icon="faRetweet" v-else-if="notification.type === 'renote'"/>
+			<Fa :icon="faReply" v-else-if="notification.type === 'reply'"/>
+			<Fa :icon="faAt" v-else-if="notification.type === 'mention'"/>
+			<Fa :icon="faQuoteLeft" v-else-if="notification.type === 'quote'"/>
+			<Fa :icon="faPollH" v-else-if="notification.type === 'pollVote'"/>
+			<XReactionIcon v-else-if="notification.type === 'reaction'" :reaction="notification.reaction" :custom-emojis="notification.note.emojis" :no-style="true"/>
 		</div>
 	</div>
 	<div class="tail">
 		<header>
-			<router-link v-if="notification.user" class="name" :to="notification.user | userPage" v-user-preview="notification.user.id"><mk-user-name :user="notification.user"/></router-link>
+			<MkA v-if="notification.user" class="name" :to="userPage(notification.user)" v-user-preview="notification.user.id"><MkUserName :user="notification.user"/></MkA>
 			<span v-else>{{ notification.header }}</span>
-			<mk-time :time="notification.createdAt" v-if="withTime"/>
+			<MkTime :time="notification.createdAt" v-if="withTime" class="time"/>
 		</header>
-		<router-link v-if="notification.type === 'reaction'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
-			<fa :icon="faQuoteLeft"/>
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<fa :icon="faQuoteRight"/>
-		</router-link>
-		<router-link v-if="notification.type === 'renote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note.renote)">
-			<fa :icon="faQuoteLeft"/>
-			<mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
-			<fa :icon="faQuoteRight"/>
-		</router-link>
-		<router-link v-if="notification.type === 'reply'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-		</router-link>
-		<router-link v-if="notification.type === 'mention'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-		</router-link>
-		<router-link v-if="notification.type === 'quote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-		</router-link>
-		<router-link v-if="notification.type === 'pollVote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
-			<fa :icon="faQuoteLeft"/>
-			<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<fa :icon="faQuoteRight"/>
-		</router-link>
-		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $t('youGotNewFollower') }}<div v-if="full"><mk-follow-button :user="notification.user" :full="true"/></div></span>
+		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Fa :icon="faQuoteLeft"/>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<Fa :icon="faQuoteRight"/>
+		</MkA>
+		<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
+			<Fa :icon="faQuoteLeft"/>
+			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
+			<Fa :icon="faQuoteRight"/>
+		</MkA>
+		<MkA v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+		</MkA>
+		<MkA v-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+		</MkA>
+		<MkA v-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+		</MkA>
+		<MkA v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Fa :icon="faQuoteLeft"/>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<Fa :icon="faQuoteRight"/>
+		</MkA>
+		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $t('youGotNewFollower') }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
 		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ $t('followRequestAccepted') }}</span>
 		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ $t('receiveFollowRequest') }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ $t('reject') }}</button></div></span>
 		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ $t('groupInvited') }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ $t('reject') }}</button></div></span>
 		<span v-if="notification.type === 'app'" class="text">
-			<mfm :text="notification.body" :nowrap="!full"/>
+			<Mfm :text="notification.body" :nowrap="!full"/>
 		</span>
 	</div>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faCheck, faPollH } from '@fortawesome/free-solid-svg-icons';
 import { faClock } from '@fortawesome/free-regular-svg-icons';
 import noteSummary from '../../misc/get-note-summary';
 import XReactionIcon from './reaction-icon.vue';
 import MkFollowButton from './follow-button.vue';
+import notePage from '../filters/note';
+import { userPage } from '../filters/user';
+import { locale } from '../i18n';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XReactionIcon, MkFollowButton
 	},
@@ -87,7 +91,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			getNoteSummary: (text: string) => noteSummary(text, this.$root.i18n.messages[this.$root.i18n.locale]),
+			getNoteSummary: (text: string) => noteSummary(text, locale),
 			followRequestDone: false,
 			groupInviteDone: false,
 			connection: null,
@@ -100,7 +104,7 @@ export default Vue.extend({
 		if (!this.notification.isRead) {
 			this.readObserver = new IntersectionObserver((entries, observer) => {
 				if (!entries.some(entry => entry.isIntersecting)) return;
-				this.$root.stream.send('readNotification', {
+				os.stream.send('readNotification', {
 					id: this.notification.id
 				});
 				entries.map(({ target }) => observer.unobserve(target));
@@ -108,12 +112,12 @@ export default Vue.extend({

 			this.readObserver.observe(this.$el);

-			this.connection = this.$root.stream.useSharedConnection('main');
+			this.connection = os.stream.useSharedConnection('main');
 			this.connection.on('readAllNotifications', () => this.readObserver.unobserve(this.$el));
 		}
 	},

-	beforeDestroy() {
+	beforeUnmount() {
 		if (!this.notification.isRead) {
 			this.readObserver.unobserve(this.$el);
 			this.connection.dispose();
@@ -123,24 +127,22 @@ export default Vue.extend({
 	methods: {
 		acceptFollowRequest() {
 			this.followRequestDone = true;
-			this.$root.api('following/requests/accept', { userId: this.notification.user.id });
+			os.api('following/requests/accept', { userId: this.notification.user.id });
 		},
 		rejectFollowRequest() {
 			this.followRequestDone = true;
-			this.$root.api('following/requests/reject', { userId: this.notification.user.id });
+			os.api('following/requests/reject', { userId: this.notification.user.id });
 		},
 		acceptGroupInvitation() {
 			this.groupInviteDone = true;
-			this.$root.api('users/groups/invitations/accept', { invitationId: this.notification.invitation.id });
-			this.$root.dialog({
-				type: 'success',
-				iconOnly: true, autoClose: true
-			});
+			os.apiWithDialog('users/groups/invitations/accept', { invitationId: this.notification.invitation.id });
 		},
 		rejectGroupInvitation() {
 			this.groupInviteDone = true;
-			this.$root.api('users/groups/invitations/reject', { invitationId: this.notification.invitation.id });
+			os.api('users/groups/invitations/reject', { invitationId: this.notification.invitation.id });
 		},
+		notePage,
+		userPage
 	}
 });
 </script>
@@ -153,6 +155,7 @@ export default Vue.extend({
 	font-size: 0.9em;
 	overflow-wrap: break-word;
 	display: flex;
+	contain: content;

 	&.max-width_600px {
 		padding: 16px;
@@ -257,7 +260,7 @@ export default Vue.extend({
 				overflow: hidden;
 			}

-			> .mk-time {
+			> .time {
 				margin-left: auto;
 				font-size: 0.9em;
 			}
--- a/src/client/components/notifications.vue
+++ b/src/client/components/notifications.vue
@@ -1,29 +1,31 @@
 <template>
 <div class="mfcuwfyp">
-	<x-list class="notifications" :items="items" v-slot="{ item: notification }">
-		<x-note v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @updated="noteUpdated(notification.note, $event)" :key="notification.id"/>
-		<x-notification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
-	</x-list>
+	<XList class="notifications" :items="items" v-slot="{ item: notification }">
+		<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :note="notification.note" @update:note="noteUpdated(notification.note, $event)" :key="notification.id"/>
+		<XNotification v-else :notification="notification" :with-time="true" :full="true" class="_panel notification" :key="notification.id"/>
+	</XList>

-	<button class="_panel _button" ref="loadMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+	<button class="_loadMore" v-appear="$store.state.device.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
 		<template v-if="!moreFetching">{{ $t('loadMore') }}</template>
-		<template v-if="moreFetching"><mk-loading inline/></template>
+		<template v-if="moreFetching"><MkLoading inline/></template>
 	</button>

 	<p class="empty" v-if="empty">{{ $t('noNotifications') }}</p>

-	<mk-error v-if="error" @retry="init()"/>
+	<MkError v-if="error" @retry="init()"/>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
-import paging from '../scripts/paging';
+import { defineComponent, PropType } from 'vue';
+import paging from '@/scripts/paging';
 import XNotification from './notification.vue';
 import XList from './date-separated-list.vue';
 import XNote from './note.vue';
+import { notificationTypes } from '../../types';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotification,
 		XList,
@@ -35,9 +37,10 @@ export default Vue.extend({
 	],

 	props: {
-		type: {
-			type: String,
-			required: false
+		includeTypes: {
+			type: Array as PropType<typeof notificationTypes[number][]>,
+			required: false,
+			default: null,
 		},
 	},

@@ -48,47 +51,69 @@ export default Vue.extend({
 				endpoint: 'i/notifications',
 				limit: 10,
 				params: () => ({
-					includeTypes: this.type ? [this.type] : undefined
+					includeTypes: this.allIncludeTypes || undefined,
 				})
 			},
 		};
 	},

+	computed: {
+		allIncludeTypes() {
+			return this.includeTypes ?? notificationTypes.filter(x => !this.$store.state.i.mutingNotificationTypes.includes(x));
+		}
+	},
+
 	watch: {
-		type() {
-			this.reload();
+		includeTypes: {
+			handler() {
+				this.reload();
+			},
+			deep: true
+		},
+		// TODO: vue/vuexのバグか仕様かは不明なものの、プロフィール更新するなどして $store.state.i が更新されると、
+		// mutingNotificationTypes に変化が無くてもこのハンドラーが呼び出され無駄なリロードが発生するのを直す
+		'$store.state.i.mutingNotificationTypes': {
+			handler() {
+				if (this.includeTypes === null) {
+					this.reload();
+				}
+			},
+			deep: true
 		}
 	},

 	mounted() {
-		this.connection = this.$root.stream.useSharedConnection('main');
+		this.connection = os.stream.useSharedConnection('main');
 		this.connection.on('notification', this.onNotification);
 	},

-	beforeDestroy() {
+	beforeUnmount() {
 		this.connection.dispose();
 	},

 	methods: {
 		onNotification(notification) {
-			if (document.visibilityState === 'visible') {
-				this.$root.stream.send('readNotification', {
+			const isMuted = !this.allIncludeTypes.includes(notification.type);
+			if (isMuted || document.visibilityState === 'visible') {
+				os.stream.send('readNotification', {
 					id: notification.id
 				});
 			}

-			this.prepend({
-				...notification,
-				isRead: document.visibilityState === 'visible'
-			});
+			if (!isMuted) {
+				this.prepend({
+					...notification,
+					isRead: document.visibilityState === 'visible'
+				});
+			}
 		},

 		noteUpdated(oldValue, newValue) {
 			const i = this.items.findIndex(n => n.note === oldValue);
-			Vue.set(this.items, i, {
+			this.items[i] = {
 				...this.items[i],
 				note: newValue
-			});
+			};
 		},
 	}
 });
--- a/src/client/components/page-preview.vue
+++ b/src/client/components/page-preview.vue
@@ -1,5 +1,5 @@
 <template>
-<router-link :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1">
+<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1">
 	<div class="thumbnail" v-if="page.eyeCatchingImage" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
 	<article>
 		<header>
@@ -8,22 +8,27 @@
 		<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
 		<footer>
 			<img class="icon" :src="page.user.avatarUrl"/>
-			<p>{{ page.user | userName }}</p>
+			<p>{{ userName(page.user) }}</p>
 		</footer>
 	</article>
-</router-link>
+</MkA>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import { userName } from '../filters/user';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		page: {
 			type: Object,
 			required: true
 		},
 	},
+	methods: {
+		userName
+	}
 });
 </script>

--- a/src/client/components/page-window.vue
+++ b/src/client/components/page-window.vue
@@ -0,0 +1,160 @@
+<template>
+<XWindow ref="window"
+	:initial-width="700"
+	:initial-height="500"
+	:can-resize="true"
+	:close-right="true"
+	:contextmenu="contextmenu"
+	@closed="$emit('closed')"
+>
+	<template #header>
+		<XHeader :info="pageInfo" :with-back="false"/>
+	</template>
+	<template #buttons>
+		<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
+		<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
+	</template>
+	<div class="yrolvcoq" style="min-height: 100%; background: var(--bg);">
+		<component :is="component" v-bind="props" :ref="changePage"/>
+	</div>
+</XWindow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faExternalLinkAlt, faExpandAlt, faLink, faChevronLeft, faColumns } from '@fortawesome/free-solid-svg-icons';
+import XWindow from '@/components/ui/window.vue';
+import XHeader from '@/ui/_common_/header.vue';
+import { popout } from '@/scripts/popout';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { resolve } from '@/router';
+import { url } from '@/config';
+
+export default defineComponent({
+	components: {
+		XWindow,
+		XHeader,
+	},
+
+	inject: {
+		sideViewHook: {
+			default: null
+		}
+	},
+
+	provide() {
+		return {
+			navHook: (path) => {
+				this.navigate(path);
+			}
+		};
+	},
+
+	props: {
+		initialPath: {
+			type: String,
+			required: true,
+		},
+		initialComponent: {
+			type: Object,
+			required: true,
+		},
+		initialProps: {
+			type: Object,
+			required: false,
+			default: () => {},
+		},
+	},
+
+	emits: ['closed'],
+
+	data() {
+		return {
+			pageInfo: null,
+			path: this.initialPath,
+			component: this.initialComponent,
+			props: this.initialProps,
+			history: [],
+			faChevronLeft,
+		};
+	},
+
+	computed: {
+		url(): string {
+			return url + this.path;
+		},
+
+		contextmenu() {
+			return [{
+				type: 'label',
+				text: this.path,
+			}, {
+				icon: faExpandAlt,
+				text: this.$t('showInPage'),
+				action: this.expand
+			}, this.sideViewHook ? {
+				icon: faColumns,
+				text: this.$t('openInSideView'),
+				action: () => {
+					this.sideViewHook(this.path);
+					this.$refs.window.close();
+				}
+			} : undefined, {
+				icon: faExternalLinkAlt,
+				text: this.$t('popout'),
+				action: this.popout
+			}, null, {
+				icon: faExternalLinkAlt,
+				text: this.$t('openInNewTab'),
+				action: () => {
+					window.open(this.url, '_blank');
+					this.$refs.window.close();
+				}
+			}, {
+				icon: faLink,
+				text: this.$t('copyLink'),
+				action: () => {
+					copyToClipboard(this.url);
+				}
+			}];
+		},
+	},
+
+	methods: {
+		changePage(page) {
+			if (page == null) return;
+			if (page.INFO) {
+				this.pageInfo = page.INFO;
+			}
+		},
+
+		navigate(path, record = true) {
+			if (record) this.history.push(this.path);
+			this.path = path;
+			const { component, props } = resolve(path);
+			this.component = component;
+			this.props = props;
+		},
+
+		back() {
+			this.navigate(this.history.pop(), false);
+		},
+
+		expand() {
+			this.$router.push(this.path);
+			this.$refs.window.close();
+		},
+
+		popout() {
+			popout(this.path, this.$el);
+			this.$refs.window.close();
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.yrolvcoq {
+	--section-padding: 16px;
+}
+</style>
--- a/src/client/components/page/page.block.vue
+++ b/src/client/components/page/page.block.vue
@@ -3,7 +3,7 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XText from './page.text.vue';
 import XSection from './page.section.vue';
 import XImage from './page.image.vue';
@@ -19,7 +19,7 @@ import XCounter from './page.counter.vue';
 import XRadioButton from './page.radio-button.vue';
 import XCanvas from './page.canvas.vue';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas
 	},
--- a/src/client/components/page/page.button.vue
+++ b/src/client/components/page/page.button.vue
@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-button class="kudkigyw" @click="click()" :primary="value.primary">{{ hpml.interpolate(value.text) }}</mk-button>
+	<MkButton class="kudkigyw" @click="click()" :primary="value.primary">{{ hpml.interpolate(value.text) }}</MkButton>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from '../ui/button.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},
@@ -24,14 +25,14 @@ export default Vue.extend({
 		click() {
 			if (this.value.action === 'dialog') {
 				this.hpml.eval();
-				this.$root.dialog({
+				os.dialog({
 					text: this.hpml.interpolate(this.value.content)
 				});
 			} else if (this.value.action === 'resetRandom') {
 				this.hpml.updateRandomSeed(Math.random());
 				this.hpml.eval();
 			} else if (this.value.action === 'pushEvent') {
-				this.$root.api('page-push', {
+				os.api('page-push', {
 					pageId: this.hpml.page.id,
 					event: this.value.event,
 					...(this.value.var ? {
@@ -39,7 +40,7 @@ export default Vue.extend({
 					} : {})
 				});

-				this.$root.dialog({
+				os.dialog({
 					type: 'success',
 					text: this.hpml.interpolate(this.value.message)
 				});
--- a/src/client/components/page/page.canvas.vue
+++ b/src/client/components/page/page.canvas.vue
@@ -5,9 +5,10 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true
--- a/src/client/components/page/page.counter.vue
+++ b/src/client/components/page/page.counter.vue
@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-button class="llumlmnx" @click="click()">{{ hpml.interpolate(value.text) }}</mk-button>
+	<MkButton class="llumlmnx" @click="click()">{{ hpml.interpolate(value.text) }}</MkButton>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from '../ui/button.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},
--- a/src/client/components/page/page.if.vue
+++ b/src/client/components/page/page.if.vue
@@ -1,13 +1,16 @@
 <template>
 <div v-show="hpml.vars[value.var]">
-	<x-block v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h"/>
+	<XBlock v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h"/>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';

-export default Vue.extend({
+export default defineComponent({
+	components: {
+		XBlock: defineAsyncComponent(() => import('./page.block.vue'))
+	},
 	props: {
 		value: {
 			required: true
@@ -22,8 +25,5 @@ export default Vue.extend({
 			required: true
 		}
 	},
-	beforeCreate() {
-		this.$options.components.XBlock = require('./page.block.vue').default;
-	},
 });
 </script>
--- a/src/client/components/page/page.image.vue
+++ b/src/client/components/page/page.image.vue
@@ -5,9 +5,10 @@
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true
--- a/src/client/components/page/page.number-input.vue
+++ b/src/client/components/page/page.number-input.vue
@@ -1,14 +1,15 @@
 <template>
 <div>
-	<mk-input class="kudkigyw" v-model="v" type="number">{{ hpml.interpolate(value.text) }}</mk-input>
+	<MkInput class="kudkigyw" v-model:value="v" type="number">{{ hpml.interpolate(value.text) }}</MkInput>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkInput from '../ui/input.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput
 	},
--- a/src/client/components/page/page.post.vue
+++ b/src/client/components/page/page.post.vue
@@ -1,18 +1,19 @@
 <template>
 <div class="ngbfujlo">
-	<mk-textarea :value="text" readonly style="margin: 0;"></mk-textarea>
-	<mk-button class="button" primary @click="post()" :disabled="posting || posted"><fa v-if="posted" :icon="faCheck"/><fa v-else :icon="faPaperPlane"/></mk-button>
+	<MkTextarea :value="text" readonly style="margin: 0;"></MkTextarea>
+	<MkButton class="button" primary @click="post()" :disabled="posting || posted"><Fa v-if="posted" :icon="faCheck"/><Fa v-else :icon="faPaperPlane"/></MkButton>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCheck, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import MkTextarea from '../ui/textarea.vue';
 import MkButton from '../ui/button.vue';
-import { apiUrl } from '../../config';
+import { apiUrl } from '@/config';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea,
 		MkButton,
@@ -43,14 +44,7 @@ export default Vue.extend({
 	},
 	methods: {
 		upload() {
-			return new Promise((ok) => {
-				const dialog = this.$root.dialog({
-					type: 'waiting',
-					text: this.$t('uploading') + '...',
-					showOkButton: false,
-					showCancelButton: false,
-					cancelableByBgClick: false
-				});
+			const promise = new Promise((ok) => {
 				const canvas = this.hpml.canvases[this.value.canvasId];
 				canvas.toBlob(blob => {
 					const data = new FormData();
@@ -66,24 +60,21 @@ export default Vue.extend({
 					})
 					.then(response => response.json())
 					.then(f => {
-						dialog.close();
 						ok(f);
 					})
 				});
 			});
+			os.promiseDialog(promise);
+			return promise;
 		},
 		async post() {
 			this.posting = true;
 			const file = this.value.attachCanvasImage ? await this.upload() : null;
-			this.$root.api('notes/create', {
+			os.apiWithDialog('notes/create', {
 				text: this.text === '' ? null : this.text,
 				fileIds: file ? [file.id] : undefined,
 			}).then(() => {
 				this.posted = true;
-				this.$root.dialog({
-					type: 'success',
-					iconOnly: true, autoClose: true
-				});
 			});
 		}
 	}
--- a/src/client/components/page/page.radio-button.vue
+++ b/src/client/components/page/page.radio-button.vue
@@ -1,15 +1,16 @@
 <template>
 <div>
 	<div>{{ hpml.interpolate(value.title) }}</div>
-	<mk-radio v-for="x in value.values" v-model="v" :value="x" :key="x">{{ x }}</mk-radio>
+	<MkRadio v-for="x in value.values" v-model:value="v" :value="x" :key="x">{{ x }}</MkRadio>
 </div>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkRadio from '../ui/radio.vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkRadio
 	},
--- a/src/client/components/page/page.section.vue
+++ b/src/client/components/page/page.section.vue
@@ -3,15 +3,19 @@
 	<component :is="'h' + h">{{ value.title }}</component>

 	<div class="children">
-		<x-block v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h + 1"/>
+		<XBlock v-for="child in value.children" :value="child" :page="page" :hpml="hpml" :key="child.id" :h="h + 1"/>
 	</div>
 </section>
 </template>

 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, defineAsyncComponent } from 'vue';
+import * as os from '@/os';

-export default Vue.extend({
+export default defineComponent({
+	components: {
+		XBlock: defineAsyncComponent(() => import('./page.block.vue'))
+	},
 	props: {
 		value: {
 			required: true
@@ -26,9 +30,6 @@ export default Vue.extend({
 			required: true
 		}
 	},
-	beforeCreate() {
-		this.$options.components.XBlock = require('./page.block.vue').default;
-	},
 });
 </script>

--- a/Show More
+++ b/Show More