Merge branch 'develop'

* wip

* wip

* wip

* wip

.yarnrc

@@ -0,0 +1 @@
+network-timeout 600000

Dockerfile

@@ -22,7 +22,7 @@ RUN apk add --no-cache \
     vips-dev \
     vips
 
-COPY package.json yarn.lock ./
+COPY package.json yarn.lock .yarnrc ./
 RUN yarn install
 COPY . ./
 RUN yarn build

locales/ar-SA.yml

@@ -429,6 +429,7 @@ latestVersion: "آخر نسخة مستقرة"
 usageAmount: "الإستخدام"
 capacity: "السعة"
 inUse: "مستخدم"
+info: "عن"
 _email:
   _follow:
     title: "يتابعك"

locales/cs-CZ.yml

@@ -1,2 +1,375 @@
 ---
 _lang_: "Čeština"
+introMisskey: "Vítejte! Misskey je otevřený a decentralizovaný microblogový servis.\n\"Poznámkami\" můžete sdílet co se zrovna děje se všemi ve Vašem okolí. 📡\nPomocí \"reakcí\" můžete sdílet své názory a pocity na ostatní poznámky. 👍\nPojďte objevovat nový svět! 🚀"
+monthAndDay: "{day}. {month}."
+search: "Vyhledávání"
+notifications: "Oznámení"
+username: "Uživatelské jméno"
+password: "Heslo"
+fetchingAsApObject: "Načítám data z Fediversu..."
+ok: "Potvrdit"
+gotIt: "Rozumím!"
+cancel: "Zrušit"
+enterUsername: "Zadej uživatelské jméno"
+renotedBy: "{user} přeposla/a"
+noNotes: "Žádné poznámky"
+noNotifications: "Žádná oznámení"
+instance: "Instance"
+settings: "Nastavení"
+basicSettings: "Obecná nastavení"
+otherSettings: "Rozšířená nastavení"
+openInWindow: "Otevřít v novém okně"
+profile: "Váš profil"
+timeline: "Časová osa"
+noAccountDescription: "Tento uživatel zatím nenapsal svou biografii."
+login: "Přihlásit se"
+loggingIn: "Probíhá přihlašování"
+logout: "Odhlásit"
+signup: "Registrace"
+uploading: "Nahrávám"
+save: "Uložit"
+users: "Uživatelé"
+addUser: "Přidat uživatele"
+favorite: "Oblíbené"
+favorites: "Oblíbené"
+unfavorite: "Odebrat z oblízených"
+favorited: "Přidáno do oblíbených"
+alreadyFavorited: "Už je mezi oblíbenými"
+cantFavorite: "Nepodařilo se přidat mezi oblíbené."
+pin: "Připnout"
+unpin: "Odepnout"
+copyContent: "Zkopírovat obsah"
+copyLink: "Kopírovat odkaz"
+delete: "Smazat"
+deleteAndEdit: "Smazat a upravit"
+deleteAndEditConfirm: "Jste si jistí že chcete smazat tuto poznámku a editovat ji? Ztratíte tím všechny reakce, sdílení a odpovědi na ni."
+addToList: "Přidat do seznamu"
+sendMessage: "Odeslat zprávu"
+copyUsername: "Kopírovat uživatelské jméno"
+searchUser: "Vyhledat uživatele"
+reply: "Odpovědět"
+loadMore: "Zobrazit více"
+showMore: "Zobrazit více"
+mention: "Zmínění"
+mentions: "Zmínění"
+importAndExport: "Import a export"
+import: "Importovat"
+export: "Exportovat"
+files: "Soubor(ů)"
+download: "Stáhnout"
+unfollowConfirm: "Jste si jisti že už nechcete sledovat {name}?"
+importRequested: "Požádali jste o export. To může chvilku trvat."
+lists: "Seznamy"
+noLists: "Nemáte žádné seznamy"
+note: "Poznámka"
+notes: "Poznámky"
+following: "Sledovaní"
+followers: "Sledující"
+followsYou: "Sledují vás"
+createList: "Vytvořit seznam"
+manageLists: "Spravovat seznam"
+error: "Chyba"
+somethingHappened: "Jejda. Něco se nepovedlo."
+retry: "Opakovat"
+pageLoadError: "Nepodařilo se načíst stránku"
+follow: "Sledovaní"
+unfollow: "Přestat sledovat"
+renote: "Přeposlat"
+cantReRenote: "Odpověď nemůže být odstraněna."
+quote: "Citovat"
+pinned: "Připnout"
+you: "Vy"
+clickToShow: "Klikněte pro zobrazení"
+sensitive: "NSFW"
+add: "Přidat"
+reaction: "Reakce"
+reactionSettingDescription: "Vyberte Vaší oblíbenou reakci, kterou chcete připnout ve výběru."
+reactionSettingDescription2: "Přetažením změníte pořadí, kliknutím smažete, zmáčkněte \"+\" k přidání"
+rememberNoteVisibility: "Zapamatovat nastavení zobrazení poznámky"
+attachCancel: "Odstranit přílohu"
+markAsSensitive: "Označit jako NSFW"
+unmarkAsSensitive: "Odznačit jako NSFW"
+enterFileName: "Zadejte název souboru"
+mute: "Ztlumit"
+unmute: "Odmlčet"
+block: "Zablokovat"
+unblock: "Odblokovat"
+suspend: "Zmrazit"
+unsuspend: "Odmrazit"
+blockConfirm: "Jste si jistí že chcete zablokovat tento účet?"
+unblockConfirm: "Jste si jistí že chcete odblokovat tento účet?"
+suspendConfirm: "Jste si jistí že chcete suspendovat tenhle účet?"
+unsuspendConfirm: "Jste si jistí že chcete obnovit tenhle účet?"
+selectList: "Vybrat seznam"
+selectAntenna: "Vyberte Anténu"
+selectWidget: "Zvolte widget"
+editWidgets: "Upravit widget"
+editWidgetsExit: "Hotovo"
+customEmojis: "Vlastní emoji"
+emoji: "Emoji"
+emojiName: "Jméno emoji"
+emojiUrl: "URL obrázku"
+addEmoji: "Přidat emoji"
+settingGuide: "Doporučené nastavení"
+flagAsBot: "Tento účet je bot"
+flagAsBotDescription: "Pokud je tento účet kontrolován programem zaškrtněte tuto možnost. To označí tento účet jako bot pro ostatní vývojáře a zabrání tak nekonečným interakcím s ostatními boty a upraví Misskey systém aby se choval k tomuhle účtu jako bot."
+flagAsCat: "Tenhle účet je kočka"
+flagAsCatDescription: "Vyberte tuto možnost aby tento účet byl označen jako kočka."
+autoAcceptFollowed: "Automaticky akceptovat následování od účtů které sledujete"
+addAcount: "Přidat účet"
+loginFailed: "Přihlášení se nezdařilo."
+general: "Obecně"
+wallpaper: "Obrázek na pozadí"
+setWallpaper: "Nastavení obrázku na pozadí"
+removeWallpaper: "Odstranit pozadí"
+selectUser: "Vyberte uživatele"
+recipient: "Pro"
+annotation: "Komentáře"
+instances: "Instance"
+registeredAt: "Registrován"
+latestRequestSentAt: "Poslední požadavek poslán"
+latestRequestReceivedAt: "Poslední požadavek přijat"
+latestStatus: "Poslední status"
+storageUsage: "Využití úložiště"
+charts: "Grafy"
+perHour: "za hodinu"
+perDay: "za den"
+blockThisInstance: "Blokovat tuto instanci"
+operations: "Operace"
+software: "Software"
+version: "Verze"
+metadata: "Metadata"
+jobQueue: "Fronta úloh"
+cpuAndMemory: "CPU a paměť"
+network: "Síť"
+disk: "Disk"
+instanceInfo: "Informace o instanci"
+statistics: "Statistiky"
+clearQueue: "Vyčistit frontu"
+clearQueueConfirmTitle: "Jste si jisti že zrušit všechny úlohy ve frontě?"
+clearCachedFiles: "Vyprázdnit mezipaměť"
+blockedInstances: "Blokované instance"
+pinLimitExceeded: "Nemůžete připnout další poznámky."
+intro: "Instalace Misskey byla dokončena! Prosím vytvořte admina."
+done: "Hotovo"
+processing: "Zpracovávám"
+preview: "Náhled"
+default: "Výchozí"
+blocked: "Blokováno"
+suspended: "Suspendováno"
+all: "Vše"
+subscribing: "Odebíráte"
+publishing: "Publikuji"
+notResponding: "Neodpovídá"
+instanceFollowers: "Následovníci na instanci"
+instanceUsers: "Uživatelé této instance"
+changePassword: "Změnit heslo"
+security: "Zabezpečení"
+currentPassword: "Současné heslo"
+newPassword: "Nové heslo"
+newPasswordRetype: "Nové heslo (znovu)"
+attachFile: "Přiložit soubor"
+more: "Více!"
+usernameOrUserId: "Uživatelské jméno nebo uživatelské id"
+noSuchUser: "Uživatel nebyl nalezen"
+announcements: "Oznámení"
+imageUrl: "URL obrázku"
+remove: "Smazat"
+removed: "Smazáno"
+removeAreYouSure: "Jste si jistí že chcete smazat \"{x}\"?"
+deleteAreYouSure: "Jste si jistí že chcete smazat \"{x}\"?"
+resetAreYouSure: "Opravdu resetovat?"
+saved: "Uloženo"
+messaging: "Zprávy"
+upload: "Nahrát soubory"
+fromDrive: "Z disku"
+fromUrl: "Z URL"
+uploadFromUrl: "Nahrát z URL adresy"
+uploadFromUrlDescription: "URL adresa souboru, který chcete nahrát"
+uploadFromUrlMayTakeTime: "Může trvat nějakou dobu, dokud nebude dokončeno nahrávání."
+explore: "Objevovat"
+games: "Misskey hry"
+messageRead: "Přečtené"
+noMoreHistory: "To je vše"
+startMessaging: "Zahájit chat"
+nUsersRead: "přečteno {n} uživateli"
+agreeTo: "Souhlasím s {0}"
+tos: "Podmínky užívání"
+start: "Začít"
+home: "Domů"
+remoteUserCaution: "Tyto informace nemusí být aktuální jelikož uživatel je ze vzdálené instance."
+activity: "Aktivita"
+images: "Obrázky"
+birthday: "Datum narození"
+registeredDate: "Datum registrace"
+location: "Lokace"
+lightThemes: "Světlý vzhled"
+darkThemes: "Tmavý vzhled"
+syncDeviceDarkMode: "Synchronizovat tmavý vzhled s nastavením Vašeho systému"
+drive: "Úložiště"
+fileName: "Název souboru"
+selectFile: "Vybrat soubor"
+selectFiles: "Vybrat soubory"
+selectFolder: "Vyberte složku"
+selectFolders: "Vyberte složky"
+renameFile: "Přejmenovat soubor"
+folderName: "Název složky"
+createFolder: "Vytvořit složku"
+renameFolder: "Přejmenovat složku"
+deleteFolder: "Odstranit složku"
+copyUrl: "Kopírovat URL"
+rename: "Přejmenovat"
+avatar: "Avatar"
+banner: "Baner"
+nsfw: "NSFW"
+disconnectedFromServer: "Spojení bylo přerušeno"
+reload: "Aktualizovat"
+watch: "Sledovat"
+unwatch: "Přestat sledovat"
+accept: "Souhlasím"
+reject: "Odmítnout"
+normal: "Normální"
+instanceName: "Název instance"
+instanceDescription: "Popis instance"
+maintainerName: "Správce"
+maintainerEmail: "E-mailová adresa správce"
+tosUrl: "URL pro smluvní podmínky"
+thisYear: "Tento rok"
+thisMonth: "Tento měsíc"
+today: "Dnes"
+dayX: "{day}"
+monthX: "{month}"
+yearX: "{year}"
+pages: "Stránky"
+integration: "Integrace"
+connectSerice: "Připojit"
+disconnectSerice: "Odpojit"
+enableLocalTimeline: "Povolit lokální čas"
+enableGlobalTimeline: "Povolit globální čas"
+registration: "Registrace"
+enableRegistration: "Povolit registraci novým uživatelům"
+invite: "Pozvat"
+inMb: "V megabajtech"
+iconUrl: "Favicon URL"
+bannerUrl: "Baner URL"
+basicInfo: "Základní informace"
+hcaptcha: "hCaptcha"
+userList: "Seznamy"
+about: "Informace"
+aboutMisskey: "O Misskey"
+administrator: "Administrátor"
+token: "Token"
+twoStepAuthentication: "Dvoufaktorová autentikace"
+moderator: "Moderátor"
+nUsersMentioned: "{n} uživatelů zmínilo"
+securityKey: "Bezpečnostní klíč"
+securityKeyName: "Název klíče"
+registerSecurityKey: "Registrovat bezpečnostní klíč"
+lastUsed: "Naposledy použito"
+unregister: "Odstranit"
+resetPassword: "Resetovat heslo"
+newPasswordIs: "Nové heslo je \"{password}\""
+reduceUiAnimation: "Snížit UI animace"
+share: "Sdílet"
+notFound: "Nenalezeno"
+notFoundDescription: "Nebyla nalezená žádná stránka korespondující se zadanou URL."
+uploadFolder: "Výchozí lokace pro upload"
+cacheClear: "Vymazat cache"
+markAsReadAllNotifications: "Označit všechna oznámení za přečtená"
+markAsReadAllUnreadNotes: "Označit všechny příspěvky za přečtené"
+markAsReadAllTalkMessages: "Označit všechny zprávy za přečtené"
+help: "Nápověda"
+inputMessageHere: "Sem zadejte zprávu"
+close: "Zavřít"
+group: "Skupina"
+groups: "Skupiny"
+createGroup: "Vytvořit skupinu"
+ownedGroups: "Vlastněné skupiny"
+joinedGroups: "Členství ve skupinách"
+invites: "Pozvat"
+groupName: "Název skupiny"
+members: "Členové"
+transfer: "Převod"
+title: "Titulek"
+text: "Text"
+enable: "Povolit"
+next: "Další"
+retype: "Zadejte znovu"
+noteOf: "{user} poznámky"
+inviteToGroup: "Pozvat do skupiny"
+invitations: "Pozvat"
+smtpUser: "Uživatelské jméno"
+smtpPass: "Heslo"
+clearCache: "Vyprázdnit mezipaměť"
+info: "Informace"
+_mfm:
+  mention: "Zmínění"
+  quote: "Citovat"
+  emoji: "Vlastní emoji"
+  search: "Vyhledávání"
+_sidebar:
+  icon: "Avatar"
+_theme:
+  keys:
+    mention: "Zmínění"
+    renote: "Přeposlat"
+_sfx:
+  note: "Poznámky"
+  notification: "Oznámení"
+  chat: "Zprávy"
+_widgets:
+  notifications: "Oznámení"
+  timeline: "Časová osa"
+  activity: "Aktivita"
+  jobQueue: "Fronta úloh"
+_cw:
+  show: "Zobrazit více"
+_visibility:
+  home: "Domů"
+  followers: "Sledující"
+_profile:
+  username: "Uživatelské jméno"
+_exportOrImport:
+  followingList: "Sledovaní"
+  muteList: "Ztlumit"
+  blockingList: "Zablokovat"
+  userLists: "Seznamy"
+_timelines:
+  home: "Domů"
+_rooms:
+  _roomType:
+    default: "Výchozí"
+_pages:
+  blocks:
+    image: "Obrázky"
+  script:
+    categories:
+      list: "Seznamy"
+    blocks:
+      _join:
+        arg1: "Seznamy"
+      _randomPick:
+        arg1: "Seznamy"
+      _dailyRandomPick:
+        arg1: "Seznamy"
+      _seedRandomPick:
+        arg2: "Seznamy"
+      _pick:
+        arg1: "Seznamy"
+      _listLen:
+        arg1: "Seznamy"
+    types:
+      array: "Seznamy"
+_notification:
+  _types:
+    follow: "Sledovaní"
+    mention: "Zmínění"
+    renote: "Přeposlat"
+    quote: "Citovat"
+    reaction: "Reakce"
+_deck:
+  _columns:
+    notifications: "Oznámení"
+    tl: "Časová osa"
+    list: "Seznamy"
+    mentions: "Zmínění"

locales/de-DE.yml

@@ -687,6 +687,7 @@ textColor: "Text"
 saveAs: "Speichern als…"
 advanced: "Fortgeschritten"
 value: "Wert"
+createdAt: "Erstellt am"
 updatedAt: "Zuletzt geändert am"
 saveConfirm: "Änderungen speichern?"
 deleteConfirm: "Wirklich löschen?"
@@ -710,6 +711,23 @@ typingUsers: "{users} ist/sind am schreiben..."
 jumpToSpecifiedDate: "Zu bestimmtem Datum springen"
 showingPastTimeline: "Momentan wird eine alte Chronik angezeigt"
 clear: "Zurückkehren"
+markAllAsRead: "Alle als gelesen markieren"
+goBack: "Zurück"
+unlikeConfirm: "\"Gefällt mir\" wirklich entfernen?"
+fullView: "Vollansicht"
+quitFullView: "Vollansicht verlassen"
+addDescription: "Beschreibung hinzufügen"
+userPagePinTip: "Um Notizen hier erscheinen zu lassen, drücke \"Anpinnen\" im Menü individueller Notizen"
+notSpecifiedMentionWarning: "Diese Notiz enthält Erwähnungen von Nutzern, die nicht als Empfänger ausgewählt sind"
+info: "Über"
+userInfo: "Benutzerinformation"
+unknown: "Unbekannt"
+onlineStatus: "Online-Status"
+hideOnlineStatus: "Online-Status verbergen"
+hideOnlineStatusDescription: "Das Verbergen deines Online-Statuses reduziert die Nützlichkeit von Funktionen wie der Suche."
+online: "Online"
+active: "Aktiv"
+offline: "Offline"
 _email:
   _follow:
     title: "Du hast einen neuen Follower"
@@ -865,6 +883,7 @@ _theme:
   install: "Thema installieren"
   manage: "Themaverwaltung"
   code: "Themen-Code"
+  description: "Beschreibung"
   installed: "{name} wurde installiert"
   installedThemes: "Installierte Themen"
   builtinThemes: "Eingebaute Themen"

locales/en-US.yml

@@ -687,6 +687,7 @@ textColor: "Text"
 saveAs: "Save as..."
 advanced: "Advanced"
 value: "Value"
+createdAt: "Created on"
 updatedAt: "Updated at"
 saveConfirm: "Save changes?"
 deleteConfirm: "Really delete?"
@@ -710,6 +711,23 @@ typingUsers: "{users} is/are typing..."
 jumpToSpecifiedDate: "Jump to specific date"
 showingPastTimeline: "Currently displaying an old timeline"
 clear: "Return"
+markAllAsRead: "Mark all as read"
+goBack: "Back"
+unlikeConfirm: "Really remove your like?"
+fullView: "Full view"
+quitFullView: "Exit full view"
+addDescription: "Add description"
+userPagePinTip: "You can make notes be displayed here by selecting \"Pin to profile\" from the menu of individual notes"
+notSpecifiedMentionWarning: "This note contains mentions of users not included as recipient"
+info: "About"
+userInfo: "User information"
+unknown: "Unknown"
+onlineStatus: "Online status"
+hideOnlineStatus: "Hide online status"
+hideOnlineStatusDescription: "Hiding your online status reduces the convenience of some functions such as search"
+online: "Online"
+active: "Active"
+offline: "Offline"
 _email:
   _follow:
     title: "You've got a new follower"
@@ -865,6 +883,7 @@ _theme:
   install: "Install theme"
   manage: "Themes manager"
   code: "Theme code"
+  description: "Description"
   installed: "{name} has been installed"
   installedThemes: "Installed themes"
   builtinThemes: "Built-in themes"

locales/es-ES.yml

@@ -652,6 +652,8 @@ backgroundColor: "Fondo"
 accentColor: "Acento"
 textColor: "Texto"
 value: "Valores"
+goBack: "Deseleccionar"
+info: "Información"
 _email:
   _follow:
     title: "te ha seguido"
@@ -745,6 +747,7 @@ _theme:
   install: "Instalar tema"
   manage: "Gestor de temas"
   code: "Código del tema"
+  description: "Descripción"
   installed: "{name} ha sido instalado"
   alreadyInstalled: "Este tema ya está instalado"
   invalid: "El formato del tema no es válido"

locales/fr-FR.yml

@@ -686,6 +686,7 @@ textColor: "Texte"
 saveAs: "Enregistrer sous ..."
 advanced: "Avancé"
 value: "Valeur"
+createdAt: "Date de création"
 updatedAt: "Mis à jour le"
 saveConfirm: "Voulez-vous sauvegarder les modifications?"
 deleteConfirm: "Confirmez-vous la suppression?"
@@ -709,6 +710,22 @@ typingUsers: "{users} est en train d'écrire"
 jumpToSpecifiedDate: "Se rendre à la date"
 showingPastTimeline: "Un fil ancien est affiché"
 clear: "Effacer"
+markAllAsRead: "Tout marquer comme lu"
+goBack: "Retour"
+unlikeConfirm: "Êtes-vous sûr·e de ne plus vouloir aimer cette publication ?"
+fullView: "Plein écran"
+quitFullView: "Quitter le plein écran"
+addDescription: "Ajouter une description"
+userPagePinTip: "Vous pouvez afficher des notes ici en sélectionnant l'option « Épingler au profil » dans le menu de chaque note."
+notSpecifiedMentionWarning: "Vous avez mentionné des utilisateur·rice·s qui ne font pas partie de la liste des destinataires"
+info: "Informations"
+userInfo: "Informations sur l'utilisateur"
+unknown: "Inconnu"
+onlineStatus: "Statut"
+hideOnlineStatus: "Toujours apparaître hors ligne"
+hideOnlineStatusDescription: "Forcer votre statut à toujours apparaître hors ligne peut diminuer les performances de certaines fonctionnalités, telles que la Recherche."
+online: "En ligne"
+offline: "Hors ligne"
 _email:
   _follow:
     title: "Vous suit"
@@ -842,6 +859,7 @@ _theme:
   install: "Installer un thème"
   manage: "Gestion des thèmes"
   code: "Code du thème"
+  description: "Description"
   installed: "{name} a été installé"
   installedThemes: "Thèmes installés"
   builtinThemes: "Thèmes intégrés"
@@ -936,7 +954,7 @@ _tutorial:
   step3_3: "Remplissez le cadran et cliquez sur le bouton en haut à droite pour envoyer."
   step3_4: "Vous n’avez rien à dire ? Essayez d’écrire « J’ai commencé à utiliser Misskey »."
   step4_1: "Avez-vous publié votre première note ?"
-  step4_2: "Youpi ! Celle-ci est maintenant affiché sur votre fil d’actualité."
+  step4_2: "Youpi ! Celle-ci est maintenant affichée sur votre fil d’actualité."
   step5_1: "Maintenant, essayons de nous abonner à d’autres personnes afin de rendre votre fil plus vivant."
   step5_2: "La page {featured} affiche les notes en tendance sur la présente instance et {explore} vous permet de trouver des utilisateur·rice·s en tendance. Essayez de vous abonner aux gens que vous aimez !"
   step5_3: "Pour pouvoir suivre d’autres utilisateur·rice, cliquez sur leur avatar afin d’afficher la page du profil utilisateur ensuite appuyez sur le bouton « S’abonner »."
@@ -946,7 +964,7 @@ _tutorial:
   step6_3: "Pour ajouter une réaction à une note, cliquez sur le signe « + » de celle-ci et sélectionnez l’émoji souhaité."
   step7_1: "Félicitations ! Vous avez atteint la fin du tutoriel de base pour l’utilisation de Misskey."
   step7_2: "Si vous désirez en savoir plus sur Misskey, jetez un œil sur la section {help}."
-  step7_3: "Bon courage et amusez-vous bien sur Misskey 🚀"
+  step7_3: "Bon courage et amusez-vous bien sur Misskey ! 🚀"
 _2fa:
   alreadyRegistered: "Cette étape à déjà été complétée"
   registerDevice: "Ajouter un nouvel appareil"

locales/it-IT.yml

@@ -615,6 +615,7 @@ inChannelSearch: "Cerca in canale"
 useReactionPickerForContextMenu: "Cliccare sul tasto destro per aprire il pannello di reazioni"
 typingUsers: "{users} sta(nno) scrivendo"
 showingPastTimeline: "Stai visualizzando una vecchia timeline"
+info: "Informazioni"
 _email:
   _follow:
     title: "Ha iniziato a seguirti"
@@ -676,6 +677,7 @@ _theme:
   install: "Installa un tema"
   manage: "Gerisci temi"
   code: "Codice tema"
+  description: "Descrizione"
   installed: "{name} è installato"
   installedThemes: "Temi installati"
   builtinThemes: "Temi integrati"

locales/ja-JP.yml

@@ -138,7 +138,7 @@ flagAsBotDescription: "このアカウントがプログラムによって運用
 flagAsCat: "Catとして設定"
 flagAsCatDescription: "このアカウントが猫であることを示す場合は、このフラグをオンにします。"
 autoAcceptFollowed: "フォロー中ユーザーからのフォロリクを自動承認"
-addAcount: "アカウント追加"
+addAccount: "アカウントを追加"
 loginFailed: "ログインに失敗しました"
 showOnRemote: "リモートで表示"
 general: "全般"
@@ -183,7 +183,7 @@ clearQueueConfirmTitle: "キューをクリアしますか？"
 clearQueueConfirmText: "未配達の投稿は配送されなくなります。通常この操作を行う必要はありません。"
 clearCachedFiles: "キャッシュをクリア"
 clearCachedFilesConfirm: "キャッシュされたリモートファイルをすべて削除しますか？"
-blockedInstances: "インスタンスブロック"
+blockedInstances: "ブロックしたインスタンス"
 blockedInstancesDescription: "ブロックしたいインスタンスのホストを改行で区切って設定します。ブロックされたインスタンスは、このインスタンスとやり取りできなくなります。"
 muteAndBlock: "ミュートとブロック"
 mutedUsers: "ミュートしたユーザー"
@@ -349,7 +349,6 @@ antennaExcludeKeywords: "除外キーワード"
 antennaKeywordsDescription: "スペースで区切るとAND指定になり、改行で区切るとOR指定になります"
 notifyAntenna: "新しいノートを通知する"
 withFileAntenna: "ファイルが添付されたノートのみ"
-serviceworker: "ServiceWorker"
 enableServiceworker: "ServiceWorkerを有効にする"
 antennaUsersDescription: "ユーザー名を改行で区切って指定します"
 caseSensitive: "大文字小文字を区別する"
@@ -453,7 +452,7 @@ category: "カテゴリ"
 tags: "タグ"
 docSource: "このドキュメントのソース"
 createAccount: "アカウントを作成"
-existingAcount: "既存のアカウント"
+existingAccount: "既存のアカウント"
 regenerate: "再生成"
 fontSize: "フォントサイズ"
 noFollowRequests: "フォロー申請はありません"
@@ -568,7 +567,7 @@ pluginTokenRequestedDescription: "このプラグインはここで設定した
 notificationType: "通知の種類"
 edit: "編集"
 useStarForReactionFallback: "リアクション絵文字が不明な場合、代わりに★を使う"
-emailConfig: "メールサーバー設定"
+emailServer: "メールサーバー"
 enableEmail: "メール配信機能を有効化する"
 emailConfigInfo: "メールアドレスの確認やパスワードリセットの際に使います"
 email: "メール"
@@ -717,6 +716,31 @@ unlikeConfirm: "いいね解除しますか？"
 fullView: "フルビュー"
 quitFullView: "フルビュー解除"
 addDescription: "説明を追加"
+userPagePinTip: "個々のノートのメニューから「ピン留め」を選択することで、ここにノートを表示しておくことができます。"
+notSpecifiedMentionWarning: "宛先に含まれていないメンションがあります"
+info: "情報"
+userInfo: "ユーザー情報"
+unknown: "不明"
+onlineStatus: "オンライン状態"
+hideOnlineStatus: "オンライン状態を隠す"
+hideOnlineStatusDescription: "オンライン状態を隠すと、検索などの一部機能において利便性が低下することがあります。"
+online: "オンライン"
+active: "アクティブ"
+offline: "オフライン"
+notRecommended: "非推奨"
+botProtection: "Bot防御"
+instanceBlocking: "インスタンスブロック"
+selectAccount: "アカウントを選択"
+enabled: "有効"
+disabled: "無効"
+quickAction: "クイックアクション"
+user: "ユーザー"
+administration: "管理"
+accounts: "アカウント"
+switch: "切り替え"
+noMaintainerInformationWarning: "管理者情報が設定されていません。"
+noBotProtectionWarning: "Bot防御が設定されていません。"
+configure: "設定する"
 
 _email:
   _follow:

locales/ja-KS.yml

@@ -1,5 +1,6 @@
 ---
 _lang_: "日本語 (関西弁)"
+headlineMisskey: "ノートでつながるネットワーク"
 introMisskey: "ようお越し！Misskeyは、オープンソースの分散型マイクロブログサービスやねん。\n「ノート」を作って、いま起こっとることを共有したり、あんたについて皆に発信しよう📡\n「リアクション」機能で、皆のノートに素早く反応を追加したりもできるで✌\nほな新しい世界を探検しよか🚀"
 monthAndDay: "{month}月 {day}日"
 search: "探す"
@@ -54,7 +55,7 @@ youGotNewFollower: "フォローされたで"
 receiveFollowRequest: "フォローリクエストされたで"
 followRequestAccepted: "フォローが承認されたで"
 mention: "メンション"
-mentions: "あんた宛て"
+mentions: "うち宛て"
 directNotes: "ダイレクト投稿"
 importAndExport: "インポートとエクスポート"
 import: "インポート"
@@ -433,6 +434,7 @@ passwordMatched: "よし！一致や！"
 passwordNotMatched: "一致しとらんで？"
 signinWith: "{x}でログイン"
 or: "それか"
+language: "言語"
 uiLanguage: "UIの表示言語"
 groupInvited: "グループに招待されとるで"
 aboutX: "{x}について"
@@ -454,40 +456,352 @@ openImageInNewTab: "画像を新しいタブで開く"
 dashboard: "ダッシュボード"
 local: "ローカル"
 remote: "リモート"
+total: "合計"
+weekOverWeekChanges: "前週比"
+dayOverDayChanges: "前日比"
+appearance: "見た目"
+clientSettings: "クライアントの設定"
+accountSettings: "アカウントの設定"
+promotion: "宣伝"
+promote: "宣伝"
+numberOfDays: "日数"
+hideThisNote: "このノートは表示せんでいい"
+showFeaturedNotesInTimeline: "タイムラインにおすすめのノートを表示してや"
+objectStorage: "オブジェクトストレージ"
+useObjectStorage: "オブジェクトストレージを使う"
+objectStorageBaseUrl: "Base URL"
+objectStorageBaseUrlDesc: "参照に使うにURLやで。CDNやProxyを使用してるんならそのURL、S3: 'https://<bucket>.s3.amazonaws.com'、GCSとかなら: 'https://storage.googleapis.com/<bucket>'。"
+objectStorageBucket: "Bucket"
+objectStoragePrefix: "Prefix"
+objectStorageEndpoint: "Endpoint"
+objectStorageRegion: "Region"
+objectStorageUseSSL: "SSLを使う"
+objectStorageUseProxy: "Proxyを使う"
+objectStorageUseProxyDesc: "API接続にproxy使わんのやったら切ってくれへん？"
+objectStorageSetPublicRead: "アップロードした時に'public-read'を設定してや"
+serverLogs: "サーバーログ"
+deleteAll: "全て削除してや"
+showFixedPostForm: "タイムラインの上の方で投稿できるようにやってくれへん？"
+newNoteRecived: "新しいノートがあるで"
+sounds: "サウンド"
+listen: "聴く"
+none: "なし"
+showInPage: "ページで表示"
+popout: "ポップアウト"
+volume: "音量"
+masterVolume: "全体の音量"
+details: "もっと"
+chooseEmoji: "絵文字を選ぶ"
+unableToProcess: "なんか作業が止まってしまったようやね"
+recentUsed: "最近使ったやつ"
+install: "インストール"
+uninstall: "アンインストール"
+installedApps: "インストールされとるアプリ"
+nothing: "あらへん"
+installedDate: "インストールした日時"
+lastUsedDate: "最後に使った日時"
+state: "状態"
+sort: "仕分ける"
+ascendingOrder: "小さい順"
+descendingOrder: "大きい順"
+scratchpad: "スクラッチパッド"
 scratchpadDescription: "スクラッチパッドではAiScriptを色々試すことができるんや。Misskeyに対して色々できるコードを書いて動かしてみたり、結果を見たりできるで。"
+output: "出力"
+script: "スクリプト"
+disablePagesScript: "Pagesのスクリプトを無効にしてや"
+updateRemoteUser: "リモートユーザー情報の更新してくれん？"
+deleteAllFiles: "すべてのファイルを削除"
+deleteAllFilesConfirm: "ホンマにすべてのファイルを削除するん？消したもんはもう戻ってこんのやで？"
+removeAllFollowing: "フォローを全解除"
+removeAllFollowingDescription: "{host}からのフォローをすべて解除するで。そのインスタンスが消えて無くなった時とかには便利な機能やで。"
+userSuspended: "このユーザーは...凍結されとる。"
+userSilenced: "このユーザーは...サイレンスされとる。"
+sidebar: "サイドバー"
+divider: "分割線"
+rooms: "ルーム"
+relays: "リレー"
+addRelay: "リレーの追加"
+inboxUrl: "inboxのURL"
+addedRelays: "追加済みのリレー"
+poll: "アンケート"
+enablePlayer: "プレイヤーを開く"
+disablePlayer: "プレイヤーを閉じる"
+expandTweet: "ツイートを展開する"
+themeEditor: "テーマエディター"
+description: "説明"
+author: "作者"
 leaveConfirm: "未保存の変更があるで！ほかしてええか？"
+manage: "管理"
+plugins: "プラグイン"
+deck: "デッキ"
+undeck: "デッキ解除"
+width: "幅"
+height: "高さ"
+large: "大"
+medium: "中"
+small: "小"
+edit: "編集"
+emailConfig: "メールサーバー設定"
+enableEmail: "メール配信を受け取る"
 emailConfigInfo: "メールアドレスの確認とかパスワードリセットの時に使うで"
+email: "メール"
+emailAddress: "メールアドレス"
+smtpConfig: "SMTP サーバーの設定"
 smtpHost: "ホスト"
+smtpPort: "ポート"
 smtpUser: "ユーザー名"
 smtpPass: "パスワード"
+emptyToDisableSmtpAuth: "ユーザー名とパスワードになんも入れんかったら、SMTP認証を無効化するで"
+smtpSecure: "SMTP 接続に暗黙的なSSL/TLSを使用する"
+testEmail: "配信テスト"
+wordMute: "ワードミュート"
+userSaysSomething: "{name}が何か言ったようやで"
+makeActive: "アクティブにしてや"
+display: "表示"
+copy: "コピー"
+metrics: "メトリクス"
+overview: "概要"
+logs: "ログ"
+delayed: "遅延"
+database: "データベース"
+channel: "チャンネル"
+create: "作成"
+notificationSetting: "通知設定"
 notificationSettingDesc: "表示する通知の種類えらんでや。"
+useGlobalSetting: "グローバル設定を使ってや"
+other: "その他"
+regenerateLoginToken: "ログイントークンを再生成"
+behavior: "動作"
+sample: "サンプル"
+abuseReports: "通報"
+reportAbuse: "通報"
+reportAbuseOf: "{name}を通報する"
+send: "送信"
+abuseMarkAsResolved: "対応したで"
+openInNewTab: "新しいタブで開く"
+openInSideView: "サイドビューで開く"
+defaultNavigationBehaviour: "デフォルトのナビゲーション"
+editTheseSettingsMayBreakAccount: "このへんの設定をようわからんままイジるとアカウントが壊れて使えんくなるかも知れへんで？"
+instanceTicker: "ノートのインスタンス情報"
+waitingFor: "{x}を待っとるで"
+random: "ランダム"
+system: "システム"
+switchUi: "UI切り替え"
+desktop: "デスクトップ"
+clip: "クリップ"
+receivedReactionsCount: "リアクションされた数"
+pollVotesCount: "アンケートに投票した数"
+pollVotedCount: "アンケートに投票された数"
+yes: "はい"
+no: "いいえ"
+driveFilesCount: "ドライブのファイル数"
 emailVerified: "メールアドレスは確認されたで"
 pageLikesCount: "Pageにええやんと思った数"
 pageLikedCount: "Pageにええやんと思ってくれた数"
+clips: "クリップ"
+duplicate: "複製"
+left: "左"
+center: "中央"
+wide: "広い"
+narrow: "狭い"
 reloadToApplySetting: "設定はページリロード後に反映されるで。今リロードしとくか？"
+showTitlebar: "タイトルバーを見せる"
 clearCache: "キャッシュをほかす"
 onlineUsersCount: "{n}人が起きとるで"
+nUsers: "{n}ユーザー"
+nNotes: "{n}ノート"
+sendErrorReports: "エラーリポートを送る"
 sendErrorReportsDescription: "オンにしたら、なんか変なことが起きたときにエラーの詳細がMisskeyに共有されて、ソフトウェアの品質向上に役立てられるんや。エラー情報には、OSのバージョン、ブラウザの種類、行動履歴などが含まれるで。"
+myTheme: "マイテーマ"
+backgroundColor: "背景"
+accentColor: "アクセント"
+textColor: "文字"
+saveAs: "名前を付けて保存"
+advanced: "高度"
+value: "値"
+updatedAt: "更新日時"
+saveConfirm: "保存するで？"
+deleteConfirm: "ホンマに削除するで？"
+registry: "レジストリ"
+closeAccount: "アカウントを閉鎖する"
+currentVersion: "現在のバージョン"
+latestVersion: "最新のバージョン"
 youAreRunningUpToDateClient: "今使ってるクライアントが最新やで！"
 newVersionOfClientAvailable: "新しいバージョンのクライアントが使えるで。"
+usageAmount: "使用量"
+capacity: "容量"
+inUse: "使用中"
+editCode: "コードを編集"
+apply: "適用"
+receiveAnnouncementFromInstance: "インスタンスからのお知らせを受け取る"
+emailNotification: "メール通知"
+inChannelSearch: "チャンネル内検索"
+useReactionPickerForContextMenu: "右クリックでリアクションピッカーを開くようにする"
+typingUsers: "{users}が今書きよるで"
+jumpToSpecifiedDate: "特定の日付にジャンプ"
+showingPastTimeline: "過去のタイムラインを表示してるで"
+clear: "クリア"
+goBack: "戻る"
+info: "情報"
 _email:
   _follow:
     title: "フォローされたで"
+  _receiveFollowRequest:
+    title: "フォローリクエストを受け取ったで"
+_plugin:
+  install: "プラグインのインストール"
+  installWarn: "信頼できへんプラグインはインストールせんとってな"
+  manage: "プラグインの管理"
+_registry:
+  scope: "スコープ"
+  key: "キー"
+  keys: "キー"
+  domain: "ドメイン"
+  createKey: "キーを作る"
+_aboutMisskey:
+  about: "Misskeyはsyuiloが2014年からずっと作ってはる、オープンソースなソフトウェアや。"
+  contributors: "主な貢献者"
+  allContributors: "全ての貢献者"
+  source: "ソースコード"
+  translation: "Misskeyを翻訳"
+  donate: "Misskeyに寄付"
+  morePatrons: "他にもぎょうさんの人からサポートしてもろてんねん。ほんまおおきに🥰"
+  patrons: "支援者"
 _mfm:
+  cheatSheet: "MFMチートシート"
   mention: "メンション"
+  hashtag: "ハッシュタグ"
+  url: "URL"
+  link: "リンク"
+  bold: "太字"
+  center: "中央寄せ"
+  inlineCode: "コード(インライン)"
+  blockCode: "コード(ブロック)"
+  inlineMath: "数式(インライン)"
   quote: "引用"
   emoji: "カスタム絵文字"
   search: "探す"
+  shake: "アニメーション(ぶるぶる)"
+  twitch: "アニメーション(ブレ)"
+  spin: "アニメーション(回転)"
+  blur: "ぼかし"
+  font: "フォント"
+_reversi:
+  reversi: "リバーシ"
+  gameSettings: "対局の設定"
+  chooseBoard: "ボードを選択"
+  blackOrWhite: "先行/後攻"
+  blackIs: "{name}が黒(先行)"
+  rules: "ルール"
+  botSettings: "Botのオプション"
+  pastTurnOf: "{name}のターン"
+  surrender: "投了"
+  surrendered: "投了により"
+  drawn: "引き分け"
+  won: "{name}の勝ち"
+  black: "黒"
+  white: "白"
+  total: "合計"
+  turnCount: "{count}ターン目"
+  myGames: "自分の対局"
+  allGames: "みんなの対局"
+  ended: "終了"
+  playing: "対局中"
+  isLlotheo: "石の少ない方が勝ち(ロセオ)"
+  loopedMap: "ループマップ"
+_instanceTicker:
+  none: "表示せん"
+  remote: "リモートユーザーに表示"
+  always: "常に表示"
+_serverDisconnectedBehavior:
+  reload: "自動でリロード"
+  dialog: "ダイアログで警告"
 _channel:
+  create: "チャンネルを作る"
+  edit: "チャンネルを編集"
+  setBanner: "バナーを設定"
+  removeBanner: "バナーを削除"
+  featured: "トレンド"
   notesCount: "{n}こ投稿があるで"
 _sidebar:
+  full: "フル"
   icon: "アイコン"
+  hide: "隠す"
+_wordMute:
+  soft: "ソフト"
+  hard: "ハード"
 _theme:
+  explore: "テーマを探す"
+  install: "テーマのインストール"
+  manage: "テーマの管理"
+  code: "テーマコード"
+  description: "説明"
+  installed: "{name}をインストールしたで。"
+  installedThemes: "インストールされとるテーマ"
+  builtinThemes: "標準のテーマ"
+  alreadyInstalled: "そのテーマはもうインストールされとるで？"
+  make: "テーマを作る"
+  base: "ベース"
+  addConstant: "定数を追加"
+  defaultValue: "デフォルト値"
+  color: "色"
+  refProp: "プロパティを参照"
+  refConst: "定数を参照"
+  key: "キー"
+  func: "関数"
+  funcKind: "関数の種類"
+  argument: "引数"
+  basedProp: "元にするプロパティの名前"
+  alpha: "不透明度"
+  darken: "暗さ"
+  lighten: "明るさ"
   keys:
+    accent: "アクセント"
+    bg: "背景"
+    fg: "文字"
+    focus: "フォーカス"
+    indicator: "インジケーター"
+    panel: "パネル"
+    shadow: "影"
+    header: "ヘッダー"
+    navBg: "サイドバーの背景"
+    navFg: "サイドバーの文字"
+    navHoverFg: "サイドバー文字(ホバー)"
+    navActive: "サイドバー文字(アクティブ)"
+    navIndicator: "サイドバーのインジケーター"
+    link: "リンク"
+    hashtag: "ハッシュタグ"
     mention: "メンション"
+    mentionMe: "うち宛てのメンション"
     renote: "Renote"
+    modalBg: "モーダルの背景"
+    divider: "分割線"
+    scrollbarHandle: "スクロールバーの取っ手"
+    scrollbarHandleHover: "スクロールバーの取っ手（ホバー)"
+    dateLabelFg: "日付ラベルの文字"
+    infoBg: "情報の背景"
+    infoFg: "情報の文字"
+    infoWarnBg: "警告の背景"
+    infoWarnFg: "警告の文字"
+    cwBg: "CW ボタンの背景"
+    cwFg: "CW ボタンの文字"
+    cwHoverBg: "CW ボタンの背景 (ホバー)"
+    toastBg: "通知トーストの背景"
+    toastFg: "通知トーストの文字"
+    buttonBg: "ボタンの背景"
+    buttonHoverBg: "ボタンの背景 (ホバー)"
+    inputBorder: "入力ボックスの縁取り"
+    listItemHoverBg: "リスト項目の背景 (ホバー)"
+    driveFolderBg: "ドライブフォルダーの背景"
+    wallpaperOverlay: "壁紙のオーバーレイ"
+    badge: "バッジ"
+    messageBg: "チャットの背景"
+    accentDarken: "アクセント (暗め)"
+    accentLighten: "アクセント (明るめ)"
+    fgHighlighted: "強調されとる文字"
 _sfx:
   note: "ノート"
+  noteMy: "ノート(自分)"
   notification: "通知"
   chat: "チャット"
 _ago:
@@ -511,24 +825,63 @@ _tutorial:
 _2fa:
   alreadyRegistered: "もう設定終わっとるわ。"
 _permissions:
+  "read:reactions": "リアクションを見る"
+  "write:votes": "投票する"
+  "read:pages": "ページを見る"
   "read:page-likes": "ページのええやんを見る"
   "write:page-likes": "ページのええやんを操作する"
+  "read:user-groups": "ユーザーグループを見る"
+  "read:channels": "チャンネルを見る"
 _auth:
   permissionAsk: "このアプリは次の権限を要求しとるで"
 _antennaSources:
   all: "みなのノート"
   homeTimeline: "フォローしとるユーザーのノート"
+_weekday:
+  sunday: "日曜日"
+  monday: "月曜日"
+  tuesday: "火曜日"
+  wednesday: "水曜日"
+  thursday: "木曜日"
+  friday: "金曜日"
+  saturday: "土曜日"
 _widgets:
+  memo: "付箋"
   notifications: "通知"
   timeline: "タイムライン"
+  calendar: "カレンダー"
+  trends: "トレンド"
+  clock: "時計"
+  rss: "RSSリーダー"
   activity: "アクティビティ"
+  photos: "フォト"
+  digitalClock: "デジタル時計"
   federation: "連合"
+  postForm: "投稿フォーム"
+  slideshow: "スライドショー"
+  button: "ボタン"
+  onlineUsers: "オンラインユーザー"
   jobQueue: "ジョブキュー"
+  serverMetric: "サーバーメトリクス"
+  aiscript: "AiScriptコンソール"
 _cw:
+  hide: "隠す"
   show: "続き見して！"
+  chars: "{count}文字"
+  files: "{count}ファイル"
 _poll:
+  choiceN: "選択肢{n}"
   noMore: "これ以上追加でけへん"
+  canMultipleVote: "複数回答可"
+  expiration: "期限"
+  infinite: "無期限"
+  at: "日時指定"
+  after: "経過指定"
+  deadlineDate: "期日"
   deadlineTime: "時間"
+  duration: "期間"
+  votesCount: "{n}票"
+  vote: "投票する"
 _visibility:
   publicDescription: "みなのユーザーに公開"
   home: "ホーム"
@@ -542,44 +895,372 @@ _exportOrImport:
   muteList: "ミュート"
   blockingList: "ブロック"
   userLists: "リスト"
+_charts:
+  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: "ピアノ"
+    facial-tissue: "ティッシュボックス"
+    server: "サーバー"
+    moon: "月"
+    corkboard: "コルクボード"
+    mousepad: "マウスパッド"
     monitor: "モニター"
+    keyboard: "キーボード"
+    carpet-stripe: "カーペット(縞)"
+    mat: "マット"
+    color-box: "カラーボックス"
+    wall-clock: "壁掛け時計"
+    photoframe: "額縁"
+    cube: "キューブ"
+    tv: "テレビ"
+    pinguin: "ピンギン"
+    rubik-cube: "ルービックキューブ"
+    poster-h: "ルービックキューブ"
+    poster-v: "ポスター(縦長)"
+    sofa: "ソファ"
+    spiral: "螺旋階段"
+    bin: "ゴミ箱"
+    cup-noodle: "カップ麺"
+    holo-display: "ホログラフィックディスプレイ"
+    energy-drink: "エナジードリンク"
+    doll-ai: "藍ちゃん人形"
+    banknote: "札束"
 _pages:
+  newPage: "ページを作る"
+  editPage: "ページの編集"
+  readPage: "ソースを表示中"
+  created: "ページを作成したで"
+  updated: "ページを更新したで"
+  deleted: "ページを削除したで"
+  pageSetting: "ページ設定"
+  viewPage: "ページを見る"
   like: "ええやん"
   unlike: "良くないわ"
   liked: "ええと思ったページ"
+  contents: "コンテンツ"
+  summary: "ページの要約"
+  alignCenter: "中央寄せ"
+  font: "フォント"
+  fontSerif: "セリフ"
+  fontSansSerif: "サンセリフ"
+  eyeCatchingImageSet: "アイキャッチ画像を設定"
+  eyeCatchingImageRemove: "アイキャッチ画像を削除"
+  chooseBlock: "ブロックを追加"
+  selectType: "種類を選択"
+  contentBlocks: "コンテンツ"
+  inputBlocks: "入力"
+  specialBlocks: "特殊"
   blocks:
+    text: "テキスト"
+    textarea: "テキストエリア"
+    section: "セクション"
     image: "画像"
+    button: "ボタン"
+    if: "もし"
+    _if:
+      variable: "変数"
+    post: "投稿フォーム"
+    _post:
+      text: "内容"
+      canvasId: "キャンバスID"
+    textInput: "テキスト入力"
+    _textInput:
+      name: "変数名"
+      text: "タイトル"
+      default: "デフォルト値"
+    textareaInput: "複数行テキスト入力"
+    _textareaInput:
+      name: "変数名"
+      text: "タイトル"
+      default: "デフォルト値"
+    numberInput: "数値入力"
+    _numberInput:
+      name: "変数名"
+      text: "タイトル"
+      default: "デフォルト値"
+    canvas: "キャンバス"
+    _canvas:
+      id: "キャンバスID"
+      width: "幅"
+      height: "高さ"
+    note: "ノート埋め込み"
+    _note:
+      id: "ノートID"
+      detailed: "詳細な表示"
+    switch: "スイッチ"
+    _switch:
+      name: "変数名"
+      text: "タイトル"
+      default: "デフォルト値"
+    counter: "カウンター"
+    _counter:
+      name: "変数名"
+      text: "タイトル"
+      inc: "増加値"
+    _button:
+      text: "タイトル"
+      colored: "色付き"
+      action: "ボタンを押したときの動作"
+      _action:
+        dialog: "ダイアログを表示する"
+        _dialog:
+          content: "内容"
+        resetRandom: "乱数をリセット"
+        pushEvent: "イベントを送信させる"
+        _pushEvent:
+          event: "イベント名"
+          no-variable: "なし"
+        callAiScript: "AiScript呼び出し"
+        _callAiScript:
+          functionName: "関数名"
+    radioButton: "選択肢"
+    _radioButton:
+      name: "変数名"
+      title: "タイトル"
+      values: "改行で区切った選択肢"
+      default: "デフォルト値"
   script:
     categories:
+      flow: "制御"
+      logical: "論理演算"
+      operation: "計算"
+      comparison: "比較"
+      random: "ランダム"
+      value: "値"
+      fn: "関数"
+      text: "関数"
+      convert: "変換"
       list: "リスト"
     blocks:
+      text: "テキスト"
+      multiLineText: "テキスト(複数行)"
+      textList: "テキストのリスト"
+      strLen: "テキストの長さ"
+      _strLen:
+        arg1: "テキスト"
+      strPick: "文字取り出し"
+      _strPick:
+        arg1: "テキスト"
+        arg2: "文字の位置"
+      strReplace: "テキスト置き換え"
+      _strReplace:
+        arg1: "テキスト"
+        arg2: "置き換え前"
+        arg3: "置き換え後"
+      strReverse: "テキストを反転"
+      _strReverse:
+        arg1: "テキスト"
+      join: "テキストを連結"
       _join:
         arg1: "リスト"
+        arg2: "区切り"
+      add: "足す"
+      _add:
+        arg1: "A"
+        arg2: "B"
+      subtract: "引く"
+      _subtract:
+        arg1: "A"
+        arg2: "A"
+      multiply: "掛ける"
+      _multiply:
+        arg1: "A"
+        arg2: "B"
+      divide: "割る"
+      _divide:
+        arg1: "A"
+        arg2: "B"
+      mod: "割った余り"
+      _mod:
+        arg1: "A"
+        arg2: "B"
+      round: "小数を丸める"
+      _round:
+        arg1: "数値"
+      eq: "AとBが同じ"
+      _eq:
+        arg1: "A"
+        arg2: "B"
+      notEq: "AとBが異なる"
+      _notEq:
+        arg1: "A"
+        arg2: "B"
+      and: "AかつB"
+      _and:
+        arg1: "A"
+        arg2: "B"
+      or: "AまたはB"
+      _or:
+        arg1: "A"
+        arg2: "B"
+      lt: "< AがBより小さい"
+      _lt:
+        arg1: "A"
+        arg2: "B"
+      gt: "> AがBより大きい"
+      _gt:
+        arg1: "A"
+        arg2: "B"
+      ltEq: "<= AがBと同じか小さい"
+      _ltEq:
+        arg1: "A"
+        arg2: "B"
+      gtEq: ">= AがBと同じか大きい"
+      _gtEq:
+        arg1: "A"
+        arg2: "B"
+      if: "分岐"
+      _if:
+        arg1: "もし"
+        arg2: "なら"
+        arg3: "そうでなければ"
+      not: "否定"
+      _not:
+        arg1: "否定"
+      random: "ランダム"
+      _random:
+        arg1: "確率"
+      rannum: "乱数"
+      _rannum:
+        arg1: "最小"
+        arg2: "最大"
+      randomPick: "リストからランダムに選ぶ"
       _randomPick:
         arg1: "リスト"
+      dailyRandom: "ランダム (ユーザーごとに日替わり)"
+      _dailyRandom:
+        arg1: "確率"
+      dailyRannum: "乱数 (ユーザーごとに日替わり)"
+      _dailyRannum:
+        arg1: "最小"
+        arg2: "最大"
+      dailyRandomPick: "リストからランダムに選ぶ (ユーザーごとに日替わり)"
       _dailyRandomPick:
         arg1: "リスト"
+      seedRandom: "ランダム (シード)"
+      _seedRandom:
+        arg1: "シード"
+        arg2: "確率"
+      seedRannum: "乱数 (シード)"
+      _seedRannum:
+        arg1: "シード"
+        arg2: "最小"
+        arg3: "最大"
+      seedRandomPick: "リストからランダムに選択 (シード)"
       _seedRandomPick:
+        arg1: "シード"
         arg2: "リスト"
+      DRPWPM: "確率付きリストからランダムに選ぶ (ユーザーごとに日替わり)"
+      _DRPWPM:
+        arg1: "テキストのリスト"
+      pick: "リストから選ぶ"
       _pick:
         arg1: "リスト"
+        arg2: "位置"
+      listLen: "リストの長さを取得"
       _listLen:
         arg1: "リスト"
+      number: "数値"
+      stringToNumber: "テキストを数値に"
+      _stringToNumber:
+        arg1: "テキスト"
+      numberToString: "数値をテキストに"
+      _numberToString:
+        arg1: "数値"
+      splitStrByLine: "テキストを行で分割"
+      _splitStrByLine:
+        arg1: "テキスト"
+      ref: "変数"
+      aiScriptVar: "AiScript変数"
+      fn: "関数"
+      _fn:
+        slots: "スロット"
+        arg1: "出力"
+      for: "繰り返し"
+      _for:
+        arg1: "回数"
+        arg2: "処理"
+    thereIsEmptySlot: "スロット{slot}が空っぽやで！"
     types:
+      string: "テキスト"
+      number: "数値"
+      boolean: "フラグ"
       array: "リスト"
+      stringArray: "テキストのリスト"
+    emptySlot: "空のスロット"
+    enviromentVariables: "環境変数"
+    pageVariables: "ページ要素"
+    argVariables: "入力スロット"
 _notification:
+  fileUploaded: "ファイルが無事アップロードされたで。"
+  youGotMention: "{name}からのメンション"
+  youGotReply: "{name}からのリプライ"
   youWereFollowed: "フォローされたで"
   youReceivedFollowRequest: "フォロー許可してほしいみたいやな"
   yourFollowRequestAccepted: "フォローさせてもろたで"
   youWereInvitedToGroup: "グループに招待されとるで"
   _types:
+    all: "すべて"
     follow: "フォロー"
     mention: "メンション"
     renote: "Renote"
@@ -588,9 +1269,24 @@ _notification:
     receiveFollowRequest: "フォロー許可してほしいみたいやで"
     followRequestAccepted: "フォローが受理されたで"
 _deck:
+  alwaysShowMainColumn: "いつもメインカラムを表示"
+  columnAlign: "カラムの寄せ"
+  columnMargin: "カラム間のマージン"
+  columnHeaderHeight: "カラムのヘッダー幅"
+  addColumn: "カラムを追加"
+  swapLeft: "左に移動"
+  swapRight: "右に移動"
+  swapUp: "上に移動"
+  swapDown: "下に移動"
+  stackLeft: "左に重ねる"
+  popRight: "右に出す"
+  profile: "プロファイル"
   _columns:
+    main: "メイン"
+    widgets: "ウィジェット"
     notifications: "通知"
     tl: "タイムライン"
     antenna: "アンテナ"
     list: "リスト"
     mentions: "あんた宛て"
+    direct: "ダイレクト"

locales/ko-KR.yml

@@ -552,6 +552,8 @@ manage: "관리"
 plugins: "플러그인"
 deck: "덱"
 undeck: "덱 해제"
+useBlurEffectForModal: "모달에 흐림 효과 사용"
+useFullReactionPicker: "모든 기능이 포함된 리액션 선택기 사용"
 width: "폭"
 height: "높이"
 large: "크게"
@@ -613,6 +615,7 @@ send: "전송"
 abuseMarkAsResolved: "해결됨으로 표시"
 openInNewTab: "새 탭에서 열기"
 openInSideView: "사이드뷰로 열기"
+defaultNavigationBehaviour: "기본 탐색 동작"
 editTheseSettingsMayBreakAccount: "이 설정을 변경하면 계정이 손상될 수 있습니다."
 instanceTicker: "노트의 인스턴스 정보"
 waitingFor: "{x}을(를) 기다리고 있습니다"
@@ -684,6 +687,7 @@ textColor: "문자 색"
 saveAs: "다른 이름으로 저장"
 advanced: "고급"
 value: "값"
+createdAt: "생성된 날짜"
 updatedAt: "수정한 날짜"
 saveConfirm: "저장하시겠습니까?"
 deleteConfirm: "삭제하시겠습니까?"
@@ -692,15 +696,47 @@ registry: "레지스트리"
 closeAccount: "계정 폐쇄"
 currentVersion: "현재 버전"
 latestVersion: "최신 버전"
+youAreRunningUpToDateClient: "사용 중인 클라이언트는 최신입니다."
 newVersionOfClientAvailable: "새로운 버전의 클라이언트를 이용할 수 있습니다."
 usageAmount: "사용량"
 capacity: "용량"
 inUse: "사용중"
 editCode: "코드 수정"
 apply: "적용"
+receiveAnnouncementFromInstance: "이 인스턴스의 알림을 이메일로 수신할게요"
+emailNotification: "메일 알림"
+inChannelSearch: "채널에서 검색"
+useReactionPickerForContextMenu: "우클릭하여 리액션 선택기 열기"
+typingUsers: "{users} 님이 입력하고 있어요.."
+jumpToSpecifiedDate: "특정 날짜로 이동"
+showingPastTimeline: "과거의 타임라인을 표시하고 있어요"
+clear: "지우기"
+markAllAsRead: "모두 읽은 상태로 표시"
+goBack: "뒤로"
+unlikeConfirm: "좋아요를 취소할까요?"
+fullView: "전체 화면"
+quitFullView: "전체 화면 해제"
+addDescription: "설명 추가"
+userPagePinTip: "각 노트의 메뉴에서 「프로필에 고정」을 선택하는 것으로, 여기에 노트를 표시해 둘 수 있어요."
+notSpecifiedMentionWarning: "수신자가 선택되지 않은 멘션이 있어요"
+info: "정보"
+userInfo: "유저 정보"
+unknown: "알 수 없음"
+onlineStatus: "온라인 상태"
+hideOnlineStatus: "온라인 상태 숨기기"
+hideOnlineStatusDescription: "온라인 상태를 숨기면, 검색과 같은 일부 기능에 영향을 미칠 수 있습니다."
+online: "온라인"
+active: "활동 중"
+offline: "오프라인"
 _email:
   _follow:
     title: "새로운 팔로워가 있습니다"
+  _receiveFollowRequest:
+    title: "팔로우 요청을 받았습니다"
+_plugin:
+  install: "플러그인 설치"
+  installWarn: "신뢰할 수 없는 플러그인은 설치하지 않는 것이 좋습니다."
+  manage: "플러그인 관리"
 _registry:
   scope: "범위"
   key: "키"
@@ -734,6 +770,7 @@ _mfm:
   linkDescription: "문장의 특정 범위를 URL로 표시합니다."
   bold: "굵음/볼드체"
   boldDescription: "문자를 굵게 강조합니다."
+  small: "눈에 띄지 않음"
   smallDescription: "내용을 작고 연하게 보이게 합니다."
   center: "가운데 정렬"
   centerDescription: "내용을 가운데 정렬로 보이게 합니다."
@@ -746,19 +783,35 @@ _mfm:
   blockMath: "수식(블록)"
   blockMathDescription: "여러 줄의 수식(KaTeX)를 블록으로 보이게 합니다."
   quote: "인용"
+  quoteDescription: "내용을 인용문으로 표시합니다."
   emoji: "커스텀 이모지"
   emojiDescription: "커스텀 이모지의 이름을 쌍점(:)으로 감싸서 커스텀 이모지를 사용합니다."
   search: "검색"
   searchDescription: "주어진 키워드가 입력된 검색창을 보이게 합니다."
   flip: "플립"
   flipDescription: "내용을 상하 또는 좌우로 반전시킵니다."
+  jelly: "애니메이션 (젤리)"
+  jellyDescription: "젤리처럼 탱글탱글한 느낌의 효과를 줍니다."
+  tada: "애니메이션 (짠!)"
+  tadaDescription: "짠! 하는 느낌의 효과를 줍니다."
   jump: "애니메이션(점프)"
+  jumpDescription: "펄쩍 뛸 듯한 느낌의 효과를 줍니다."
+  bounce: "애니메이션 (바운스)"
+  bounceDescription: "통통 튀는 느낌의 효과를 줍니다."
+  shake: "애니메이션 (부들부들)"
+  shakeDescription: "부들부들 떠는 느낌의 효과를 줍니다."
+  twitch: "애니메이션 (경련)"
+  twitchDescription: "격하게 흔들리는 느낌의 효과를 줍니다."
+  spin: "애니메이션 (회전)"
+  spinDescription: "회전 효과를 줍니다."
   x2: "크게"
   x2Description: "내용을 크게 표시합니다."
   x3: "더 크게"
   x3Description: "내용을 더 크게 표시합니다."
   x4: "매우 크게"
   x4Description: "내용을 매우 크게 표시합니다."
+  blur: "흐림"
+  blurDescription: "내용이 흐리게 보입니다. 마우스를 위에 올려두면 내용이 보입니다."
   font: "폰트"
   fontDescription: "내용의 글꼴을 지정할 수 있습니다."
 _reversi:
@@ -772,6 +825,7 @@ _reversi:
   thisGameIsStartedSoon: "잠시 후에 대국이 시작됩니다"
   waitingForOther: "상대의 준비가 완료될 때까지 기다리고 있습니다"
   waitingForMe: "당신의 준비 완료를 기다리고 있습니다"
+  waitingBoth: "준비해 주세요"
   ready: "준비 완료"
   cancelReady: "준비 취소"
   opponentTurn: "상대의 차례입니다"
@@ -812,6 +866,7 @@ _channel:
   usersCount: "{n}명 참여 중"
   notesCount: "{n}노트"
 _sidebar:
+  full: "전체"
   icon: "아이콘"
   hide: "숨기기"
 _wordMute:
@@ -820,12 +875,15 @@ _wordMute:
   muteWordsDescription2: "정규 표현식을 사용하려면 키워드를 빗금표(/)로 감싸 주세요."
   softDescription: "지정한 조건의 노트를 타임라인에서 숨깁니다."
   hardDescription: "지정한 조건의 노트를 타임라인에 추가하지 않습니다. 타임라인에 추가되지 않은 노트는 조건을 변경해도 표시되지 않습니다."
+  soft: "보통"
+  hard: "보다 높은 수준"
   mutedNotes: "뮤트된 노트"
 _theme:
   explore: "테마 찾아보기"
   install: "테마 설치"
   manage: "테마 관리"
   code: "테마 코드"
+  description: "설명"
   installed: "{name} 테마가 설치되었습니다"
   installedThemes: "설치된 테마"
   builtinThemes: "표준 테마"
@@ -843,17 +901,57 @@ _theme:
   func: "함수"
   funcKind: "함수 종류"
   argument: "매개변수"
+  basedProp: "기준으로 할 속성 이름"
+  alpha: "불투명도"
+  darken: "어두움"
+  lighten: "밝음"
   inputConstantName: "상수 이름을 입력하세요"
   importInfo: "여기에 테마 코드를 붙여 넣어 에디터로 불러올 수 있습니다."
   deleteConstantConfirm: "상수 {const}를 삭제하시겠습니까?"
   keys:
     accent: "강조 색상"
+    bg: "배경"
+    fg: "텍스트"
+    focus: "포커스"
+    indicator: "인디케이터"
     panel: "패널"
+    shadow: "그림자"
+    header: "헤더"
+    navBg: "사이드바 배경"
+    navFg: "사이드바 텍스트"
+    navHoverFg: "사이드바 텍스트 (호버)"
+    navActive: "사이드바 텍스트 (활성)"
+    navIndicator: "사이드바 인디케이터"
     link: "링크"
     hashtag: "해시태그"
     mention: "멘션"
+    mentionMe: "나에게 보낸 멘션"
     renote: "Renote"
+    modalBg: "모달 배경"
     divider: "구분선"
+    scrollbarHandle: "스크롤바 핸들"
+    scrollbarHandleHover: "스크롤바 핸들 (호버)"
+    dateLabelFg: "날짜 레이블 텍스트"
+    infoBg: "정보창 배경"
+    infoFg: "정보창 텍스트"
+    infoWarnBg: "경고창 배경"
+    infoWarnFg: "경고창 텍스트"
+    cwBg: "CW 버튼 배경"
+    cwFg: "CW 버튼 텍스트"
+    cwHoverBg: "CW 버튼 배경 (호버)"
+    toastBg: "알림창 배경"
+    toastFg: "알림창 텍스트"
+    buttonBg: "버튼 배경"
+    buttonHoverBg: "버튼 배경 (호버)"
+    inputBorder: "입력 필드 테두리"
+    listItemHoverBg: "리스트 항목 배경 (호버)"
+    driveFolderBg: "드라이브 폴더 배경"
+    wallpaperOverlay: "배경화면 오버레이"
+    badge: "배지"
+    messageBg: "채팅 배경"
+    accentDarken: "강조 색상 (어두움)"
+    accentLighten: "강조 색상 (밝음)"
+    fgHighlighted: "강조된 텍스트"
 _sfx:
   note: "새 노트"
   noteMy: "내 노트"
@@ -977,8 +1075,10 @@ _widgets:
   postForm: "글 입력란"
   slideshow: "슬라이드 쇼"
   button: "버튼"
+  onlineUsers: "온라인 유저"
   jobQueue: "작업 대기열"
   serverMetric: "서버 통계"
+  aiscript: "AiScript 콘솔"
 _cw:
   hide: "숨기기"
   show: "더 보기"
@@ -1033,8 +1133,13 @@ _profile:
   username: "유저명"
   description: "자기소개"
   youCanIncludeHashtags: "해시 태그를 포함할 수 있습니다."
+  metadata: "추가 정보"
+  metadataEdit: "추가 정보 편집"
+  metadataDescription: "프로필에 최대 4개의 추가 정보를 표시할 수 있어요"
   metadataLabel: "라벨"
   metadataContent: "내용"
+  changeAvatar: "아바타 이미지 변경"
+  changeBanner: "배너 이미지 변경"
 _exportOrImport:
   allNotes: "모든 노트"
   followingList: "팔로잉"
@@ -1434,19 +1539,30 @@ _notification:
   youGotQuote: "{name}님이 인용함"
   youRenoted: "{name}님이 Renote"
   youGotPoll: "{name}님이 투표함"
+  youGotMessagingMessageFromUser: "{name} 님이 보낸 채팅이 있어요"
+  youGotMessagingMessageFromGroup: "{name}에서 보낸 채팅이 있어요"
   youWereFollowed: "새로운 팔로워가 있습니다"
   youReceivedFollowRequest: "새로운 팔로우 요청이 있습니다"
   yourFollowRequestAccepted: "팔로우 요청이 수락되었습니다"
   youWereInvitedToGroup: "그룹에 초대되었습니다"
   _types:
+    all: "전부"
     follow: "팔로잉"
     mention: "멘션"
+    reply: "답글"
     renote: "Renote"
     quote: "인용"
     reaction: "리액션"
+    pollVote: "투표 참여"
+    receiveFollowRequest: "팔로우 요청을 받았을 때"
+    followRequestAccepted: "팔로우 요청이 승인되었을 때"
+    groupInvited: "그룹에 초대되었을 때"
+    app: "연동된 앱을 통한 알림"
 _deck:
   alwaysShowMainColumn: "메인 칼럼 항상 표시"
   columnAlign: "칼럼 정렬"
+  columnMargin: "칼럼 간 여백"
+  columnHeaderHeight: "칼럼 헤더 폭"
   addColumn: "칼럼 추가"
   swapLeft: "왼쪽으로 이동"
   swapRight: "오른쪽으로 이동"

locales/pl-PL.yml

@@ -644,6 +644,8 @@ backgroundColor: "Tło"
 accentColor: "Akcent"
 textColor: "Tekst"
 value: "Wartość"
+goBack: "Wróć"
+info: "Informacje"
 _email:
   _follow:
     title: "Zaobserwował(a) Cię"
@@ -762,6 +764,7 @@ _theme:
   install: "Zainstaluj motyw"
   manage: "Zarządzanie motywami"
   code: "Kod motywu"
+  description: "Opis"
   installed: "Zainstalowano {name}"
   installedThemes: "Zainstalowane motywy"
   builtinThemes: "Wbudowane motywy"

locales/ru-RU.yml

@@ -623,7 +623,7 @@ random: "Случайные"
 system: "Система"
 switchUi: "Выбор вида"
 desktop: "Стол"
-clip: "В подборку"
+clip: "Подборка"
 createNew: "Новый документ"
 optional: "Необязательно"
 createNewClip: "Новая подборка"
@@ -710,6 +710,8 @@ typingUsers: "Стук клавиш. Это {users}…"
 jumpToSpecifiedDate: "Перейти к заданной дате"
 showingPastTimeline: "Отображается старая лента"
 clear: "Очистить"
+goBack: "Выход"
+info: "Описание"
 _email:
   _follow:
     title: "Новый подписчик"
@@ -865,6 +867,7 @@ _theme:
   install: "Установить тему"
   manage: "Менеджер тем"
   code: "Код темы"
+  description: "Описание"
   installed: "Тема «{name}» установлена."
   installedThemes: "Установленные темы"
   builtinThemes: "Встроенные темы"

locales/uk-UA.yml

@@ -689,6 +689,8 @@ deleteConfirm: "Ви дійсно бажаєте це видалити?"
 invalidValue: "Некоректне значення."
 registry: "Реєстр"
 closeAccount: "Закрити обліковий запис"
+goBack: "Назад"
+info: "Інформація"
 _email:
   _follow:
     title: "Новий підписник"
@@ -830,6 +832,7 @@ _theme:
   install: "Встановити тему"
   manage: "Керування темами"
   code: "Код теми"
+  description: "Опис"
   installed: "Тему {name} встановлено"
   installedThemes: "Встановлені теми"
   builtinThemes: "Вбудоваі теми"

locales/zh-CN.yml

@@ -584,7 +584,7 @@ smtpSecureInfo: "使用STARTTLS时关闭。"
 testEmail: "邮件发送测试"
 wordMute: "文字屏蔽"
 userSaysSomething: "{name}说了什么"
-makeActive: "激活"
+makeActive: "启用"
 display: "显示"
 copy: "复制"
 metrics: "指标"
@@ -687,6 +687,7 @@ textColor: "文本"
 saveAs: "另存为"
 advanced: "高级"
 value: "值"
+createdAt: "创建日期"
 updatedAt: "更新时间"
 saveConfirm: "确定保存？"
 deleteConfirm: "确定删除?"
@@ -710,6 +711,23 @@ typingUsers: "{users}正在输入"
 jumpToSpecifiedDate: "跳转到特定日期"
 showingPastTimeline: "显示过去的时间线"
 clear: "清除"
+markAllAsRead: "全部标记为已读"
+goBack: "返回"
+unlikeConfirm: "取消赞？"
+fullView: "全屏"
+quitFullView: "退出全屏"
+addDescription: "添加描述"
+userPagePinTip: "在帖子的菜单中选择“置顶”，即可显示该条帖子。"
+notSpecifiedMentionWarning: "有未指定的提及"
+info: "关于"
+userInfo: "用户信息"
+unknown: "未知"
+onlineStatus: "在线状态"
+hideOnlineStatus: "隐藏在线状态"
+hideOnlineStatusDescription: "隐藏在线状态后，可能会降低例如搜索等功能的便利性。"
+online: "在线"
+active: "活动"
+offline: "离线"
 _email:
   _follow:
     title: "你有新的关注者"
@@ -865,6 +883,7 @@ _theme:
   install: "安装主题"
   manage: "主题管理"
   code: "主题代码"
+  description: "描述"
   installed: "{name} 已安装"
   installedThemes: "已安装的主题"
   builtinThemes: "标准主题"

locales/zh-TW.yml

@@ -149,7 +149,7 @@ searchWith: "搜尋: {q}"
 youHaveNoLists: "你沒有任何清單"
 followConfirm: "你真的要追隨{name}嗎？"
 proxyAccount: "代理帳號"
-proxyAccountDescription: "代理帳號是在某些情況下充當其他服務器用戶的帳號。例如，當用戶將一個來自其他服務器的帳號放在列表中時，由於沒有其他用戶關注該帳號，該指令不會傳送到該服務器上，因此會由代理帳戶關注。"
+proxyAccountDescription: "代理帳號是在某些情況下充當其他伺服器用戶的帳號。例如，當用戶將一個來自其他伺服器的帳號放在列表中時，由於沒有其他用戶關注該帳號，該指令不會傳送到該伺服器上，因此會由代理帳戶關注。"
 host: "主機"
 selectUser: "選取使用者"
 recipient: "收件人"
@@ -182,7 +182,7 @@ clearQueue: "清除佇列"
 clearQueueConfirmTitle: "確定要清除佇列嗎？"
 clearQueueConfirmText: "未發佈的帖子將不會發佈。您通常不需要確認。"
 clearCachedFiles: "清除快取資料"
-clearCachedFilesConfirm: "確定要清除緩存資料嗎？"
+clearCachedFilesConfirm: "確定要清除所有遠端暫存資料嗎？"
 blockedInstances: "已封鎖的實例"
 blockedInstancesDescription: "請逐行輸入需要封鎖的實例。已封鎖的實例將無法與本實例進行通訊。"
 muteAndBlock: "靜音和封鎖"
@@ -215,7 +215,7 @@ retypedNotMatch: "兩次輸入不一致。"
 currentPassword: "目前密碼"
 newPassword: "新密碼"
 newPasswordRetype: "確認密碼"
-attachFile: "添加附件"
+attachFile: "上傳附件"
 more: "更多！"
 featured: "精選"
 usernameOrUserId: "使用者名稱或用戶ID"
@@ -256,12 +256,12 @@ registeredDate: "註冊日期"
 location: "位置"
 theme: "外觀主題"
 themeForLightMode: "在淺色模式下使用的主題"
-themeForDarkMode: "在深色模式下使用的主題"
+themeForDarkMode: "在黑暗模式下使用的主題"
 light: "淺色"
-dark: "灰暗"
+dark: "黑暗"
 lightThemes: "明亮主題"
-darkThemes: "灰暗主題"
+darkThemes: "黑暗主題"
-syncDeviceDarkMode: "將深色模式與設備設置同步"
+syncDeviceDarkMode: "將黑暗模式與設備設置同步"
 drive: "雲端硬碟"
 fileName: "檔案名稱"
 selectFile: "選擇檔案"
@@ -313,7 +313,7 @@ connectSerice: "連線"
 disconnectSerice: "中斷連線"
 enableLocalTimeline: "開啟本地時間軸"
 enableGlobalTimeline: "啟用公開時間軸"
-disablingTimelinesInfo: "即使您禁用了時間線功能，管理員和協調人仍可以繼續使用，以方便您。"
+disablingTimelinesInfo: "即使您關閉了時間線功能，管理員和協調人仍可以繼續使用，以方便您。"
 registration: "註冊"
 enableRegistration: "開啟新用戶註冊"
 invite: "邀請"
@@ -373,14 +373,14 @@ about: "資訊"
 aboutMisskey: "關於 Misskey"
 administrator: "管理員"
 token: "權杖"
-twoStepAuthentication: "雙重身份驗證"
+twoStepAuthentication: "兩階段驗證"
 moderator: "板主"
 nUsersMentioned: "提到了{n}"
 securityKey: "安全金鑰"
 securityKeyName: "金鑰名稱"
 registerSecurityKey: "註冊安全金鑰"
-lastUsed: "最後活躍時間"
+lastUsed: "上次使用"
-unregister: "刪除賬戶"
+unregister: "註銷帳號"
 passwordLessLogin: "設置無密碼登入"
 resetPassword: "重置密碼"
 newPasswordIs: "新密碼為「{password}」"
@@ -419,7 +419,7 @@ quoteAttached: "引用"
 quoteQuestion: "是否要引用？"
 noMessagesYet: "沒有訊息"
 newMessageExists: "有新的訊息"
-onlyOneFileCanBeAttached: "只能添加一個附件"
+onlyOneFileCanBeAttached: "只能加入一個附件"
 signinRequired: "請先登入"
 invitations: "邀請"
 invitationCode: "邀請碼"
@@ -446,7 +446,7 @@ useOsNativeEmojis: "使用OS原生表情符號"
 youHaveNoGroups: "找不到群組"
 joinOrCreateGroup: "請加入現有群組，或創建新群組。"
 noHistory: "沒有歷史紀錄"
-signinHistory: "登錄歷史"
+signinHistory: "登入歷史"
 disableAnimatedMfm: "禁用MFM動畫"
 doing: "正在進行"
 category: "類別"
@@ -482,7 +482,7 @@ objectStorageEndpointDesc: "如要使用AWS S3，請留空。否則請根據伺
 objectStorageRegion: "地域（Region）"
 objectStorageUseSSL: "使用SSL"
 objectStorageUseProxy: "使用網路代理"
-objectStorageSetPublicRead: "上載時設定為\"public-read\""
+objectStorageSetPublicRead: "上傳時設定為\"public-read\""
 serverLogs: "伺服器日誌"
 deleteAll: "刪除所有記錄"
 showFixedPostForm: "於時間軸頁頂顯示「發送貼文」方框"
@@ -495,7 +495,7 @@ popout: "彈出型窗口"
 volume: "音量"
 masterVolume: "主音量"
 details: "詳細資訊"
-chooseEmoji: "選擇您的表情符號\n"
+chooseEmoji: "選擇您的表情符號"
 unableToProcess: "操作無法完成"
 recentUsed: "最近使用"
 install: "安裝"
@@ -512,11 +512,11 @@ scratchpad: "暫存記憶體"
 output: "輸出"
 script: "腳本"
 disablePagesScript: "停用頁面的AiScript腳本"
-updateRemoteUser: "更新非本地用戶資料"
+updateRemoteUser: "更新遠端用戶資料"
 deleteAllFiles: "刪除所有檔案"
-deleteAllFilesConfirm: "要删除所有檔案吗？"
+deleteAllFilesConfirm: "要删除所有檔案嗎？"
-removeAllFollowing: "解除所有追隨"
+removeAllFollowing: "解除所有追蹤"
-removeAllFollowingDescription: "解除{host}所有的跟隨。在實例不再存在時執行。"
+removeAllFollowingDescription: "解除{host}所有的追蹤。在實例不再存在時執行。"
 userSuspended: "該用戶已被凍結"
 userSilenced: "該用戶已被禁言。"
 sidebar: "側邊列"
@@ -524,12 +524,12 @@ divider: "分割線"
 addItem: "新增項目"
 rooms: "房間"
 relays: "中繼"
-addRelay: "添加中繼"
+addRelay: "新增中繼"
-inboxUrl: "私信URL"
+inboxUrl: "收件夾URL"
-addedRelays: "已添加的中繼"
+addedRelays: "已加入的中繼"
 serviceworkerInfo: "您需要啟用推送通知"
 deletedNote: "已删除的貼文"
-invisibleNote: "隱藏的帖子"
+invisibleNote: "隱藏的貼文"
 enableInfiniteScroll: "啟用自動滾動頁面模式"
 visibility: "可見性"
 poll: "投票"
@@ -546,7 +546,7 @@ plugins: "插件"
 deck: "多欄模式"
 undeck: "取消多欄模式"
 useBlurEffectForModal: "在模態框使用模糊效果"
-useFullReactionPicker: "使用大尺寸的情感選擇欄"
+useFullReactionPicker: "使用全尺寸的反應選擇器"
 width: "寬度"
 height: "高度"
 large: "大"
@@ -555,7 +555,7 @@ small: "小"
 permission: "權限"
 enableAll: "啟用全部"
 disableAll: "停用全部"
-tokenRequested: "允許訪問帳號"
+tokenRequested: "允許存取帳號"
 notificationType: "通知形式"
 edit: "編輯"
 useStarForReactionFallback: "以★代替未知的表情符號"
@@ -566,11 +566,11 @@ email: "電子郵件"
 emailAddress: "電郵地址"
 smtpConfig: "SMTP伺服器設定"
 smtpHost: "主機"
-smtpPort: "端口"
+smtpPort: "埠"
 smtpUser: "使用者名稱"
 smtpPass: "密碼"
-emptyToDisableSmtpAuth: "留空使用者名稱和密碼以禁用SMTP驗證。"
+emptyToDisableSmtpAuth: "留空使用者名稱和密碼以關閉SMTP驗證。"
-testEmail: "郵件測試發送"
+testEmail: "測試郵件發送"
 wordMute: "靜音文字"
 userSaysSomething: "{name}說了什麼"
 makeActive: "啟用"
@@ -587,22 +587,22 @@ notificationSetting: "通知設定"
 notificationSettingDesc: "選擇顯示通知的類型"
 useGlobalSetting: "使用全域設定"
 other: "其他"
-regenerateLoginToken: "再生登入權杖"
+regenerateLoginToken: "重新產生登入權杖"
-regenerateLoginTokenDescription: "再生用於登入的內部權杖。一般情況下是不需要這樣做的。一旦再生，所有裝置將會被登出。"
+regenerateLoginTokenDescription: "重新產生用於登入的內部權杖。一般情況下是不需要這樣做的。一旦重產，所有裝置將會被登出。"
-fileIdOrUrl: "文檔ID或者URL"
+fileIdOrUrl: "檔案ID或URL"
 chatOpenBehavior: "開啟聊天窗口時的行為"
 behavior: "行為"
-sample: "範例 "
+sample: "範例"
 abuseReports: "檢舉"
 reportAbuse: "檢舉"
 reportAbuseOf: "檢舉{name}"
 fillAbuseReportDescription: "請填寫檢舉的詳細理由。可以的話，請附上針對的URL網址。"
-abuseReported: "內容已經發送。感謝您的報告。"
+abuseReported: "回報已送出。感謝您的報告。"
 send: "發送"
 abuseMarkAsResolved: "處理完畢"
 openInNewTab: "在新分頁中開啟"
 openInSideView: "在側欄中開啟"
-editTheseSettingsMayBreakAccount: "修改這些設定可能會毀壞您的帳戶"
+editTheseSettingsMayBreakAccount: "修改這些設定可能會毀損您的帳戶"
 instanceTicker: "貼文的實例來源"
 waitingFor: "等待{x}"
 random: "隨機"
@@ -618,7 +618,7 @@ i18nInfo: "Misskey已經被志願者們翻譯成各種語言版本，如果想
 manageAccessTokens: "管理存取權杖"
 accountInfo: "帳戶資訊"
 notesCount: "貼文數量"
-repliesCount: "回覆數量\n"
+repliesCount: "回覆數量"
 renotesCount: "轉發數量"
 repliedCount: "回覆數量"
 renotedCount: "轉發次數"
@@ -632,26 +632,27 @@ yes: "確定"
 no: "取消"
 driveFilesCount: "雲端硬碟檔案數量"
 driveUsage: "雲端硬碟使用量"
-noCrawleDescription: "請求網路搜尋引擎不要索引你的個人資料頁、貼文及頁面等。"
+noCrawle: "拒絕搜尋引擎索引"
+noCrawleDescription: "要求網路搜尋引擎不要索引你的個人資料頁、貼文及頁面等。"
 lockedAccountInfo: "即使你通過了追隨者請求，除非你將貼文的可見性設定為 「追隨者」，否則任何人都能看見你的貼文。"
-loadRawImages: "以原始圖像質量顯示附件圖像的縮略圖"
+loadRawImages: "以原始圖檔顯示附件圖檔的縮圖"
-disableShowingAnimatedImages: "不播放動態圖像"
+disableShowingAnimatedImages: "不播放動態圖檔"
 notSet: "未設定"
 emailVerified: "已成功驗證您的電郵"
 noteFavoritesCount: "我的最愛貼文的數目"
-pageLikesCount: "頁面被喜歡次數"
+pageLikesCount: "頁面被按讚次數"
-pageLikedCount: "頁面被喜歡次數"
+pageLikedCount: "頁面被按讚次數"
 contact: "聯絡人"
-useSystemFont: "使用系統默認的字型"
+useSystemFont: "使用系統預設的字型"
 clips: "摘錄"
-experimentalFeatures: "測試中的功能"
+experimentalFeatures: "實驗中的功能"
 developer: "開發者"
-makeExplorable: "讓自己的帳戶能夠在“探索”版面顯示"
+makeExplorable: "使自己的帳戶能夠在“探索”頁面中顯示"
-makeExplorableDescription: "如果關閉，帳戶將不會被顯示在\"探索\"版面中。"
+makeExplorableDescription: "如果關閉，帳戶將不會被顯示在\"探索\"頁面中。"
 showGapBetweenNotesInTimeline: "分開顯示時間線上的貼文。"
 duplicate: "複製"
 left: "左"
-center: "向中央"
+center: "置中"
 wide: "寬"
 narrow: "窄"
 reloadToApplySetting: "設定將會在頁面重新載入之後生效。要現在就重載頁面嗎？"
@@ -660,25 +661,37 @@ clearCache: "清除快取資料"
 onlineUsersCount: "{n}人正在線上"
 nUsers: "{n}用戶"
 nNotes: "{n}貼文"
+sendErrorReports: "傳送錯誤報告"
+sendErrorReportsDescription: "啟用後，問題報告將傳送至開發者以提升軟體品質。問題報告可能包括OS版本，瀏覽器類型，行為歷史記錄等。"
 myTheme: "我的佈景主題"
 backgroundColor: "背景"
 accentColor: "重點色彩"
-textColor: "文本"
+textColor: "文字"
+saveAs: "另存為..."
 advanced: "進階"
-value: "數值 "
+value: "數值"
 updatedAt: "最後更新"
 saveConfirm: "您要儲存變更嗎？"
 deleteConfirm: "你確定要刪除嗎？"
 invalidValue: "輸入值無效。"
 registry: "登錄表"
 closeAccount: "停用帳戶"
-currentVersion: "當前版本"
+currentVersion: "目前版本"
 latestVersion: "最新版本"
+youAreRunningUpToDateClient: "您所使用的用戶端已經是最新的。"
 newVersionOfClientAvailable: "新版本的用戶端可用。"
 usageAmount: "使用量"
 capacity: "容量"
 inUse: "已使用"
+editCode: "編輯代碼"
+apply: "套用"
+emailNotification: "郵件通知"
+inChannelSearch: "頻道内搜尋"
+typingUsers: "{users}輸入中..."
+jumpToSpecifiedDate: "跳轉到特定日期"
 clear: "清除"
+goBack: "返回"
+info: "資訊"
 _email:
   _follow:
     title: "您有新的追隨者"
@@ -691,13 +704,13 @@ _registry:
   domain: "域"
   createKey: "新增機碼"
 _aboutMisskey:
-  about: "Misskey是由syuilo於2014年開發的開源軟件。"
+  about: "Misskey是由syuilo自2014年起開發的開源軟體。"
   contributors: "主要貢獻者"
   allContributors: "全體貢獻人員"
   source: "原始碼"
   translation: "翻譯Misskey"
-  donate: "捐贈給Misskey"
+  donate: "贊助Misskey"
-  morePatrons: "感謝你們的支持、 幫助。 🥰"
+  morePatrons: "還有許許多多幫助我們的其他人，非常感謝你們。 🥰"
   patrons: "贊助者"
 _nsfw:
   respect: "隱藏敏感內容"
@@ -706,7 +719,7 @@ _nsfw:
 _mfm:
   cheatSheet: "MFM代碼小抄"
   intro: "MFM是Misskey專用的標記語言，可以在Misskey中的各個位置使用。 您可以這裏看到MFM可用語法列表。"
-  dummy: "通過Misskey擴展Fediverse的世界"
+  dummy: "Misskey拓展了Fediverse的世界"
   mention: "提及"
   mentionDescription: "透過 @+用戶名 來標示特定使用者。"
   hashtag: "#tag"
@@ -741,7 +754,7 @@ _mfm:
   x4Description: "將顯示內容放至最大。"
   blur: "模糊"
   font: "字型"
-  fontDescription: "可設置顯示內容所使用的字型"
+  fontDescription: "您可以設定顯示內容的字型"
 _reversi:
   reversi: "黑白棋"
   gameSettings: "對弈設定"
@@ -762,7 +775,7 @@ _reversi:
   pastTurnOf: "{name}的回合"
   surrender: "認輸"
   surrendered: "對手認輸"
-  drawn: "平局"
+  drawn: "平手"
   won: "{name}獲勝"
   black: "黑"
   white: "白"
@@ -772,6 +785,7 @@ _reversi:
   allGames: "所有對弈"
   ended: "已結束"
   playing: "正在對弈"
+  loopedMap: "循環棋盤"
 _instanceTicker:
   none: "隱藏"
   remote: "向遠端使用者顯示"
@@ -785,14 +799,14 @@ _channel:
   edit: "編輯頻道"
   setBanner: "設定橫幅"
   removeBanner: "移除封面圖"
-  featured: "發燒內容"
+  featured: "熱門貼文"
   owned: "管理中"
   following: "關注中"
   usersCount: "有{n}人參與"
-  notesCount: "有{n}個帖子"
+  notesCount: "有{n}個貼文"
 _sidebar:
   full: "全部"
-  icon: "頭像"
+  icon: "大頭貼"
   hide: "隱藏"
 _wordMute:
   muteWords: "加入靜音文字"
@@ -803,6 +817,7 @@ _theme:
   install: "安裝佈景主題"
   manage: "佈景主題管理員"
   code: "主題代碼"
+  description: "描述"
   installed: "{name}已安裝"
   installedThemes: "已經安裝的主題"
   builtinThemes: "標準主題"
@@ -822,16 +837,17 @@ _theme:
   keys:
     bg: "背景"
     fg: "文本"
+    panel: "面板"
     shadow: "陰影"
     navIndicator: "側邊欄指示符"
     link: "鏈接"
     hashtag: "#tag"
-    mention: "提及"
+    mention: "提到"
-    mentionMe: "提及我"
+    mentionMe: "提到了我"
     renote: "轉發貼文"
     divider: "分割線"
-    scrollbarHandle: "滾動條"
+    scrollbarHandle: "捲動條"
-    scrollbarHandleHover: "滾動條 (漂浮)"
+    scrollbarHandleHover: "捲動條 (漂浮)"
     dateLabelFg: "日期標籤文字"
     infoBg: "資訊背景"
     infoFg: "資訊內容"
@@ -846,7 +862,7 @@ _theme:
     listItemHoverBg: "列表物品背景 (漂浮)"
     driveFolderBg: "雲端硬碟文件夾背景"
     badge: "獎章"
-    messageBg: "私信背景"
+    messageBg: "私訊背景"
     accentDarken: "強調色(偏暗)"
     accentLighten: "強調色(明亮)"
     fgHighlighted: "高亮顯示文本"
@@ -880,15 +896,15 @@ _tutorial:
   step1_3: "由於你沒有發佈任何貼文，也沒有追隨任何人，所以你的時間軸目前是空的。"
   step2_1: "在發文或追隨其他人之前先讓我們設定一下個人資料吧。"
   step2_2: "提供一些關於自己的資訊來讓其他人更有追隨你的意願。"
-  step3_1: "個人資料都打理好了嗎？"
+  step3_1: "個人資料都設定好了嗎？"
-  step3_2: "下一步讓我們來試試看發個文，按一下畫面上的鉛筆圖示來開始"
+  step3_2: "接下來，讓我們來試試看發個文，按一下畫面上的鉛筆圖示來開始"
   step3_3: "輸入完內容後，按視窗右上角的按鈕來發文"
   step3_4: "不知道該寫什麼內容嗎？試試看「開始使用Misskey了」如何。"
   step4_1: "貼文發出去了嗎？"
   step4_2: "如果你的貼文出現在時間軸上，就代表發文成功。"
   step5_1: "現在試試看追隨其他人來讓你的時間軸變得更生動吧。"
   step5_2: "你會在{featured}上看到受歡迎的貼文，你也可以從列表中追隨你喜歡的人，或者在{explore}上找到熱門使用者。"
-  step5_3: "想要追隨其他人，只要點擊他們的頭像並按「追隨」即可。"
+  step5_3: "想要追隨其他人，只要點擊他們的大頭貼並按「追隨」即可。"
   step5_4: "如果使用者的名字旁有鎖頭的圖示，代表他們需要手動核准你的追隨請求。"
   step6_1: "現在你可以在時間軸上看到其他用戶的貼文。"
   step6_2: "你也可以對別人的貼文作出「情感」，作出簡單的回覆。"
@@ -899,13 +915,13 @@ _2fa:
   alreadyRegistered: "此設備已經被註冊過了"
   registerDevice: "註冊裝置"
   step1: "首先，在您的設備上安裝二步驗證程式，例如{a}或{b}。"
-  step2: "然後，掃描熒幕上的QR code。"
+  step2: "然後，掃描螢幕上的QR code。"
 _permissions:
   "read:account": "查看帳戶信息"
   "write:account": "更改帳戶信息"
   "read:blocks": "已封鎖用戶名單"
   "write:blocks": "編輯已封鎖用戶名單"
-  "read:drive": "存取雲端硬碟\n"
+  "read:drive": "存取雲端硬碟"
   "write:drive": "編輯雲端硬碟的檔案"
   "read:favorites": "瀏覽我的最愛"
   "write:favorites": "編輯我的最愛列表"
@@ -922,7 +938,7 @@ _permissions:
   "write:votes": "投票"
   "read:pages": "顯示頁面"
   "write:pages": "編輯頁面"
-  "read:page-likes": "顯示頁面的已喜歡"
+  "read:page-likes": "顯示已按讚的頁面"
   "write:page-likes": "編輯頁面上喜歡"
   "read:user-groups": "顯示使用者群組"
   "write:user-groups": "編輯使用者群組"
@@ -964,7 +980,7 @@ _widgets:
   postForm: "發佈窗口"
   slideshow: "幻燈片"
   button: "按鈕"
-  onlineUsers: "在線上的用戶"
+  onlineUsers: "線上的用戶"
   jobQueue: "佇列"
 _cw:
   hide: "隱藏"

migration/1618637372000-user-last-active-date.ts

@@ -0,0 +1,16 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class userLastActiveDate1618637372000 implements MigrationInterface {
+    name = 'userLastActiveDate1618637372000'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "user" ADD "lastActiveDate" TIMESTAMP WITH TIME ZONE DEFAULT NULL`);
+        await queryRunner.query(`CREATE INDEX "IDX_seoignmeoprigmkpodgrjmkpormg" ON "user" ("lastActiveDate") `);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`DROP INDEX "IDX_seoignmeoprigmkpodgrjmkpormg"`);
+        await queryRunner.query(`ALTER TABLE "user" DROP COLUMN "lastActiveDate"`);
+    }
+
+}

migration/1618639857000-user-hide-online-status.ts

@@ -0,0 +1,14 @@
+import {MigrationInterface, QueryRunner} from "typeorm";
+
+export class userHideOnlineStatus1618639857000 implements MigrationInterface {
+    name = 'userHideOnlineStatus1618639857000'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+			await queryRunner.query(`ALTER TABLE "user" ADD "hideOnlineStatus" boolean NOT NULL DEFAULT false`);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`ALTER TABLE "user" DROP COLUMN "hideOnlineStatus"`);
+    }
+
+}

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "misskey",
 	"author": "syuilo <syuilotan@yahoo.co.jp>",
-	"version": "12.76.0",
+	"version": "12.78.0",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",
@@ -37,19 +37,14 @@
 		"lodash": "^4.17.20"
 	},
 	"dependencies": {
-		"@babel/plugin-transform-runtime": "7.13.10",
+		"@babel/plugin-transform-runtime": "7.13.15",
 		"@elastic/elasticsearch": "7.11.0",
-		"@fortawesome/fontawesome-svg-core": "1.2.35",
-		"@fortawesome/free-brands-svg-icons": "5.15.3",
-		"@fortawesome/free-regular-svg-icons": "5.15.3",
-		"@fortawesome/free-solid-svg-icons": "5.15.3",
-		"@fortawesome/vue-fontawesome": "3.0.0-3",
 		"@koa/cors": "3.1.0",
 		"@koa/multer": "3.0.0",
 		"@koa/router": "9.0.1",
 		"@sentry/browser": "5.29.2",
 		"@sentry/tracing": "5.29.2",
-		"@sinonjs/fake-timers": "7.0.2",
+		"@sinonjs/fake-timers": "7.0.5",
 		"@syuilo/aiscript": "0.11.1",
 		"@types/bcryptjs": "2.4.2",
 		"@types/bull": "3.15.0",
@@ -62,7 +57,7 @@
 		"@types/gulp-replace": "0.0.31",
 		"@types/is-url": "1.2.28",
 		"@types/js-yaml": "4.0.0",
-		"@types/jsdom": "16.2.7",
+		"@types/jsdom": "16.2.10",
 		"@types/jsonld": "1.5.5",
 		"@types/katex": "0.11.0",
 		"@types/koa": "2.13.1",
@@ -77,10 +72,10 @@
 		"@types/koa__multer": "2.0.2",
 		"@types/koa__router": "8.0.4",
 		"@types/markdown-it": "12.0.1",
-		"@types/matter-js": "0.14.10",
+		"@types/matter-js": "0.14.11",
-		"@types/mocha": "8.2.1",
+		"@types/mocha": "8.2.2",
-		"@types/node": "14.14.35",
+		"@types/node": "14.14.41",
-		"@types/node-fetch": "2.5.8",
+		"@types/node-fetch": "2.5.10",
 		"@types/nodemailer": "6.4.1",
 		"@types/nprogress": "0.2.0",
 		"@types/oauth": "0.9.1",
@@ -97,7 +92,7 @@
 		"@types/request-stats": "3.0.0",
 		"@types/rimraf": "3.0.0",
 		"@types/seedrandom": "2.4.28",
-		"@types/sharp": "0.27.1",
+		"@types/sharp": "0.28.0",
 		"@types/sinonjs__fake-timers": "6.0.2",
 		"@types/speakeasy": "2.0.5",
 		"@types/throttle-debounce": "2.1.0",
@@ -105,42 +100,41 @@
 		"@types/tmp": "0.2.0",
 		"@types/uuid": "8.3.0",
 		"@types/web-push": "3.3.0",
-		"@types/webpack": "4.41.26",
+		"@types/webpack": "5.28.0",
-		"@types/webpack-stream": "3.2.11",
+		"@types/webpack-stream": "3.2.12",
 		"@types/websocket": "1.0.2",
-		"@types/ws": "7.4.0",
+		"@types/ws": "7.4.1",
-		"@typescript-eslint/parser": "4.18.0",
+		"@typescript-eslint/parser": "4.22.0",
-		"@vue/compiler-sfc": "3.0.8",
+		"@vue/compiler-sfc": "3.0.11",
 		"abort-controller": "3.0.0",
 		"apexcharts": "3.26.0",
 		"autobind-decorator": "2.4.0",
 		"autosize": "4.0.2",
 		"autwh": "0.1.0",
-		"aws-sdk": "2.867.0",
+		"aws-sdk": "2.887.0",
 		"bcryptjs": "2.4.3",
 		"blurhash": "1.1.3",
 		"broadcast-channel": "3.5.3",
-		"bull": "3.21.1",
+		"bull": "3.22.0",
 		"cafy": "15.2.1",
-		"cbor": "7.0.4",
+		"cbor": "7.0.5",
 		"chalk": "4.1.0",
 		"chart.js": "2.9.4",
-		"cli-highlight": "2.1.10",
+		"cli-highlight": "2.1.11",
-		"commander": "4.1.1",
+		"commander": "7.2.0",
-		"concurrently": "6.0.0",
+		"concurrently": "6.0.2",
 		"content-disposition": "0.5.3",
-		"core-js": "3.9.1",
+		"core-js": "3.10.1",
 		"crc-32": "1.2.0",
-		"css-loader": "5.1.3",
+		"css-loader": "5.2.1",
-		"cssnano": "4.1.10",
+		"cssnano": "5.0.1",
 		"dateformat": "4.5.1",
 		"diskusage": "1.1.3",
 		"escape-regexp": "0.0.1",
-		"eslint": "7.22.0",
+		"eslint": "7.24.0",
-		"eslint-plugin-vue": "7.7.0",
+		"eslint-plugin-vue": "7.9.0",
 		"eventemitter3": "4.0.7",
 		"feed": "4.2.2",
-		"fibers": "5.0.0",
 		"file-type": "16.3.0",
 		"fluent-ffmpeg": "2.1.2",
 		"glob": "7.1.6",
@@ -156,17 +150,17 @@
 		"http-proxy-agent": "4.0.1",
 		"http-signature": "1.3.5",
 		"https-proxy-agent": "5.0.0",
-		"idb-keyval": "5.0.4",
+		"idb-keyval": "5.0.5",
 		"insert-text-at-cursor": "0.3.0",
 		"is-root": "2.1.0",
 		"is-svg": "4.3.1",
-		"js-yaml": "4.0.0",
+		"js-yaml": "4.1.0",
-		"jsdom": "16.5.1",
+		"jsdom": "16.5.3",
 		"json5": "2.2.0",
 		"json5-loader": "4.0.1",
 		"jsonld": "4.0.1",
 		"jsrsasign": "8.0.20",
-		"katex": "0.13.0",
+		"katex": "0.13.2",
 		"koa": "2.13.1",
 		"koa-bodyparser": "4.3.0",
 		"koa-favicon": "2.1.0",
@@ -178,10 +172,10 @@
 		"koa-views": "7.0.1",
 		"langmap": "0.0.16",
 		"lookup-dns-cache": "2.1.0",
-		"markdown-it": "12.0.4",
+		"markdown-it": "12.0.5",
 		"markdown-it-anchor": "7.1.0",
-		"matter-js": "0.16.1",
+		"matter-js": "0.17.1",
-		"mfm-js": "0.14.0",
+		"mfm-js": "0.16.2",
 		"mocha": "8.3.2",
 		"moji": "0.5.1",
 		"ms": "2.1.3",
@@ -192,23 +186,23 @@
 		"object-assign-deep": "0.4.0",
 		"os-utils": "0.0.14",
 		"parse5": "6.0.1",
-		"pg": "8.5.1",
+		"pg": "8.6.0",
 		"portscanner": "2.2.0",
-		"postcss": "8.2.8",
+		"postcss": "8.2.10",
 		"postcss-loader": "5.2.0",
 		"prismjs": "1.23.0",
-		"probe-image-size": "7.0.1",
+		"probe-image-size": "7.1.0",
 		"promise-limit": "2.7.0",
 		"promise-sequential": "1.1.1",
 		"pug": "3.0.2",
 		"punycode": "2.1.1",
-		"pureimage": "0.2.7",
+		"pureimage": "0.3.2",
 		"qrcode": "1.4.4",
 		"random-seed": "0.3.0",
 		"ratelimiter": "3.4.1",
 		"re2": "1.15.9",
 		"reconnecting-websocket": "4.4.0",
-		"redis": "3.0.2",
+		"redis": "3.1.1",
 		"redis-lock": "0.1.4",
 		"reflect-metadata": "0.1.13",
 		"regenerator-runtime": "0.13.7",
@@ -221,32 +215,32 @@
 		"sass": "1.32.8",
 		"sass-loader": "11.0.1",
 		"seedrandom": "3.0.5",
-		"sharp": "0.27.2",
+		"sharp": "0.28.1",
 		"speakeasy": "2.0.0",
 		"stringz": "2.1.0",
 		"style-loader": "2.0.0",
 		"summaly": "2.4.0",
 		"syslog-pro": "1.0.0",
-		"systeminformation": "5.6.7",
+		"systeminformation": "5.6.12",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
 		"three": "0.117.1",
 		"throttle-debounce": "3.0.1",
 		"tinycolor2": "1.4.2",
 		"tmp": "0.2.1",
-		"ts-loader": "8.0.18",
+		"ts-loader": "8.1.0",
 		"ts-node": "9.1.1",
-		"tsc-alias": "1.2.8",
+		"tsc-alias": "1.2.9",
 		"tsconfig-paths": "3.9.0",
 		"tslint": "6.1.3",
 		"tslint-sonarts": "1.9.0",
-		"typeorm": "0.2.31",
+		"typeorm": "0.2.32",
-		"typescript": "4.2.3",
+		"typescript": "4.2.4",
 		"ulid": "2.3.0",
 		"uuid": "8.3.2",
 		"v-debounce": "0.1.2",
 		"vanilla-tilt": "1.7.0",
-		"vue": "3.0.8",
+		"vue": "3.0.11",
 		"vue-color": "2.8.1",
 		"vue-json-pretty": "1.7.1",
 		"vue-loader": "16.1.2",
@@ -256,9 +250,9 @@
 		"vue-svg-loader": "0.17.0-beta.2",
 		"vuedraggable": "4.0.1",
 		"web-push": "3.4.4",
-		"webpack": "5.27.2",
+		"webpack": "5.33.2",
-		"webpack-cli": "4.5.0",
+		"webpack-cli": "4.6.0",
-		"websocket": "1.0.33",
+		"websocket": "1.0.34",
 		"ws": "7.4.4",
 		"xev": "2.0.1"
 	},

src/argv.ts

@@ -1,6 +1,8 @@
-import * as program from 'commander';
+import { Command } from 'commander';
 import config from '@/config';
 
+const program = new Command();
+
 program
 	.version(config.version)
 	.option('--no-daemons', 'Disable daemon processes (for debbuging)')

src/client/components/abuse-report-window.vue

@@ -1,7 +1,7 @@
 <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;"/>
+		<i class="fas fa-exclamation-circle" style="margin-right: 0.5em;"></i>
 		<I18n :src="$ts.reportAbuseOf" tag="span">
 			<template #name>
 				<b><MkAcct :user="user"/></b>
@@ -24,7 +24,6 @@
 
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
-import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import XWindow from '@client/components/ui/window.vue';
 import MkTextarea from '@client/components/ui/textarea.vue';
 import MkButton from '@client/components/ui/button.vue';
@@ -53,7 +52,6 @@ export default defineComponent({
 	data() {
 		return {
 			comment: this.initialComment || '',
-			faExclamationCircle,
 		};
 	},
 

src/client/components/avatars.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 	<div v-for="user in us" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
-		<MkAvatar :user="user" style="width:32px;height:32px;"/>
+		<MkAvatar :user="user" style="width:32px;height:32px;" :show-indicator="true"/>
 	</div>
 </div>
 </template>

src/client/components/captcha.vue

@@ -18,7 +18,7 @@ type Captcha = {
 	getResponse(id: string): string;
 };
 
-type CaptchaProvider = 'hcaptcha' | 'grecaptcha';
+type CaptchaProvider = 'hcaptcha' | 'recaptcha';
 
 type CaptchaContainer = {
 	readonly [_ in CaptchaProvider]?: Captcha;
@@ -57,7 +57,7 @@ export default defineComponent({
 		src() {
 			const endpoint = ({
 				hcaptcha: 'https://hcaptcha.com/1',
-				grecaptcha: 'https://www.recaptcha.net/recaptcha',
+				recaptcha: 'https://www.recaptcha.net/recaptcha',
 			} as Record<PropertyKey, unknown>)[this.provider];
 
 			return `${typeof endpoint == 'string' ? endpoint : 'about:invalid'}/api.js?render=explicit`;

src/client/components/channel-follow-button.vue

@@ -6,21 +6,20 @@
 >
 	<template v-if="!wait">
 		<template v-if="isFollowing">
-			<span v-if="full">{{ $ts.unfollow }}</span><Fa :icon="faMinus"/>
+			<span v-if="full">{{ $ts.unfollow }}</span><i class="fas fa-minus"></i>
 		</template>
 		<template v-else>
-			<span v-if="full">{{ $ts.follow }}</span><Fa :icon="faPlus"/>
+			<span v-if="full">{{ $ts.follow }}</span><i class="fas fa-plus"></i>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ $ts.processing }}</span><Fa :icon="faSpinner" pulse fixed-width/>
+		<span v-if="full">{{ $ts.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
 	</template>
 </button>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSpinner, faPlus, faMinus, } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -40,7 +39,6 @@ export default defineComponent({
 		return {
 			isFollowing: this.channel.isFollowing,
 			wait: false,
-			faSpinner, faPlus, faMinus,
 		};
 	},
 

src/client/components/channel-preview.vue

@@ -2,10 +2,10 @@
 <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"><i class="fas fa-satellite-dish"></i> {{ channel.name }}</div>
 		<div class="status">
 			<div>
-				<Fa :icon="faUsers" fixed-width/>
+				<i class="fas fa-users fa-fw"></i>
 				<I18n :src="$ts._channel.usersCount" tag="span" style="margin-left: 4px;">
 					<template #n>
 						<b>{{ channel.usersCount }}</b>
@@ -13,7 +13,7 @@
 				</I18n>
 			</div>
 			<div>
-				<Fa :icon="faPencilAlt" fixed-width/>
+				<i class="fas fa-pencil-alt fa-fw"></i>
 				<I18n :src="$ts._channel.notesCount" tag="span" style="margin-left: 4px;">
 					<template #n>
 						<b>{{ channel.notesCount }}</b>
@@ -35,7 +35,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSatelliteDish, faUsers, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -57,7 +56,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faSatelliteDish, faUsers, faPencilAlt,
 		};
 	},
 });

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

@@ -1,7 +1,5 @@
 <script lang="ts">
 import { defineComponent, h, TransitionGroup } from 'vue';
-import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default defineComponent({
 	props: {
@@ -18,17 +16,20 @@ export default defineComponent({
 			type: Boolean,
 			required: false,
 			default: false
-		}
+		},
+		noGap: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
 
 	methods: {
 		focus() {
 			this.$slots.default[0].elm.focus();
-		}
+		},
-	},
 
-	render() {
+		getDateText(time: string) {
-		const getDateText = (time: string) => {
 			const date = new Date(time).getDate();
 			const month = new Date(time).getMonth() + 1;
 			return this.$t('monthAndDay', {
@@ -36,17 +37,19 @@ export default defineComponent({
 				day: date.toString()
 			});
 		}
+	},
 
-		const noGap = [...document.querySelectorAll('._noGap_')].some(el => el.contains(this.$parent.$el));
+	render() {
+		if (this.items.length === 0) return;
 
 		return h(this.$store.state.animation ? TransitionGroup : 'div', this.$store.state.animation ? {
-			class: 'sqadhkmv' + (noGap ? ' _block' : ''),
+			class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
 			name: 'list',
 			tag: 'div',
 			'data-direction': this.direction,
 			'data-reversed': this.reversed ? 'true' : 'false',
 		} : {
-			class: 'sqadhkmv',
+			class: 'sqadhkmv' + (this.noGap ? ' noGap _block' : ''),
 		}, this.items.map((item, i) => {
 			const el = this.$slots.default({
 				item: item
@@ -68,17 +71,15 @@ export default defineComponent({
 					class: 'date'
 				}, [
 					h('span', [
-						h(FontAwesomeIcon, {
+						h('i', {
-							class: 'icon',
+							class: 'fas fa-angle-up icon',
-							icon: faAngleUp,
 						}),
-						getDateText(item.createdAt)
+						this.getDateText(item.createdAt)
 					]),
 					h('span', [
-						getDateText(this.items[i + 1].createdAt),
+						this.getDateText(this.items[i + 1].createdAt),
-						h(FontAwesomeIcon, {
+						h('i', {
-							class: 'icon',
+							class: 'fas fa-angle-down icon',
-							icon: faAngleDown,
 						})
 					])
 				]));
@@ -152,26 +153,18 @@ export default defineComponent({
 			}
 		}
 	}
-}
 
-._noGap_ .sqadhkmv {
+	&.noGap {
-	> * {
+		> * {
-		margin: 0 !important;
+			margin: 0 !important;
-		border: none;
+			border: none;
-		border-radius: 0;
+			border-radius: 0;
-		box-shadow: none;
+			box-shadow: none;
 
-		&:not(:last-child) {
+			&:not(:last-child) {
-			border-bottom: solid 0.5px var(--divider);
+				border-bottom: solid 0.5px var(--divider);
+			}
 		}
 	}
 }
-
-._inContainer_ .sqadhkmv > * {
-	margin: 0 !important;
-	border: none;
-	border-bottom: solid 0.5px var(--divider);
-	border-radius: 0;
-	box-shadow: none;
-}
 </style>

src/client/components/dialog.vue

@@ -2,15 +2,15 @@
 <MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
 	<div class="mk-dialog">
 		<div class="icon" v-if="icon">
-			<Fa :icon="icon"/>
+			<i :class="icon"></i>
 		</div>
 		<div class="icon" v-else-if="!input && !select" :class="type">
-			<Fa :icon="faCheck" v-if="type === 'success'"/>
+			<i v-if="type === 'success'" class="fas fa-check"></i>
-			<Fa :icon="faTimesCircle" v-if="type === 'error'"/>
+			<i v-else-if="type === 'error'" class="fas fa-times-circle"></i>
-			<Fa :icon="faExclamationTriangle" v-if="type === 'warning'"/>
+			<i v-else-if="type === 'warning'" class="fas fa-exclamation-triangle"></i>
-			<Fa :icon="faInfoCircle" v-if="type === 'info'"/>
+			<i v-else-if="type === 'info'" class="fas fa-info-circle"></i>
-			<Fa :icon="faQuestionCircle" v-if="type === 'question'"/>
+			<i v-else-if="type === 'question'" class="fas fa-question-circle"></i>
-			<Fa :icon="faSpinner" pulse v-if="type === 'waiting'"/>
+			<i v-else-if="type === 'waiting'" class="fas fa-spinner fa-pulse"></i>
 		</div>
 		<header v-if="title"><Mfm :text="title"/></header>
 		<div class="body" v-if="text"><Mfm :text="text"/></div>
@@ -38,8 +38,6 @@
 
 <script lang="ts">
 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 MkModal from '@client/components/ui/modal.vue';
 import MkButton from '@client/components/ui/button.vue';
 import MkInput from '@client/components/ui/input.vue';
@@ -99,7 +97,6 @@ export default defineComponent({
 		return {
 			inputValue: this.input && this.input.default ? this.input.default : 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,
-			faTimesCircle, faQuestionCircle, faSpinner, faInfoCircle, faExclamationTriangle, faCheck
 		};
 	},
 

src/client/components/drive-file-thumbnail.vue

@@ -1,32 +1,22 @@
 <template>
 <div class="zdjebgpv" ref="thumbnail">
 	<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'"/>
+	<i v-else-if="is === 'image'" class="fas fa-file-image icon"></i>
-	<Fa :icon="faFileVideo" class="icon" v-else-if="is === 'video'"/>
+	<i v-else-if="is === 'video'" class="fas fa-file-video icon"></i>
-	<Fa :icon="faMusic" class="icon" v-else-if="is === 'audio' || is === 'midi'"/>
+	<i v-else-if="is === 'audio' || is === 'midi'" class="fas fa-music icon"></i>
-	<Fa :icon="faFileCsv" class="icon" v-else-if="is === 'csv'"/>
+	<i v-else-if="is === 'csv'" class="fas fa-file-csv icon"></i>
-	<Fa :icon="faFilePdf" class="icon" v-else-if="is === 'pdf'"/>
+	<i v-else-if="is === 'pdf'" class="fas fa-file-pdf icon"></i>
-	<Fa :icon="faFileAlt" class="icon" v-else-if="is === 'textfile'"/>
+	<i v-else-if="is === 'textfile'" class="fas fa-file-alt icon"></i>
-	<Fa :icon="faFileArchive" class="icon" v-else-if="is === 'archive'"/>
+	<i v-else-if="is === 'archive'" class="fas fa-file-archive icon"></i>
-	<Fa :icon="faFile" class="icon" v-else/>
+	<i v-else class="fas fa-file icon"></i>
-	<Fa :icon="faFilm" class="icon-sub" v-if="isThumbnailAvailable && is === 'video'"/>
+
+	<i v-if="isThumbnailAvailable && is === 'video'" class="fas fa-film icon-sub"></i>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import {
+import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';
-	faFile,
-	faFileAlt,
-	faFileImage,
-	faMusic,
-	faFileVideo,
-	faFileCsv,
-	faFilePdf,
-	faFileArchive,
-	faFilm
-	} from '@fortawesome/free-solid-svg-icons';
-import ImgWithBlurhash from './img-with-blurhash.vue';
 import { ColdDeviceStorage } from '@client/store';
 
 export default defineComponent({
@@ -49,15 +39,6 @@ export default defineComponent({
 			isContextmenuShowing: false,
 			isDragging: false,
 
-			faFile,
-			faFileAlt,
-			faFileImage,
-			faMusic,
-			faFileVideo,
-			faFileCsv,
-			faFilePdf,
-			faFileArchive,
-			faFilm
 		};
 	},
 	computed: {

src/client/components/drive.file.vue

@@ -32,8 +32,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
 import bytes from '@client/filters/bytes';
@@ -87,22 +85,22 @@ export default defineComponent({
 				action: this.rename
 			}, {
 				text: this.file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
-				icon: this.file.isSensitive ? faEye : faEyeSlash,
+				icon: this.file.isSensitive ? 'fas fa-eye' : 'fas fa-eye-slash',
 				action: this.toggleSensitive
 			}, null, {
 				text: this.$ts.copyUrl,
-				icon: faLink,
+				icon: 'fas fa-link',
 				action: this.copyUrl
 			}, {
 				type: 'a',
 				href: this.file.url,
 				target: '_blank',
 				text: this.$ts.download,
-				icon: faDownload,
+				icon: 'fas fa-download',
 				download: this.file.name
 			}, null, {
 				text: this.$ts.delete,
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				danger: true,
 				action: this.deleteFile
 			}];

src/client/components/drive.folder.vue

@@ -15,8 +15,8 @@
 	:title="title"
 >
 	<p class="name">
-		<template v-if="hover"><Fa :icon="faFolderOpen" fixed-width/></template>
+		<template v-if="hover"><i class="fas fa-folder-open fa-fw"></i></template>
-		<template v-if="!hover"><Fa :icon="faFolder" fixed-width/></template>
+		<template v-if="!hover"><i class="fas fa-folder fa-fw"></i></template>
 		{{ folder.name }}
 	</p>
 	<p class="upload" v-if="$store.state.uploadFolder == folder.id">
@@ -28,9 +28,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faFolder, faFolderOpen, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
 import * as os from '@client/os';
-import { faICursor } from '@fortawesome/free-solid-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -57,7 +55,6 @@ export default defineComponent({
 			hover: false,
 			draghover: false,
 			isDragging: false,
-			faFolder, faFolderOpen
 		};
 	},
 
@@ -241,7 +238,7 @@ export default defineComponent({
 		onContextmenu(e) {
 			os.contextMenu([{
 				text: this.$ts.openInWindow,
-				icon: faWindowRestore,
+				icon: 'fas fa-window-restore',
 				action: () => {
 					os.popup(import('./drive-window.vue'), {
 						initialFolder: this.folder
@@ -254,7 +251,7 @@ export default defineComponent({
 				action: this.rename
 			}, null, {
 				text: this.$ts.delete,
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				danger: true,
 				action: this.deleteFolder
 			}], e);
@@ -312,7 +309,7 @@ export default defineComponent({
 		font-size: 0.9em;
 		color: var(--desktopDriveFolderFg);
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 			margin-left: 2px;
 			text-align: left;

src/client/components/drive.nav-folder.vue

@@ -7,14 +7,13 @@
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
-	<i v-if="folder == null"><Fa :icon="faCloud"/></i>
+	<i v-if="folder == null" class="fas fa-cloud"></i>
 	<span>{{ folder == null ? $ts.drive : folder.name }}</span>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCloud } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -29,7 +28,6 @@ export default defineComponent({
 		return {
 			hover: false,
 			draghover: false,
-			faCloud
 		};
 	},
 

src/client/components/drive.vue

@@ -4,10 +4,10 @@
 		<div class="path" @contextmenu.prevent.stop="() => {}">
 			<XNavFolder :class="{ current: folder == null }"/>
 			<template v-for="f in hierarchyFolders">
-				<span class="separator"><Fa :icon="faAngleRight"/></span>
+				<span class="separator"><i class="fas fa-angle-right"></i></span>
 				<XNavFolder :folder="f"/>
 			</template>
-			<span class="separator" v-if="folder != null"><Fa :icon="faAngleRight"/></span>
+			<span class="separator" v-if="folder != null"><i class="fas fa-angle-right"></i></span>
 			<span class="folder current" v-if="folder != null">{{ folder.name }}</span>
 		</div>
 	</nav>
@@ -47,13 +47,11 @@
 
 <script lang="ts">
 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 MkButton from './ui/button.vue';
 import * as os from '@client/os';
-import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
 
 export default defineComponent({
 	components: {
@@ -125,7 +123,6 @@ export default defineComponent({
 			),
 			moreFilesElement: null as Element,
 
-			faAngleRight
 		};
 	},
 
@@ -606,11 +603,11 @@ export default defineComponent({
 				type: 'label'
 			}, {
 				text: this.$ts.upload,
-				icon: faUpload,
+				icon: 'fas fa-upload',
 				action: () => { this.selectLocalFile(); }
 			}, {
 				text: this.$ts.fromUrl,
-				icon: faLink,
+				icon: 'fas fa-link',
 				action: () => { this.urlUpload(); }
 			}, null, {
 				text: this.folder ? this.folder.name : this.$ts.drive,
@@ -621,11 +618,11 @@ export default defineComponent({
 				action: () => { this.renameFolder(this.folder); }
 			} : undefined, this.folder ? {
 				text: this.$ts.deleteFolder,
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				action: () => { this.deleteFolder(this.folder); }
 			} : undefined, {
 				text: this.$ts.createFolder,
-				icon: faFolderPlus,
+				icon: 'fas fa-folder-plus',
 				action: () => { this.createFolder(); }
 			}];
 		},
@@ -693,7 +690,7 @@ export default defineComponent({
 					opacity: 0.5;
 					cursor: default;
 
-					> [data-icon] {
+					> i {
 						margin: 0;
 					}
 				}

src/client/components/emoji-picker.section.vue

@@ -1,7 +1,7 @@
 <template>
 <section>
 	<header class="_acrylic" @click="shown = !shown">
-		<Fa :icon="shown ? faChevronDown : faChevronUp" :key="shown" fixed-width class="toggle"/> <slot></slot> ({{ emojis.length }})
+		<i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
 	</header>
 	<div v-if="shown">
 		<button v-for="emoji in emojis"
@@ -17,7 +17,6 @@
 
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
-import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 
 export default defineComponent({
@@ -36,7 +35,6 @@ export default defineComponent({
 		return {
 			getStaticImageUrl,
 			shown: this.initialShown,
-			faChevronUp, faChevronDown,
 		};
 	},
 

src/client/components/emoji-picker.vue

@@ -42,7 +42,7 @@
 			</section>
 
 			<section>
-				<header class="_acrylic"><Fa :icon="faClock" fixed-width/> {{ $ts.recentUsed }}</header>
+				<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ $ts.recentUsed }}</header>
 				<div>
 					<button v-for="emoji in $store.state.recentlyUsedEmojis"
 						class="_button"
@@ -64,10 +64,10 @@
 		</div>
 	</div>
 	<div class="tabs">
-		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><Fa :icon="faAsterisk" fixed-width/></button>
+		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="fas fa-asterisk fa-fw"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><Fa :icon="faLaugh" fixed-width/></button>
+		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="fas fa-laugh fa-fw"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><Fa :icon="faLeaf" fixed-width/></button>
+		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="fas fa-leaf fa-fw"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><Fa :icon="faHashtag" fixed-width/></button>
+		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="fas fa-hashtag fa-fw"></i></button>
 	</div>
 </div>
 </template>
@@ -76,8 +76,6 @@
 import { defineComponent, markRaw } from 'vue';
 import { emojilist } from '@/misc/emojilist';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
-import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faClock, faUser, faChevronDown, faShapes, faBicycle, faHashtag } from '@fortawesome/free-solid-svg-icons';
-import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import Particle from '@client/components/particle.vue';
 import * as os from '@client/os';
 import { isDeviceTouch } from '@client/scripts/is-device-touch';
@@ -117,7 +115,6 @@ export default defineComponent({
 			searchResultUnicode: [],
 			tab: 'index',
 			categories: ['face', 'people', 'animals_and_nature', 'food_and_drink', 'activity', 'travel_and_places', 'objects', 'symbols', 'flags'],
-			faGlobe, faClock, faChevronDown, faAsterisk, faLaugh, faUtensils, faLeaf, faShapes, faBicycle, faHashtag,
 		};
 	},
 

src/client/components/file-type-icon.vue

@@ -1,12 +1,11 @@
 <template>
 <span class="mk-file-type-icon">
-	<template v-if="kind == 'image'"><Fa :icon="faFileImage"/></template>
+	<template v-if="kind == 'image'"><i class="fas fa-file-image"></i></template>
 </span>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faFileImage } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -18,7 +17,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faFileImage
 		};
 	},
 	computed: {

src/client/components/follow-button.vue

@@ -6,30 +6,29 @@
 >
 	<template v-if="!wait">
 		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
-			<span v-if="full">{{ $ts.followRequestPending }}</span><Fa :icon="faHourglassHalf"/>
+			<span v-if="full">{{ $ts.followRequestPending }}</span><i class="fas fa-hourglass-half"></i>
 		</template>
 		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
-			<span v-if="full">{{ $ts.processing }}</span><Fa :icon="faSpinner" pulse/>
+			<span v-if="full">{{ $ts.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
 		</template>
 		<template v-else-if="isFollowing">
-			<span v-if="full">{{ $ts.unfollow }}</span><Fa :icon="faMinus"/>
+			<span v-if="full">{{ $ts.unfollow }}</span><i class="fas fa-minus"></i>
 		</template>
 		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ $ts.followRequest }}</span><Fa :icon="faPlus"/>
+			<span v-if="full">{{ $ts.followRequest }}</span><i class="fas fa-plus"></i>
 		</template>
 		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ $ts.follow }}</span><Fa :icon="faPlus"/>
+			<span v-if="full">{{ $ts.follow }}</span><i class="fas fa-plus"></i>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ $ts.processing }}</span><Fa :icon="faSpinner" pulse fixed-width/>
+		<span v-if="full">{{ $ts.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
 	</template>
 </button>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSpinner, faPlus, faMinus, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -56,7 +55,6 @@ export default defineComponent({
 			hasPendingFollowRequestFromYou: this.user.hasPendingFollowRequestFromYou,
 			wait: false,
 			connection: null,
-			faSpinner, faPlus, faMinus, faHourglassHalf
 		};
 	},
 

src/client/components/form/base.vue

@@ -24,9 +24,14 @@ export default defineComponent({
 	--formXPadding: 32px;
 	--formYPadding: 32px;
 
+	--formContentHMargin: 16px;
+
+	font-size: 95%;
 	line-height: 1.3em;
 	background: var(--bg);
 	padding: var(--formYPadding) var(--formXPadding);
+	max-width: 750px;
+	margin: 0 auto;
 
 	&:not(.wide).max-width_400px {
 		--formXPadding: 0px;
@@ -40,16 +45,16 @@ export default defineComponent({
 			}
 
 			._form_group {
-				> * {
+				> *:not(._formNoConcat) {
-					&:not(:first-child) {
+					&:not(:last-child):not(._formNoConcatPrev) {
 						&._formPanel, ._formPanel {
-							border-top: none;
+							border-bottom: solid 0.5px var(--divider);
 						}
 					}
 
-					&:not(:last-child) {
+					&:not(:first-child):not(._formNoConcatNext) {
 						&._formPanel, ._formPanel {
-							border-bottom: solid 0.5px var(--divider);
+							border-top: none;
 						}
 					}
 				}

src/client/components/form/form.scss

@@ -30,7 +30,7 @@
 	top: var(--stickyTop, 0px);
 	z-index: 2;
 	margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
-	padding: 8px calc(16px + var(--formXPadding)) 8px calc(16px + var(--formXPadding));
+	padding: 8px calc(var(--formContentHMargin) + var(--formXPadding)) 8px calc(var(--formContentHMargin) + var(--formXPadding));
 	background: var(--X17);
 	-webkit-backdrop-filter: blur(10px);
 	backdrop-filter: blur(10px);
@@ -42,7 +42,7 @@
 }
 
 ._formCaption {
-	padding: 8px 16px 0 16px;
+	padding: 8px var(--formContentHMargin) 0 var(--formContentHMargin);
 }
 
 ._formItem {

src/client/components/form/group.vue

@@ -1,7 +1,7 @@
 <template>
-<div class="vrtktovg _formItem" v-size="{ max: [500] }">
+<div class="vrtktovg _formItem _formNoConcat" v-size="{ max: [500] }" v-sticky-container>
 	<div class="_formLabel"><slot name="label"></slot></div>
-	<div class="main _form_group">
+	<div class="main _form_group" ref="child">
 		<slot></slot>
 	</div>
 	<div class="_formCaption"><slot name="caption"></slot></div>
@@ -9,33 +9,69 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 
 export default defineComponent({
+	setup(props, context) {
+		const child = ref<HTMLElement | null>(null);
+
+		const scanChild = () => {
+			if (child.value == null) return;
+			const els = Array.from(child.value.children);
+			for (let i = 0; i < els.length; i++) {
+				const el = els[i];
+				if (el.classList.contains('_formNoConcat')) {
+					if (els[i - 1]) els[i - 1].classList.add('_formNoConcatPrev');
+					if (els[i + 1]) els[i + 1].classList.add('_formNoConcatNext');
+				}
+			}
+		};
+
+		onMounted(() => {
+			scanChild();
+
+			const observer = new MutationObserver(records => {
+				scanChild();
+			});
+
+			observer.observe(child.value, {
+				childList: true,
+				subtree: false,
+				attributes: false,
+				characterData: false,
+			});
+		});
+
+		return {
+			child
+		};
+	}
 });
 </script>
 
 <style lang="scss" scoped>
 .vrtktovg {
 	> .main {
-		> ::v-deep(*) {
+		> ::v-deep(*):not(._formNoConcat) {
-			margin: 0;
+			&:not(._formNoConcatNext) {
-
+				margin: 0;
-			&:not(:first-child) {
-				&._formPanel, ._formPanel {
-					border-top: none;
-					border-top-left-radius: 0;
-					border-top-right-radius: 0;
-				}
 			}
 
-			&:not(:last-child) {
+			&:not(:last-child):not(._formNoConcatPrev) {
 				&._formPanel, ._formPanel {
 					border-bottom: solid 0.5px var(--divider);
 					border-bottom-left-radius: 0;
 					border-bottom-right-radius: 0;
 				}
 			}
+
+			&:not(:first-child):not(._formNoConcatNext) {
+				&._formPanel, ._formPanel {
+					border-top: none;
+					border-top-left-radius: 0;
+					border-top-right-radius: 0;
+				}
+			}
 		}
 	}
 }

src/client/components/form/info.vue

@@ -1,8 +1,8 @@
 <template>
 <div class="fzenkabp _formItem">
 	<div class="_formPanel" :class="{ warn }">
-		<i v-if="warn"><Fa :icon="faExclamationTriangle"/></i>
+		<i v-if="warn" class="fas fa-exclamation-triangle"></i>
-		<i v-else><Fa :icon="faInfoCircle"/></i>
+		<i v-else class="fas fa-info-circle"></i>
 		<slot></slot>
 	</div>
 </div>
@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faInfoCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -22,7 +21,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faInfoCircle, faExclamationTriangle
 		};
 	}
 });

src/client/components/form/input.vue

@@ -30,13 +30,12 @@
 	</div>
 	<template #caption><slot name="desc"></slot></template>
 
-	<FormButton v-if="manualSave && changed" @click="updated" primary><Fa :icon="faSave"/> {{ $ts.save }}</FormButton>
+	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 </FormGroup>
 </template>
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import { faExclamationCircle, faSave } from '@fortawesome/free-solid-svg-icons';
 import './form.scss';
 import FormButton from './button.vue';
 import FormGroup from './group.vue';
@@ -191,7 +190,6 @@ export default defineComponent({
 			onInput,
 			onKeydown,
 			updated,
-			faExclamationCircle, faSave,
 		};
 	},
 });

src/client/components/form/key-value-view.vue

@@ -20,11 +20,19 @@ export default defineComponent({
 .anocepby {
 	display: flex;
 	align-items: center;
-	padding: 14px 16px;
+	padding: 14px var(--formContentHMargin);
+
+	> .key {
+		margin-right: 12px;
+		white-space: nowrap;
+	}
 
 	> .value {
 		margin-left: auto;
 		opacity: 0.7;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
 	}
 }
 </style>

src/client/components/form/link.vue

@@ -5,7 +5,7 @@
 		<span class="text"><slot></slot></span>
 		<span class="right">
 			<span class="text"><slot name="suffix"></slot></span>
-			<Fa :icon="faExternalLinkAlt" class="icon"/>
+			<i class="fas fa-external-link-alt icon"></i>
 		</span>
 	</a>
 	<MkA class="main _button _formPanel _formClickable" :class="{ active }" :to="to" :behavior="behavior" v-else>
@@ -13,7 +13,7 @@
 		<span class="text"><slot></slot></span>
 		<span class="right">
 			<span class="text"><slot name="suffix"></slot></span>
-			<Fa :icon="faChevronRight" class="icon"/>
+			<i class="fas fa-chevron-right icon"></i>
 		</span>
 	</MkA>
 </div>
@@ -21,7 +21,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faChevronRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import './form.scss';
 
 export default defineComponent({
@@ -45,7 +44,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faChevronRight, faExternalLinkAlt
 		};
 	}
 });

src/client/components/form/object-view.vue

@@ -0,0 +1,102 @@
+<template>
+<FormGroup class="_formItem">
+	<template #label><slot></slot></template>
+	<div class="drooglns _formItem" :class="{ tall }">
+		<div class="input _formPanel">
+			<textarea class="_monospace"
+				v-model="v"
+				readonly
+				:spellcheck="false"
+			></textarea>
+		</div>
+	</div>
+	<template #caption><slot name="desc"></slot></template>
+</FormGroup>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, toRefs, watch } from 'vue';
+import * as JSON5 from 'json5';
+import './form.scss';
+import FormGroup from './group.vue';
+
+export default defineComponent({
+	components: {
+		FormGroup,
+	},
+	props: {
+		value: {
+			required: false
+		},
+		tall: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		pre: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		manualSave: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+	},
+	setup(props, context) {
+		const { value } = toRefs(props);
+		const v = ref('');
+
+		watch(() => value, newValue => {
+			v.value = JSON5.stringify(newValue.value, null, '\t');
+		}, {
+			immediate: true
+		});
+
+		return {
+			v,
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.drooglns {
+	position: relative;
+
+	> .input {
+		position: relative;
+	
+		> textarea {
+			display: block;
+			width: 100%;
+			min-width: 100%;
+			max-width: 100%;
+			min-height: 130px;
+			margin: 0;
+			padding: 16px var(--formContentHMargin);
+			box-sizing: border-box;
+			font: inherit;
+			font-weight: normal;
+			font-size: 1em;
+			background: transparent;
+			border: none;
+			border-radius: 0;
+			outline: none;
+			box-shadow: none;
+			color: var(--fg);
+			tab-size: 2;
+			white-space: pre;
+		}
+	}
+
+	&.tall {
+		> .input {
+			> textarea {
+				min-height: 200px;
+			}
+		}
+	}
+}
+</style>

src/client/components/form/radios.vue

@@ -18,6 +18,9 @@ export default defineComponent({
 		}
 	},
 	watch: {
+		modelValue() {
+			this.value = this.modelValue;
+		},
 		value() {
 			this.$emit('update:modelValue', this.value);
 		}

src/client/components/form/select.vue

@@ -14,7 +14,7 @@
 			<slot></slot>
 		</select>
 		<div class="suffix">
-			<Fa :icon="faChevronDown"/>
+			<i class="fas fa-chevron-down"></i>
 		</div>
 	</div>
 	<div class="_formCaption"><slot name="caption"></slot></div>
@@ -23,7 +23,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import './form.scss';
 
 export default defineComponent({
@@ -47,7 +46,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faChevronDown,
 		};
 	},
 	computed: {

src/client/components/form/suspense.vue

@@ -0,0 +1,101 @@
+<template>
+<transition name="fade" mode="out-in">
+	<div class="_formItem" v-if="pending">
+		<div class="_formPanel">
+			<MkLoading/>
+		</div>
+	</div>
+	<div v-else-if="resolved" class="_formItem">
+		<slot :result="result"></slot>
+	</div>
+	<div class="_formItem" v-else>
+		<div class="_formPanel eiurkvay">
+			<div><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</div>
+			<MkButton inline @click="retry" class="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
+		</div>
+	</div>
+</transition>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, watch } from 'vue';
+import './form.scss';
+import MkButton from '@client/components/ui/button.vue';
+
+export default defineComponent({
+	components: {
+		MkButton
+	},
+
+	props: {
+		p: {
+			type: Function as PropType<() => Promise<any>>,
+			required: true,
+		}
+	},
+
+	setup(props, context) {
+		const pending = ref(true);
+		const resolved = ref(false);
+		const rejected = ref(false);
+		const result = ref(null);
+
+		const process = () => {
+			if (props.p == null) {
+				return;
+			}
+			const promise = props.p();
+			pending.value = true;
+			resolved.value = false;
+			rejected.value = false;
+			promise.then((_result) => {
+				pending.value = false;
+				resolved.value = true;
+				result.value = _result;
+			});
+			promise.catch(() => {
+				pending.value = false;
+				rejected.value = true;
+			});
+		};
+
+		watch(() => props.p, () => {
+			process();
+		}, {
+			immediate: true
+		});
+
+		const retry = () => {
+			process();
+		};
+
+		return {
+			pending,
+			resolved,
+			rejected,
+			result,
+			retry,
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.eiurkvay {
+	padding: 16px;
+	text-align: center;
+
+	> .retry {
+		margin-top: 16px;
+	}
+}
+</style>

src/client/components/form/textarea.vue

@@ -18,13 +18,12 @@
 	</div>
 	<template #caption><slot name="desc"></slot></template>
 
-	<FormButton v-if="manualSave && changed" @click="updated" primary><Fa :icon="faSave"/> {{ $ts.save }}</FormButton>
+	<FormButton v-if="manualSave && changed" @click="updated" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 </FormGroup>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, toRefs, watch } from 'vue';
-import { faSave } from '@fortawesome/free-solid-svg-icons';
 import './form.scss';
 import FormButton from './button.vue';
 import FormGroup from './group.vue';
@@ -106,7 +105,6 @@ export default defineComponent({
 			changed,
 			focus,
 			onInput,
-			faSave,
 		};
 	}
 });

src/client/components/global/a.vue

@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExpandAlt, faColumns, faExternalLinkAlt, faLink, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { router } from '@client/router';
@@ -57,31 +56,31 @@ export default defineComponent({
 				type: 'label',
 				text: this.to,
 			}, {
-				icon: faWindowMaximize,
+				icon: 'fas fa-window-maximize',
 				text: this.$ts.openInWindow,
 				action: () => {
 					os.pageWindow(this.to);
 				}
 			}, this.sideViewHook ? {
-				icon: faColumns,
+				icon: 'fas fa-columns',
 				text: this.$ts.openInSideView,
 				action: () => {
 					this.sideViewHook(this.to);
 				}
 			} : undefined, {
-				icon: faExpandAlt,
+				icon: 'fas fa-expand-alt',
 				text: this.$ts.showInPage,
 				action: () => {
 					this.$router.push(this.to);
 				}
 			}, null, {
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				text: this.$ts.openInNewTab,
 				action: () => {
 					window.open(this.to, '_blank');
 				}
 			}, {
-				icon: faLink,
+				icon: 'fas fa-link',
 				text: this.$ts.copyLink,
 				action: () => {
 					copyToClipboard(`${url}${this.to}`);

src/client/components/global/avatar.vue

@@ -1,9 +1,11 @@
 <template>
 <span class="eiwwqkts _noSelect" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick">
 	<img class="inner" :src="url" decoding="async"/>
+	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </span>
 <MkA class="eiwwqkts _noSelect" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id">
 	<img class="inner" :src="url" decoding="async"/>
+	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </MkA>
 </template>
 
@@ -12,8 +14,12 @@ import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 import { extractAvgColorFromBlurhash } from '@client/scripts/extract-avg-color-from-blurhash';
 import { acct, userPage } from '@client/filters/user';
+import MkUserOnlineIndicator from '@client/components/user-online-indicator.vue';
 
 export default defineComponent({
+	components: {
+		MkUserOnlineIndicator
+	},
 	props: {
 		user: {
 			type: Object,
@@ -30,6 +36,10 @@ export default defineComponent({
 		disablePreview: {
 			required: false,
 			default: false
+		},
+		showIndicator: {
+			required: false,
+			default: false
 		}
 	},
 	emits: ['click'],
@@ -93,7 +103,7 @@ export default defineComponent({
 		}
 	}
 
-	.inner {
+	> .inner {
 		position: absolute;
 		bottom: 0;
 		left: 0;
@@ -106,5 +116,14 @@ export default defineComponent({
 		width: 100%;
 		height: 100%;
 	}
+
+	> .indicator {
+		position: absolute;
+		z-index: 1;
+		bottom: 0;
+		left: 0;
+		width: 20%;
+		height: 20%;
+	}
 }
 </style>

src/client/components/global/error.vue

@@ -2,7 +2,7 @@
 <transition :name="$store.state.animation ? 'zoom' : ''" appear>
 	<div class="mjndxjcg">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-		<p><Fa :icon="faExclamationTriangle"/> {{ $ts.somethingHappened }}</p>
+		<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</p>
 		<MkButton @click="() => $emit('retry')" class="button">{{ $ts.retry }}</MkButton>
 	</div>
 </transition>
@@ -10,7 +10,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '@client/components/ui/button.vue';
 
 export default defineComponent({
@@ -19,7 +18,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faExclamationTriangle
 		};
 	},
 });

src/client/components/global/loading.vue

@@ -1,12 +1,11 @@
 <template>
-<div class="yxspomdl" :class="{ inline }">
+<div class="yxspomdl" :class="{ inline, colored }">
 	<div class="ring"></div>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import * as os from '@client/os';
 
 export default defineComponent({
 	props: {
@@ -14,6 +13,11 @@ export default defineComponent({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+		colored: {
+			type: Boolean,
+			required: false,
+			default: true
 		}
 	}
 });
@@ -32,6 +36,11 @@ export default defineComponent({
 .yxspomdl {
 	padding: 32px;
 	text-align: center;
+	cursor: wait;
+
+	&.colored {
+		color: var(--accent);
+	}
 
 	&.inline {
 		display: inline;
@@ -41,24 +50,43 @@ export default defineComponent({
 			width: 32px;
 			height: 32px;
 		}
+
+		> .ring {
+			&:before,
+			&:after {
+				width: 32px;
+				height: 32px;
+			}
+		}
 	}
 
 	> .ring {
+		position: relative;
 		display: inline-block;
-		opacity: 0.7;
 		vertical-align: middle;
-	}
 
-	> .ring:after {
+		&:before,
-		content: " ";
+		&:after {
-		display: block;
+			content: " ";
-		box-sizing: border-box;
+			display: block;
-		width: 48px;
+			box-sizing: border-box;
-		height: 48px;
+			width: 48px;
-		border-radius: 50%;
+			height: 48px;
-		border: solid 4px;
+			border-radius: 50%;
-		border-color: currentColor transparent transparent transparent;
+			border: solid 4px;
-		animation: ring 0.5s linear infinite;
+		}
+
+		&:before {
+			border-color: currentColor;
+			opacity: 0.3;
+		}
+
+		&:after {
+			position: absolute;
+			top: 0;
+			border-color: currentColor transparent transparent transparent;
+			animation: ring 0.5s linear infinite;
+		}
 	}
 }
 </style>

src/client/components/global/url.vue

@@ -15,13 +15,12 @@
 	<span class="pathname" v-if="pathname != ''">{{ self ? pathname.substr(1) : pathname }}</span>
 	<span class="query">{{ query }}</span>
 	<span class="hash">{{ hash }}</span>
-	<Fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
+	<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>
 </component>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { toUnicode as decodePunycode } from 'punycode/';
 import { url as local } from '@client/config';
 import { isDeviceTouch } from '@client/scripts/is-device-touch';
@@ -55,7 +54,6 @@ export default defineComponent({
 			hideTimer: null,
 			checkTimer: null,
 			close: null,
-			faExternalLinkSquareAlt
 		};
 	},
 	created() {

src/client/components/google.vue

@@ -1,13 +1,12 @@
 <template>
 <div class="mk-google">
 	<input type="search" v-model="query" :placeholder="q">
-	<button @click="search"><Fa :icon="faSearch"/> {{ $ts.search }}</button>
+	<button @click="search"><i class="fas fa-search"></i> {{ $ts.search }}</button>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -15,7 +14,6 @@ export default defineComponent({
 	data() {
 		return {
 			query: null,
-			faSearch
 		};
 	},
 	mounted() {

src/client/components/img-with-blurhash.vue

@@ -71,6 +71,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .xubzgfgb {
+	position: relative;
 	width: 100%;
 	height: 100%;
 
@@ -82,6 +83,7 @@ export default defineComponent({
 	}
 
 	> canvas {
+		position: absolute;
 		object-fit: cover;
 	}
 

src/client/components/instance-stats.vue

@@ -1,129 +1,40 @@
 <template>
-<div class="zbcjwnqg" v-size="{ max: [550, 1000] }">
+<div class="zbcjwnqg" style="margin-top: -8px;">
-	<div class="stats" v-if="info">
+	<div class="selects" style="display: flex;">
-		<div class="_panel">
+		<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
-			<div>
+			<optgroup :label="$ts.federation">
-				<b><Fa :icon="faUser"/>{{ $ts.users }}</b>
+				<option value="federation-instances">{{ $ts._charts.federationInstancesIncDec }}</option>
-				<small>{{ $ts.local }}</small>
+				<option value="federation-instances-total">{{ $ts._charts.federationInstancesTotal }}</option>
-			</div>
+			</optgroup>
-			<div>
+			<optgroup :label="$ts.users">
-				<dl class="total">
+				<option value="users">{{ $ts._charts.usersIncDec }}</option>
-					<dt>{{ $ts.total }}</dt>
+				<option value="users-total">{{ $ts._charts.usersTotal }}</option>
-					<dd>{{ number(info.originalUsersCount) }}</dd>
+				<option value="active-users">{{ $ts._charts.activeUsers }}</option>
-				</dl>
+			</optgroup>
-				<dl class="diff" :class="{ inc: usersLocalDoD > 0 }">
+			<optgroup :label="$ts.notes">
-					<dt>{{ $ts.dayOverDayChanges }}</dt>
+				<option value="notes">{{ $ts._charts.notesIncDec }}</option>
-					<dd>{{ number(usersLocalDoD) }}</dd>
+				<option value="local-notes">{{ $ts._charts.localNotesIncDec }}</option>
-				</dl>
+				<option value="remote-notes">{{ $ts._charts.remoteNotesIncDec }}</option>
-				<dl class="diff" :class="{ inc: usersLocalWoW > 0 }">
+				<option value="notes-total">{{ $ts._charts.notesTotal }}</option>
-					<dt>{{ $ts.weekOverWeekChanges }}</dt>
+			</optgroup>
-					<dd>{{ number(usersLocalWoW) }}</dd>
+			<optgroup :label="$ts.drive">
-				</dl>
+				<option value="drive-files">{{ $ts._charts.filesIncDec }}</option>
-			</div>
+				<option value="drive-files-total">{{ $ts._charts.filesTotal }}</option>
-		</div>
+				<option value="drive">{{ $ts._charts.storageUsageIncDec }}</option>
-		<div class="_panel">
+				<option value="drive-total">{{ $ts._charts.storageUsageTotal }}</option>
-			<div>
+			</optgroup>
-				<b><Fa :icon="faUser"/>{{ $ts.users }}</b>
+		</MkSelect>
-				<small>{{ $ts.remote }}</small>
+		<MkSelect v-model:value="chartSpan" style="margin: 0;">
-			</div>
+			<option value="hour">{{ $ts.perHour }}</option>
-			<div>
+			<option value="day">{{ $ts.perDay }}</option>
-				<dl class="total">
+		</MkSelect>
-					<dt>{{ $ts.total }}</dt>
-					<dd>{{ number((info.usersCount - info.originalUsersCount)) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: usersRemoteDoD > 0 }">
-					<dt>{{ $ts.dayOverDayChanges }}</dt>
-					<dd>{{ number(usersRemoteDoD) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: usersRemoteWoW > 0 }">
-					<dt>{{ $ts.weekOverWeekChanges }}</dt>
-					<dd>{{ number(usersRemoteWoW) }}</dd>
-				</dl>
-			</div>
-		</div>
-		<div class="_panel">
-			<div>
-				<b><Fa :icon="faPencilAlt"/>{{ $ts.notes }}</b>
-				<small>{{ $ts.local }}</small>
-			</div>
-			<div>
-				<dl class="total">
-					<dt>{{ $ts.total }}</dt>
-					<dd>{{ number(info.originalNotesCount) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: notesLocalDoD > 0 }">
-					<dt>{{ $ts.dayOverDayChanges }}</dt>
-					<dd>{{ number(notesLocalDoD) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: notesLocalWoW > 0 }">
-					<dt>{{ $ts.weekOverWeekChanges }}</dt>
-					<dd>{{ number(notesLocalWoW) }}</dd>
-				</dl>
-			</div>
-		</div>
-		<div class="_panel">
-			<div>
-				<b><Fa :icon="faPencilAlt"/>{{ $ts.notes }}</b>
-				<small>{{ $ts.remote }}</small>
-			</div>
-			<div>
-				<dl class="total">
-					<dt>{{ $ts.total }}</dt>
-					<dd>{{ number((info.notesCount - info.originalNotesCount)) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: notesRemoteDoD > 0 }">
-					<dt>{{ $ts.dayOverDayChanges }}</dt>
-					<dd>{{ number(notesRemoteDoD) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: notesRemoteWoW > 0 }">
-					<dt>{{ $ts.weekOverWeekChanges }}</dt>
-					<dd>{{ number(notesRemoteWoW) }}</dd>
-				</dl>
-			</div>
-		</div>
 	</div>
-
+	<canvas ref="chart"></canvas>
-	<section class="_card">
-		<div class="_title" style="position: relative;"><Fa :icon="faChartBar"/> {{ $ts.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;">
-				<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
-					<optgroup :label="$ts.federation">
-						<option value="federation-instances">{{ $ts._charts.federationInstancesIncDec }}</option>
-						<option value="federation-instances-total">{{ $ts._charts.federationInstancesTotal }}</option>
-					</optgroup>
-					<optgroup :label="$ts.users">
-						<option value="users">{{ $ts._charts.usersIncDec }}</option>
-						<option value="users-total">{{ $ts._charts.usersTotal }}</option>
-						<option value="active-users">{{ $ts._charts.activeUsers }}</option>
-					</optgroup>
-					<optgroup :label="$ts.notes">
-						<option value="notes">{{ $ts._charts.notesIncDec }}</option>
-						<option value="local-notes">{{ $ts._charts.localNotesIncDec }}</option>
-						<option value="remote-notes">{{ $ts._charts.remoteNotesIncDec }}</option>
-						<option value="notes-total">{{ $ts._charts.notesTotal }}</option>
-					</optgroup>
-					<optgroup :label="$ts.drive">
-						<option value="drive-files">{{ $ts._charts.filesIncDec }}</option>
-						<option value="drive-files-total">{{ $ts._charts.filesTotal }}</option>
-						<option value="drive">{{ $ts._charts.storageUsageIncDec }}</option>
-						<option value="drive-total">{{ $ts._charts.storageUsageTotal }}</option>
-					</optgroup>
-				</MkSelect>
-				<MkSelect v-model:value="chartSpan" style="margin: 0;">
-					<option value="hour">{{ $ts.perHour }}</option>
-					<option value="day">{{ $ts.perDay }}</option>
-				</MkSelect>
-			</div>
-			<canvas ref="chart"></canvas>
-		</div>
-	</section>
 </div>
 </template>
 
 <script lang="ts">
 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 '@client/filters/number';
@@ -159,7 +70,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			info: null,
 			notesLocalWoW: 0,
 			notesLocalDoD: 0,
 			notesRemoteWoW: 0,
@@ -173,7 +83,6 @@ export default defineComponent({
 			chartInstance: null,
 			chartSrc: 'notes',
 			chartSpan: 'hour',
-			faChartBar, faUser, faPencilAlt, faSync
 		}
 	},
 
@@ -218,8 +127,6 @@ export default defineComponent({
 	},
 
 	async created() {
-		this.info = await os.api('stats');
-
 		this.now = new Date();
 
 		this.fetchChart();
@@ -258,15 +165,6 @@ export default defineComponent({
 				}
 			};
 
-			this.notesLocalWoW = this.info.originalNotesCount - chart.perDay.notes.local.total[7];
-			this.notesLocalDoD = this.info.originalNotesCount - chart.perDay.notes.local.total[1];
-			this.notesRemoteWoW = (this.info.notesCount - this.info.originalNotesCount) - chart.perDay.notes.remote.total[7];
-			this.notesRemoteDoD = (this.info.notesCount - this.info.originalNotesCount) - chart.perDay.notes.remote.total[1];
-			this.usersLocalWoW = this.info.originalUsersCount - chart.perDay.users.local.total[7];
-			this.usersLocalDoD = this.info.originalUsersCount - chart.perDay.users.local.total[1];
-			this.usersRemoteWoW = (this.info.usersCount - this.info.originalUsersCount) - chart.perDay.users.remote.total[7];
-			this.usersRemoteDoD = (this.info.usersCount - this.info.originalUsersCount) - chart.perDay.users.remote.total[1];
-
 			this.chart = chart;
 
 			this.renderChart();
@@ -302,10 +200,10 @@ export default defineComponent({
 					aspectRatio: 2.5,
 					layout: {
 						padding: {
-							left: 0,
+							left: 16,
-							right: 0,
+							right: 16,
 							top: 16,
-							bottom: 0
+							bottom: 8
 						}
 					},
 					legend: {
@@ -632,90 +530,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .zbcjwnqg {
-	&.max-width_1000px {
+	> .selects {
-		> .stats {
+		padding: 8px 16px 0 16px;
-			grid-template-columns: 1fr 1fr;
-			grid-template-rows: 1fr 1fr;
-		}
-	}
-
-	&.max-width_550px {
-		> .stats {
-			grid-template-columns: 1fr;
-			grid-template-rows: 1fr 1fr 1fr 1fr;
-		}
-	}
-
-	> .stats {
-		display: grid;
-		grid-template-columns: 1fr 1fr 1fr 1fr;
-		grid-template-rows: 1fr;
-		gap: var(--margin);
-		margin-bottom: var(--margin);
-		font-size: 90%;
-
-		> div {
-			display: flex;
-			box-sizing: border-box;
-			padding: 16px 20px;
-
-			> div {
-				width: 50%;
-
-				&:first-child {
-					> b {
-						display: block;
-
-						> [data-icon] {
-							width: 16px;
-							margin-right: 8px;
-						}
-					}
-
-					> small {
-						margin-left: 16px + 8px;
-						opacity: 0.7;
-					}
-				}
-
-				&:last-child {
-					> dl {
-						display: flex;
-						margin: 0;
-						line-height: 1.5em;
-
-						> dt,
-						> dd {
-							width: 50%;
-							margin: 0;
-						}
-
-						> dd {
-							text-overflow: ellipsis;
-							overflow: hidden;
-							white-space: nowrap;
-						}
-
-						&.total {
-							> dt,
-							> dd {
-								font-weight: bold;
-							}
-						}
-
-						&.diff.inc {
-							> dd {
-								color: #82c11c;
-
-								&:before {
-									content: "+";
-								}
-							}
-						}
-					}
-				}
-			}
-		}
 	}
 }
 </style>

src/client/components/launch-pad.vue

@@ -4,28 +4,28 @@
 		<div class="main">
 			<template v-for="item in items">
 				<button v-if="item.action" class="_button" @click="$event => { item.action($event); close(); }">
-					<Fa :icon="item.icon" class="icon"/>
+					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
-					<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 				</button>
 				<MkA v-else :to="item.to" @click.passive="close()">
-					<Fa :icon="item.icon" class="icon"/>
+					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
-					<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 				</MkA>
 			</template>
 		</div>
 		<div class="sub">
 			<MkA to="/docs" @click.passive="close()">
-				<Fa :icon="faQuestionCircle" class="icon"/>
+				<i class="fas fa-question-circle icon"></i>
 				<div class="text">{{ $ts.help }}</div>
 			</MkA>
 			<MkA to="/about" @click.passive="close()">
-				<Fa :icon="faInfoCircle" class="icon"/>
+				<i class="fas fa-info-circle icon"></i>
 				<div class="text">{{ $t('aboutX', { x: instanceName }) }}</div>
 			</MkA>
 			<MkA to="/about-misskey" @click.passive="close()">
-				<Fa :icon="faInfoCircle" class="icon"/>
+				<i class="fas fa-info-circle icon"></i>
 				<div class="text">{{ $ts.aboutMisskey }}</div>
 			</MkA>
 		</div>
@@ -35,7 +35,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faQuestionCircle, faInfoCircle, faCircle } from '@fortawesome/free-solid-svg-icons';
 import MkModal from '@client/components/ui/modal.vue';
 import { sidebarDef } from '@client/sidebar';
 import { instanceName } from '@client/config';
@@ -52,7 +51,6 @@ export default defineComponent({
 			menuDef: sidebarDef,
 			items: [],
 			instanceName,
-			faQuestionCircle, faInfoCircle, faCircle,
 		};
 	},
 
@@ -127,7 +125,7 @@ export default defineComponent({
 				line-height: 1.5em;
 			}
 
-			> i {
+			> .indicator {
 				position: absolute;
 				top: 32px;
 				left: 32px;

src/client/components/link.vue

@@ -5,13 +5,12 @@
 	:title="url"
 >
 	<slot></slot>
-	<Fa :icon="faExternalLinkSquareAlt" v-if="target === '_blank'" class="icon"/>
+	<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>
 </component>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { url as local } from '@client/config';
 import { isDeviceTouch } from '@client/scripts/is-device-touch';
 import * as os from '@client/os';
@@ -38,7 +37,6 @@ export default defineComponent({
 			hideTimer: null,
 			checkTimer: null,
 			close: null,
-			faExternalLinkSquareAlt
 		};
 	},
 	methods: {

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"><i class="fas fa-exclamation-triangle"></i></span>
 		<b>{{ $ts.sensitive }}</b>
 		<span>{{ $ts.clickToShow }}</span>
 	</div>
@@ -19,7 +19,7 @@
 		:title="media.name"
 		:download="media.name"
 	>
-		<span class="icon"><Fa icon="download"/></span>
+		<span class="icon"><i class="fas fa-download"></i></span>
 		<b>{{ media.name }}</b>
 	</a>
 </div>
@@ -27,7 +27,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 import { ColdDeviceStorage } from '@client/store';
 
@@ -41,7 +40,6 @@ export default defineComponent({
 	data() {
 		return {
 			hide: true,
-			faExclamationTriangle
 		};
 	},
 	mounted() {

src/client/components/media-image.vue

@@ -3,13 +3,13 @@
 	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.name"/>
 	<div class="text">
 		<div>
-			<b><Fa :icon="faExclamationTriangle"/> {{ $ts.sensitive }}</b>
+			<b><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
 			<span>{{ $ts.clickToShow }}</span>
 		</div>
 	</div>
 </div>
 <div class="gqnyydlz" :style="{ background: color }" v-else>
-	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
+	<i class="fas fa-eye-slash" @click="hide = true"></i>
 	<a
 		:href="image.url"
 		:title="image.name"
@@ -23,11 +23,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 import { extractAvgColorFromBlurhash } from '@client/scripts/extract-avg-color-from-blurhash';
 import ImageViewer from './image-viewer.vue';
-import ImgWithBlurhash from './img-with-blurhash.vue';
+import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -47,7 +46,6 @@ export default defineComponent({
 		return {
 			hide: true,
 			color: null,
-			faExclamationTriangle, faEyeSlash,
 		};
 	},
 	computed: {

src/client/components/media-video.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="icozogqfvdetwohsdglrbswgrejoxbdj" v-if="hide" @click="hide = false">
 	<div>
-		<b><Fa :icon="faExclamationTriangle"/> {{ $ts.sensitive }}</b>
+		<b><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
 		<span>{{ $ts.clickToShow }}</span>
 	</div>
 </div>
@@ -18,13 +18,12 @@
 			:type="video.type"
 		>
 	</video>
-	<i><Fa :icon="faEyeSlash" @click="hide = true"/></i>
+	<i class="fas fa-eye-slash" @click="hide = true"></i>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -37,8 +36,6 @@ export default defineComponent({
 	data() {
 		return {
 			hide: true,
-			faExclamationTriangle,
-			faEyeSlash
 		};
 	},
 	created() {

src/client/components/mfm.ts

@@ -58,10 +58,13 @@ export default defineComponent({
 					const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n');
 
 					if (!this.plain) {
-						const x = text.split('\n')
+						const res = [];
-							.map(t => t == '' ? [h('br')] : [t, h('br')]);
+						for (const t of text.split('\n')) {
-						x[x.length - 1].pop();
+							res.push(h('br'));
-						return x;
+							res.push(t);
+						}
+						res.shift();
+						return res;
 					} else {
 						return [text.replace(/\n/g, ' ')];
 					}

src/client/components/modal-page-window.vue

@@ -1,13 +1,13 @@
 <template>
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
 	<div class="hrmcaedk _popup _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
-		<div class="header">
+		<div class="header" @contextmenu="onContextmenu">
-			<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
+			<button class="_button" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
 			<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
 			<span class="title">
 				<XHeader :info="pageInfo" :with-back="false"/>
 			</span>
-			<button class="_button" @click="$refs.modal.close()"><Fa :icon="faTimes"/></button>
+			<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
 		</div>
 		<div class="body _flat_">
 			<keep-alive>
@@ -20,7 +20,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExternalLinkAlt, faExpandAlt, faLink, faChevronLeft, faColumns, faTimes } from '@fortawesome/free-solid-svg-icons';
 import MkModal from '@client/components/ui/modal.vue';
 import XHeader from '@client/ui/_common_/header.vue';
 import { popout } from '@client/scripts/popout';
@@ -28,6 +27,7 @@ import copyToClipboard from '@client/scripts/copy-to-clipboard';
 import { resolve } from '@client/router';
 import { url } from '@client/config';
 import * as symbols from '@client/symbols';
+import * as os from '@client/os';
 
 export default defineComponent({
 	components: {
@@ -76,7 +76,6 @@ export default defineComponent({
 			component: this.initialComponent,
 			props: this.initialProps,
 			history: [],
-			faChevronLeft, faTimes,
 		};
 	},
 
@@ -90,29 +89,29 @@ export default defineComponent({
 				type: 'label',
 				text: this.path,
 			}, {
-				icon: faExpandAlt,
+				icon: 'fas fa-expand-alt',
 				text: this.$ts.showInPage,
 				action: this.expand
 			}, this.sideViewHook ? {
-				icon: faColumns,
+				icon: 'fas fa-columns',
 				text: this.$ts.openInSideView,
 				action: () => {
 					this.sideViewHook(this.path);
 					this.$refs.window.close();
 				}
 			} : undefined, {
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				text: this.$ts.popout,
 				action: this.popout
 			}, null, {
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				text: this.$ts.openInNewTab,
 				action: () => {
 					window.open(this.url, '_blank');
 					this.$refs.window.close();
 				}
 			}, {
-				icon: faLink,
+				icon: 'fas fa-link',
 				text: this.$ts.copyLink,
 				action: () => {
 					copyToClipboard(this.url);
@@ -150,6 +149,10 @@ export default defineComponent({
 			popout(this.path, this.$el);
 			this.$refs.window.close();
 		},
+
+		onContextmenu(e) {
+			os.contextMenu(this.contextmenu, e);
+		}
 	},
 });
 </script>

src/client/components/note-detailed.vue

@@ -12,7 +12,7 @@
 	<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
 	<div class="renote" v-if="isRenote">
 		<MkAvatar class="avatar" :user="note.user"/>
-		<Fa :icon="faRetweet"/>
+		<i class="fas fa-retweet"></i>
 		<I18n :src="$ts.renotedBy" tag="span">
 			<template #user>
 				<MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
@@ -22,34 +22,34 @@
 		</I18n>
 		<div class="info">
 			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
-				<Fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
+				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
 			<span class="visibility" v-if="note.visibility !== 'public'">
-				<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
+				<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
-				<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
+				<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
-				<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+				<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
 			</span>
-			<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
+			<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
 		</div>
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
 		<header class="header">
-			<MkAvatar class="avatar" :user="appearNote.user"/>
+			<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
 			<div class="body">
 				<div class="top">
 					<MkA class="name" :to="userPage(appearNote.user)" v-user-preview="appearNote.user.id">
 						<MkUserName :user="appearNote.user"/>
 					</MkA>
 					<span class="is-bot" v-if="appearNote.user.isBot">bot</span>
-					<span class="admin" v-if="appearNote.user.isAdmin"><Fa :icon="faBookmark"/></span>
+					<span class="admin" v-if="appearNote.user.isAdmin"><i class="fas fa-bookmark"></i></span>
-					<span class="moderator" v-if="!appearNote.user.isAdmin && appearNote.user.isModerator"><Fa :icon="farBookmark"/></span>
+					<span class="moderator" v-if="!appearNote.user.isAdmin && appearNote.user.isModerator"><i class="far fa-bookmark"></i></span>
 					<span class="visibility" v-if="appearNote.visibility !== 'public'">
-						<Fa v-if="appearNote.visibility === 'home'" :icon="faHome"/>
+						<i v-if="appearNote.visibility === 'home'" class="fas fa-home"></i>
-						<Fa v-if="appearNote.visibility === 'followers'" :icon="faUnlock"/>
+						<i v-else-if="appearNote.visibility === 'followers'" class="fas fa-unlock"></i>
-						<Fa v-if="appearNote.visibility === 'specified'" :icon="faEnvelope"/>
+						<i v-else-if="appearNote.visibility === 'specified'" class="fas fa-envelope"></i>
 					</span>
-					<span class="localOnly" v-if="appearNote.localOnly"><Fa :icon="faBiohazard"/></span>
+					<span class="localOnly" v-if="appearNote.localOnly"><i class="fas fa-biohazard"></i></span>
 				</div>
 				<div class="username"><MkAcct :user="appearNote.user"/></div>
 				<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
@@ -64,7 +64,7 @@
 				<div class="content" v-show="appearNote.cw == null || showContent">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
-						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><Fa :icon="faReply"/></MkA>
+						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a class="rp" v-if="appearNote.renote != null">RN:</a>
 					</div>
@@ -75,33 +75,33 @@
 					<MkUrlPreview v-for="url in urls" :url="url" :key="url" :compact="true" :detail="true" class="url-preview"/>
 					<div class="renote" v-if="appearNote.renote"><XNotePreview :note="appearNote.renote"/></div>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><Fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</MkA>
+				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<footer class="footer">
 				<div class="info">
-					<span class="mobile" v-if="note.viaMobile"><Fa :icon="faMobileAlt"/></span>
+					<span class="mobile" v-if="note.viaMobile"><i class="fas fa-mobile-alt"></i></span>
 					<MkTime class="created-at" :time="note.createdAt" mode="detail"/>
 				</div>
 				<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
 				<button @click="reply()" class="button _button">
-					<template v-if="appearNote.reply"><Fa :icon="faReplyAll"/></template>
+					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
-					<template v-else><Fa :icon="faReply"/></template>
+					<template v-else><i class="fas fa-reply"></i></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>
+					<i class="fas fa-retweet"></i><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
 				</button>
 				<button v-else class="button _button">
-					<Fa :icon="faBan"/>
+					<i class="fas fa-ban"></i>
 				</button>
 				<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
-					<Fa :icon="faPlus"/>
+					<i class="fas fa-plus"></i>
 				</button>
 				<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
-					<Fa :icon="faMinus"/>
+					<i class="fas fa-minus"></i>
 				</button>
 				<button class="button _button" @click="menu()" ref="menuButton">
-					<Fa :icon="faEllipsisH"/>
+					<i class="fas fa-ellipsis-h"></i>
 				</button>
 			</footer>
 		</div>
@@ -121,8 +121,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, markRaw } 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, faPaperclip, faShareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import * as mfm from 'mfm-js';
 import { sum } from '../../prelude/array';
 import XSub from './note.sub.vue';
@@ -143,14 +141,6 @@ import { noteActions, noteViewInterruptors } from '@client/store';
 import { reactionPicker } from '@client/scripts/reaction-picker';
 import { extractUrlFromMfm } from '@/misc/extract-url-from-mfm';
 
-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);
-
 // TODO: note.vueとほぼ同じなので共通化したい
 export default defineComponent({
 	components: {
@@ -188,7 +178,6 @@ export default defineComponent({
 			showContent: false,
 			isDeleted: false,
 			muted: false,
-			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish
 		};
 	},
 
@@ -467,7 +456,7 @@ export default defineComponent({
 			this.blur();
 			os.modalMenu([{
 				text: this.$ts.renote,
-				icon: faRetweet,
+				icon: 'fas fa-retweet',
 				action: () => {
 					os.api('notes/create', {
 						renoteId: this.appearNote.id
@@ -475,7 +464,7 @@ export default defineComponent({
 				}
 			}, {
 				text: this.$ts.quote,
-				icon: faQuoteRight,
+				icon: 'fas fa-quote-right',
 				action: () => {
 					os.post({
 						renote: this.appearNote,
@@ -611,62 +600,62 @@ export default defineComponent({
 				});
 
 				menu = [{
-					icon: faCopy,
+					icon: 'fas fa-copy',
 					text: this.$ts.copyContent,
 					action: this.copyContent
 				}, {
-					icon: faLink,
+					icon: 'fas fa-link',
 					text: this.$ts.copyLink,
 					action: this.copyLink
 				}, (this.appearNote.url || this.appearNote.uri) ? {
-					icon: faExternalLinkSquareAlt,
+					icon: 'fas fa-external-link-square-alt',
 					text: this.$ts.showOnRemote,
 					action: () => {
 						window.open(this.appearNote.url || this.appearNote.uri, '_blank');
 					}
 				} : undefined,
 				{
-					icon: faShareAlt,
+					icon: 'fas fa-share-alt',
 					text: this.$ts.share,
 					action: this.share
 				},
 				null,
 				statePromise.then(state => state.isFavorited ? {
-					icon: faStar,
+					icon: 'fas fa-star',
 					text: this.$ts.unfavorite,
 					action: () => this.toggleFavorite(false)
 				} : {
-					icon: faStar,
+					icon: 'fas fa-star',
 					text: this.$ts.favorite,
 					action: () => this.toggleFavorite(true)
 				}),
 				{
-					icon: faPaperclip,
+					icon: 'fas fa-paperclip',
 					text: this.$ts.clip,
 					action: () => this.clip()
 				},
 				(this.appearNote.userId != this.$i.id) ? statePromise.then(state => state.isWatching ? {
-					icon: faEyeSlash,
+					icon: 'fas fa-eye-slash',
 					text: this.$ts.unwatch,
 					action: () => this.toggleWatch(false)
 				} : {
-					icon: faEye,
+					icon: 'fas fa-eye',
 					text: this.$ts.watch,
 					action: () => this.toggleWatch(true)
 				}) : undefined,
 				this.appearNote.userId == this.$i.id ? (this.$i.pinnedNoteIds || []).includes(this.appearNote.id) ? {
-					icon: faThumbtack,
+					icon: 'fas fa-thumbtack',
 					text: this.$ts.unpin,
 					action: () => this.togglePin(false)
 				} : {
-					icon: faThumbtack,
+					icon: 'fas fa-thumbtack',
 					text: this.$ts.pin,
 					action: () => this.togglePin(true)
 				} : undefined,
 				...(this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					{
-						icon: faBullhorn,
+						icon: 'fas fa-bullhorn',
 						text: this.$ts.promote,
 						action: this.promote
 					}]
@@ -675,7 +664,7 @@ export default defineComponent({
 				...(this.appearNote.userId != this.$i.id ? [
 					null,
 					{
-						icon: faExclamationCircle,
+						icon: 'fas fa-exclamation-circle',
 						text: this.$ts.reportAbuse,
 						action: () => {
 							const u = `${url}/notes/${this.appearNote.id}`;
@@ -690,12 +679,12 @@ export default defineComponent({
 				...(this.appearNote.userId == this.$i.id || this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					this.appearNote.userId == this.$i.id ? {
-						icon: faEdit,
+						icon: 'fas fa-edit',
 						text: this.$ts.deleteAndEdit,
 						action: this.delEdit
 					} : undefined,
 					{
-						icon: faTrashAlt,
+						icon: 'fas fa-trash-alt',
 						text: this.$ts.delete,
 						danger: true,
 						action: this.del
@@ -705,15 +694,15 @@ export default defineComponent({
 				.filter(x => x !== undefined);
 			} else {
 				menu = [{
-					icon: faCopy,
+					icon: 'fas fa-copy',
 					text: this.$ts.copyContent,
 					action: this.copyContent
 				}, {
-					icon: faLink,
+					icon: 'fas fa-link',
 					text: this.$ts.copyLink,
 					action: this.copyLink
 				}, (this.appearNote.url || this.appearNote.uri) ? {
-					icon: faExternalLinkSquareAlt,
+					icon: 'fas fa-external-link-square-alt',
 					text: this.$ts.showOnRemote,
 					action: () => {
 						window.open(this.appearNote.url || this.appearNote.uri, '_blank');
@@ -724,7 +713,7 @@ export default defineComponent({
 
 			if (noteActions.length > 0) {
 				menu = menu.concat([null, ...noteActions.map(action => ({
-					icon: faPlug,
+					icon: 'fas fa-plug',
 					text: action.title,
 					action: () => {
 						action.handler(this.appearNote);
@@ -763,7 +752,7 @@ export default defineComponent({
 			if (!this.isMyRenote) return;
 			os.modalMenu([{
 				text: this.$ts.unrenote,
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				danger: true,
 				action: () => {
 					os.api('notes/delete', {
@@ -806,7 +795,7 @@ export default defineComponent({
 		async clip() {
 			const clips = await os.api('clips/list');
 			os.modalMenu([{
-				icon: faPlus,
+				icon: 'fas fa-plus',
 				text: this.$ts.createNew,
 				action: async () => {
 					const { canceled, result } = await os.form(this.$ts.createNewClip, {
@@ -943,7 +932,7 @@ export default defineComponent({
 			border-radius: 6px;
 		}
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 		}
 

src/client/components/note-header.vue

@@ -5,27 +5,25 @@
 	</MkA>
 	<span class="is-bot" v-if="note.user.isBot">bot</span>
 	<span class="username"><MkAcct :user="note.user"/></span>
-	<span class="admin" v-if="note.user.isAdmin"><Fa :icon="faBookmark"/></span>
+	<span class="admin" v-if="note.user.isAdmin"><i class="fas fa-bookmark"></i></span>
-	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><Fa :icon="farBookmark"/></span>
+	<span class="moderator" v-if="!note.user.isAdmin && note.user.isModerator"><i class="far fa-bookmark"></i></span>
 	<div class="info">
-		<span class="mobile" v-if="note.viaMobile"><Fa :icon="faMobileAlt"/></span>
+		<span class="mobile" v-if="note.viaMobile"><i class="fas fa-mobile-alt"></i></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"/>
+			<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
-			<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
+			<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
-			<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+			<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
 		</span>
-		<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
+		<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
 	</div>
 </header>
 </template>
 
 <script lang="ts">
 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 '@client/os';
@@ -40,7 +38,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, farBookmark, faBiohazard
 		};
 	},
 

src/client/components/note.vue

@@ -9,12 +9,12 @@
 	v-size="{ max: [500, 450, 350, 300] }"
 >
 	<XSub :note="appearNote.reply" class="reply-to" v-if="appearNote.reply"/>
-	<div class="info" v-if="pinned"><Fa :icon="faThumbtack"/> {{ $ts.pinnedNote }}</div>
+	<div class="info" v-if="pinned"><i class="fas fa-thumbtack"></i> {{ $ts.pinnedNote }}</div>
-	<div class="info" v-if="appearNote._prId_"><Fa :icon="faBullhorn"/> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <Fa :icon="faTimes"/></button></div>
+	<div class="info" v-if="appearNote._prId_"><i class="fas fa-bullhorn"></i> {{ $ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ $ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
-	<div class="info" v-if="appearNote._featuredId_"><Fa :icon="faBolt"/> {{ $ts.featured }}</div>
+	<div class="info" v-if="appearNote._featuredId_"><i class="fas fa-bolt"></i> {{ $ts.featured }}</div>
 	<div class="renote" v-if="isRenote">
 		<MkAvatar class="avatar" :user="note.user"/>
-		<Fa :icon="faRetweet"/>
+		<i class="fas fa-retweet"></i>
 		<I18n :src="$ts.renotedBy" tag="span">
 			<template #user>
 				<MkA class="name" :to="userPage(note.user)" v-user-preview="note.userId">
@@ -24,15 +24,15 @@
 		</I18n>
 		<div class="info">
 			<button class="_button time" @click="showRenoteMenu()" ref="renoteTime">
-				<Fa class="dropdownIcon" v-if="isMyRenote" :icon="faEllipsisH"/>
+				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
 			<span class="visibility" v-if="note.visibility !== 'public'">
-				<Fa v-if="note.visibility === 'home'" :icon="faHome"/>
+				<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
-				<Fa v-if="note.visibility === 'followers'" :icon="faUnlock"/>
+				<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
-				<Fa v-if="note.visibility === 'specified'" :icon="faEnvelope"/>
+				<i v-else-if="note.visibility === 'specified'" class="fas fa-envelope"></i>
 			</span>
-			<span class="localOnly" v-if="note.localOnly"><Fa :icon="faBiohazard"/></span>
+			<span class="localOnly" v-if="note.localOnly"><i class="fas fa-biohazard"></i></span>
 		</div>
 	</div>
 	<article class="article" @contextmenu.stop="onContextmenu">
@@ -48,7 +48,7 @@
 				<div class="content" :class="{ collapsed }" v-show="appearNote.cw == null || showContent">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
-						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><Fa :icon="faReply"/></MkA>
+						<MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a class="rp" v-if="appearNote.renote != null">RN:</a>
 					</div>
@@ -62,29 +62,29 @@
 						<span>{{ $ts.showMore }}</span>
 					</button>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><Fa :icon="faSatelliteDish"/> {{ appearNote.channel.name }}</MkA>
+				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<footer class="footer">
 				<XReactionsViewer :note="appearNote" ref="reactionsViewer"/>
 				<button @click="reply()" class="button _button">
-					<template v-if="appearNote.reply"><Fa :icon="faReplyAll"/></template>
+					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
-					<template v-else><Fa :icon="faReply"/></template>
+					<template v-else><i class="fas fa-reply"></i></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>
+					<i class="fas fa-retweet"></i><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
 				</button>
 				<button v-else class="button _button">
-					<Fa :icon="faBan"/>
+					<i class="fas fa-ban"></i>
 				</button>
 				<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
-					<Fa :icon="faPlus"/>
+					<i class="fas fa-plus"></i>
 				</button>
 				<button v-if="appearNote.myReaction != null" class="button _button reacted" @click="undoReact(appearNote)" ref="reactButton">
-					<Fa :icon="faMinus"/>
+					<i class="fas fa-minus"></i>
 				</button>
 				<button class="button _button" @click="menu()" ref="menuButton">
-					<Fa :icon="faEllipsisH"/>
+					<i class="fas fa-ellipsis-h"></i>
 				</button>
 			</footer>
 		</div>
@@ -103,8 +103,6 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, markRaw } 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, faPaperclip, faShareAlt } from '@fortawesome/free-solid-svg-icons';
-import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import * as mfm from 'mfm-js';
 import { sum } from '../../prelude/array';
 import XSub from './note.sub.vue';
@@ -125,14 +123,6 @@ import { noteActions, noteViewInterruptors } from '@client/store';
 import { reactionPicker } from '@client/scripts/reaction-picker';
 import { extractUrlFromMfm } from '@/misc/extract-url-from-mfm';
 
-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,
@@ -174,7 +164,6 @@ export default defineComponent({
 			collapsed: false,
 			isDeleted: false,
 			muted: false,
-			faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish
 		};
 	},
 
@@ -442,7 +431,7 @@ export default defineComponent({
 			this.blur();
 			os.modalMenu([{
 				text: this.$ts.renote,
-				icon: faRetweet,
+				icon: 'fas fa-retweet',
 				action: () => {
 					os.api('notes/create', {
 						renoteId: this.appearNote.id
@@ -450,7 +439,7 @@ export default defineComponent({
 				}
 			}, {
 				text: this.$ts.quote,
-				icon: faQuoteRight,
+				icon: 'fas fa-quote-right',
 				action: () => {
 					os.post({
 						renote: this.appearNote,
@@ -586,62 +575,62 @@ export default defineComponent({
 				});
 
 				menu = [{
-					icon: faCopy,
+					icon: 'fas fa-copy',
 					text: this.$ts.copyContent,
 					action: this.copyContent
 				}, {
-					icon: faLink,
+					icon: 'fas fa-link',
 					text: this.$ts.copyLink,
 					action: this.copyLink
 				}, (this.appearNote.url || this.appearNote.uri) ? {
-					icon: faExternalLinkSquareAlt,
+					icon: 'fas fa-external-link-square-alt',
 					text: this.$ts.showOnRemote,
 					action: () => {
 						window.open(this.appearNote.url || this.appearNote.uri, '_blank');
 					}
 				} : undefined,
 				{
-					icon: faShareAlt,
+					icon: 'fas fa-share-alt',
 					text: this.$ts.share,
 					action: this.share
 				},
 				null,
 				statePromise.then(state => state.isFavorited ? {
-					icon: faStar,
+					icon: 'fas fa-star',
 					text: this.$ts.unfavorite,
 					action: () => this.toggleFavorite(false)
 				} : {
-					icon: faStar,
+					icon: 'fas fa-star',
 					text: this.$ts.favorite,
 					action: () => this.toggleFavorite(true)
 				}),
 				{
-					icon: faPaperclip,
+					icon: 'fas fa-paperclip',
 					text: this.$ts.clip,
 					action: () => this.clip()
 				},
 				(this.appearNote.userId != this.$i.id) ? statePromise.then(state => state.isWatching ? {
-					icon: faEyeSlash,
+					icon: 'fas fa-eye-slash',
 					text: this.$ts.unwatch,
 					action: () => this.toggleWatch(false)
 				} : {
-					icon: faEye,
+					icon: 'fas fa-eye',
 					text: this.$ts.watch,
 					action: () => this.toggleWatch(true)
 				}) : undefined,
 				this.appearNote.userId == this.$i.id ? (this.$i.pinnedNoteIds || []).includes(this.appearNote.id) ? {
-					icon: faThumbtack,
+					icon: 'fas fa-thumbtack',
 					text: this.$ts.unpin,
 					action: () => this.togglePin(false)
 				} : {
-					icon: faThumbtack,
+					icon: 'fas fa-thumbtack',
 					text: this.$ts.pin,
 					action: () => this.togglePin(true)
 				} : undefined,
 				...(this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					{
-						icon: faBullhorn,
+						icon: 'fas fa-bullhorn',
 						text: this.$ts.promote,
 						action: this.promote
 					}]
@@ -650,7 +639,7 @@ export default defineComponent({
 				...(this.appearNote.userId != this.$i.id ? [
 					null,
 					{
-						icon: faExclamationCircle,
+						icon: 'fas fa-exclamation-circle',
 						text: this.$ts.reportAbuse,
 						action: () => {
 							const u = `${url}/notes/${this.appearNote.id}`;
@@ -665,12 +654,12 @@ export default defineComponent({
 				...(this.appearNote.userId == this.$i.id || this.$i.isModerator || this.$i.isAdmin ? [
 					null,
 					this.appearNote.userId == this.$i.id ? {
-						icon: faEdit,
+						icon: 'fas fa-edit',
 						text: this.$ts.deleteAndEdit,
 						action: this.delEdit
 					} : undefined,
 					{
-						icon: faTrashAlt,
+						icon: 'fas fa-trash-alt',
 						text: this.$ts.delete,
 						danger: true,
 						action: this.del
@@ -680,15 +669,15 @@ export default defineComponent({
 				.filter(x => x !== undefined);
 			} else {
 				menu = [{
-					icon: faCopy,
+					icon: 'fas fa-copy',
 					text: this.$ts.copyContent,
 					action: this.copyContent
 				}, {
-					icon: faLink,
+					icon: 'fas fa-link',
 					text: this.$ts.copyLink,
 					action: this.copyLink
 				}, (this.appearNote.url || this.appearNote.uri) ? {
-					icon: faExternalLinkSquareAlt,
+					icon: 'fas fa-external-link-square-alt',
 					text: this.$ts.showOnRemote,
 					action: () => {
 						window.open(this.appearNote.url || this.appearNote.uri, '_blank');
@@ -699,7 +688,7 @@ export default defineComponent({
 
 			if (noteActions.length > 0) {
 				menu = menu.concat([null, ...noteActions.map(action => ({
-					icon: faPlug,
+					icon: 'fas fa-plug',
 					text: action.title,
 					action: () => {
 						action.handler(this.appearNote);
@@ -738,7 +727,7 @@ export default defineComponent({
 			if (!this.isMyRenote) return;
 			os.modalMenu([{
 				text: this.$ts.unrenote,
-				icon: faTrashAlt,
+				icon: 'fas fa-trash-alt',
 				danger: true,
 				action: () => {
 					os.api('notes/delete', {
@@ -781,7 +770,7 @@ export default defineComponent({
 		async clip() {
 			const clips = await os.api('clips/list');
 			os.modalMenu([{
-				icon: faPlus,
+				icon: 'fas fa-plus',
 				text: this.$ts.createNew,
 				action: async () => {
 					const { canceled, result } = await os.form(this.$ts.createNewClip, {
@@ -909,7 +898,7 @@ export default defineComponent({
 		white-space: pre;
 		color: #d28a3f;
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 		}
 
@@ -945,7 +934,7 @@ export default defineComponent({
 			border-radius: 6px;
 		}
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 		}
 

src/client/components/notes.vue

@@ -1,30 +1,34 @@
 <template>
-<div>
+<transition name="fade" mode="out-in">
-	<div class="_fullinfo" v-if="empty">
+	<MkLoading v-if="fetching"/>
+
+	<MkError v-else-if="error" @retry="init()"/>
+
+	<div class="_fullinfo" v-else-if="empty">
 		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
 		<div>{{ $ts.noNotes }}</div>
 	</div>
 
-	<MkError v-if="error" @retry="init()"/>
+	<div v-else>
+		<div v-show="more && reversed" style="margin-bottom: var(--margin);">
+			<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
+				<template v-if="moreFetching"><MkLoading inline/></template>
+			</MkButton>
+		</div>
 
-	<div v-show="more && reversed" style="margin-bottom: var(--margin);">
+		<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap">
-		<MkButton style="margin: 0 auto;" @click="fetchMoreFeature" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+			<XNote :note="note" class="_block" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
-			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
+		</XList>
-			<template v-if="moreFetching"><MkLoading inline/></template>
+
-		</MkButton>
+		<div v-show="more && !reversed" style="margin-top: var(--margin);">
+			<MkButton style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
+				<template v-if="moreFetching"><MkLoading inline/></template>
+			</MkButton>
+		</div>
 	</div>
-
+</transition>
-	<XList ref="notes" :items="notes" v-slot="{ item: note }" :direction="reversed ? 'up' : 'down'" :reversed="reversed">
-		<XNote :note="note" class="_block" @update:note="updated(note, $event)" :key="note._featuredId_ || note._prId_ || note.id"/>
-	</XList>
-
-	<div v-show="more && !reversed" style="margin-top: var(--margin);">
-		<MkButton style="margin: 0 auto;" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
-			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-			<template v-if="moreFetching"><MkLoading inline/></template>
-		</MkButton>
-	</div>
-</div>
 </template>
 
 <script lang="ts">
@@ -55,11 +59,15 @@ export default defineComponent({
 		pagination: {
 			required: true
 		},
-
 		prop: {
 			type: String,
 			required: false
-		}
+		},
+		noGap: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
 
 	emits: ['before', 'after'],
@@ -90,3 +98,14 @@ export default defineComponent({
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>

src/client/components/notification.vue

@@ -4,15 +4,15 @@
 		<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'"/>
+			<i v-if="notification.type === 'follow'" class="fas fa-plus"></i>
-			<Fa :icon="faClock" v-else-if="notification.type === 'receiveFollowRequest'"/>
+			<i v-else-if="notification.type === 'receiveFollowRequest'" class="fas fa-clock"></i>
-			<Fa :icon="faCheck" v-else-if="notification.type === 'followRequestAccepted'"/>
+			<i v-else-if="notification.type === 'followRequestAccepted'" class="fas fa-check"></i>
-			<Fa :icon="faIdCardAlt" v-else-if="notification.type === 'groupInvited'"/>
+			<i v-else-if="notification.type === 'groupInvited'" class="fas fa-id-card-alt"></i>
-			<Fa :icon="faRetweet" v-else-if="notification.type === 'renote'"/>
+			<i v-else-if="notification.type === 'renote'" class="fas fa-retweet"></i>
-			<Fa :icon="faReply" v-else-if="notification.type === 'reply'"/>
+			<i v-else-if="notification.type === 'reply'" class="fas fa-reply"></i>
-			<Fa :icon="faAt" v-else-if="notification.type === 'mention'"/>
+			<i v-else-if="notification.type === 'mention'" class="fas fa-at"></i>
-			<Fa :icon="faQuoteLeft" v-else-if="notification.type === 'quote'"/>
+			<i v-else-if="notification.type === 'quote'" class="fas fa-quote-left"></i>
-			<Fa :icon="faPollH" v-else-if="notification.type === 'pollVote'"/>
+			<i v-else-if="notification.type === 'pollVote'" class="fas fa-poll-h"></i>
 			<XReactionIcon v-else-if="notification.type === 'reaction'" :reaction="notification.reaction" :custom-emojis="notification.note.emojis" :no-style="true"/>
 		</div>
 	</div>
@@ -23,14 +23,14 @@
 			<MkTime :time="notification.createdAt" v-if="withTime" class="time"/>
 		</header>
 		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<Fa :icon="faQuoteLeft"/>
+			<i class="fas fa-quote-left"></i>
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<Fa :icon="faQuoteRight"/>
+			<i class="fas fa-quote-right"></i>
 		</MkA>
 		<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
-			<Fa :icon="faQuoteLeft"/>
+			<i class="fas fa-quote-left"></i>
 			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
-			<Fa :icon="faQuoteRight"/>
+			<i class="fas fa-quote-right"></i>
 		</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"/>
@@ -42,9 +42,9 @@
 			<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"/>
+			<i class="fas fa-quote-left"></i>
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<Fa :icon="faQuoteRight"/>
+			<i class="fas fa-quote-right"></i>
 		</MkA>
 		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $ts.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;">{{ $ts.followRequestAccepted }}</span>
@@ -59,8 +59,6 @@
 
 <script lang="ts">
 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 { getNoteSummary } from '@/misc/get-note-summary';
 import XReactionIcon from './reaction-icon.vue';
 import MkFollowButton from './follow-button.vue';
@@ -96,7 +94,6 @@ export default defineComponent({
 			groupInviteDone: false,
 			connection: null,
 			readObserver: null,
-			faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faClock, faCheck, faPollH
 		};
 	},
 
@@ -271,17 +268,17 @@ export default defineComponent({
 			overflow: hidden;
 			text-overflow: ellipsis;
 
-			> [data-icon] {
+			> i {
 				vertical-align: super;
 				font-size: 50%;
 				opacity: 0.5;
 			}
 
-			> [data-icon]:first-child {
+			> i:first-child {
 				margin-right: 4px;
 			}
 
-			> [data-icon]:last-child {
+			> i:last-child {
 				margin-left: 4px;
 			}
 		}

src/client/components/notifications.vue

@@ -1,20 +1,23 @@
 <template>
-<div class="mfcuwfyp _noGap_">
+<transition name="fade" mode="out-in">
-	<div class="_magnet"></div>
+	<MkLoading v-if="fetching"/>
-	<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="_buttonPrimary" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+	<MkError v-else-if="error" @retry="init()"/>
-		<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-		<template v-if="moreFetching"><MkLoading inline/></template>
-	</button>
 
-	<p class="empty" v-if="empty">{{ $ts.noNotifications }}</p>
+	<p class="mfcuwfyp" v-else-if="empty">{{ $ts.noNotifications }}</p>
 
-	<MkError v-if="error" @retry="init()"/>
+	<div v-else>
-</div>
+		<XList class="notifications" :items="items" v-slot="{ item: notification }" :no-gap="true">
+			<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="_buttonPrimary" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }">
+			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
+			<template v-if="moreFetching"><MkLoading inline/></template>
+		</button>
+	</div>
+</transition>
 </template>
 
 <script lang="ts">
@@ -121,17 +124,19 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.mfcuwfyp {
+.fade-enter-active,
-	> .empty {
+.fade-leave-active {
-		margin: 0;
+	transition: opacity 0.125s ease;
-		padding: 16px;
+}
-		text-align: center;
+.fade-enter-from,
-		color: var(--fg);
+.fade-leave-to {
-	}
+	opacity: 0;
+}
 
-	> .placeholder {
+.mfcuwfyp {
-		padding: 32px;
+	margin: 0;
-		opacity: 0.3;
+	padding: 16px;
-	}
+	text-align: center;
+	color: var(--fg);
 }
 </style>

src/client/components/page-window.vue

@@ -11,7 +11,7 @@
 		<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" @click="back()" v-if="history.length > 0"><i class="fas fa-chevron-left"></i></button>
 		<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
 	</template>
 	<div class="yrolvcoq _flat_">
@@ -22,7 +22,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExternalLinkAlt, faExpandAlt, faLink, faChevronLeft, faColumns } from '@fortawesome/free-solid-svg-icons';
 import XWindow from '@client/components/ui/window.vue';
 import XHeader from '@client/ui/_common_/header.vue';
 import { popout } from '@client/scripts/popout';
@@ -76,7 +75,6 @@ export default defineComponent({
 			component: this.initialComponent,
 			props: this.initialProps,
 			history: [],
-			faChevronLeft,
 		};
 	},
 
@@ -90,29 +88,29 @@ export default defineComponent({
 				type: 'label',
 				text: this.path,
 			}, {
-				icon: faExpandAlt,
+				icon: 'fas fa-expand-alt',
 				text: this.$ts.showInPage,
 				action: this.expand
 			}, this.sideViewHook ? {
-				icon: faColumns,
+				icon: 'fas fa-columns',
 				text: this.$ts.openInSideView,
 				action: () => {
 					this.sideViewHook(this.path);
 					this.$refs.window.close();
 				}
 			} : undefined, {
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				text: this.$ts.popout,
 				action: this.popout
 			}, null, {
-				icon: faExternalLinkAlt,
+				icon: 'fas fa-external-link-alt',
 				text: this.$ts.openInNewTab,
 				action: () => {
 					window.open(this.url, '_blank');
 					this.$refs.window.close();
 				}
 			}, {
-				icon: faLink,
+				icon: 'fas fa-link',
 				text: this.$ts.copyLink,
 				action: () => {
 					copyToClipboard(this.url);

src/client/components/page/page.post.vue

@@ -1,13 +1,15 @@
 <template>
 <div class="ngbfujlo">
 	<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>
+	<MkButton class="button" primary @click="post()" :disabled="posting || posted">
+		<i v-if="posted" class="fas fa-check"></i>
+		<i v-else class="fas fa-paper-plane"></i>
+	</MkButton>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } 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 '@client/config';
@@ -35,7 +37,6 @@ export default defineComponent({
 			text: this.hpml.interpolate(this.block.text),
 			posted: false,
 			posting: false,
-			faCheck, faPaperPlane
 		};
 	},
 	watch: {

src/client/components/poll-editor.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="zmdxowus">
 	<p class="caution" v-if="choices.length < 2">
-		<Fa :icon="faExclamationTriangle"/>{{ $ts._poll.noOnlyOneChoice }}
+		<i class="fas fa-exclamation-triangle"></i>{{ $ts._poll.noOnlyOneChoice }}
 	</p>
 	<ul ref="choices">
 		<li v-for="(choice, i) in choices" :key="i">
@@ -9,7 +9,7 @@
 				<span>{{ $t('_poll.choiceN', { n: i + 1 }) }}</span>
 			</MkInput>
 			<button @click="remove(i)" class="_button">
-				<Fa :icon="faTimes"/>
+				<i class="fas fa-times"></i>
 			</button>
 		</li>
 	</ul>
@@ -50,7 +50,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { addTime } from '../../prelude/time';
 import { formatDateTimeString } from '@/misc/format-time-string';
 import MkInput from './ui/input.vue';
@@ -84,7 +83,6 @@ export default defineComponent({
 			atTime: '00:00',
 			after: 0,
 			unit: 'second',
-			faExclamationTriangle, faTimes
 		};
 	},
 
@@ -190,7 +188,7 @@ export default defineComponent({
 		font-size: 0.8em;
 		color: #f00;
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 		}
 	}

src/client/components/poll.vue

@@ -4,7 +4,7 @@
 		<li v-for="(choice, i) in poll.choices" :key="i" @click="vote(i)" :class="{ voted: choice.voted }">
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
-				<template v-if="choice.isVoted"><Fa :icon="faCheck"/></template>
+				<template v-if="choice.isVoted"><i class="fas fa-check"></i></template>
 				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
 				<span class="votes" v-if="showResult">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
 			</span>
@@ -23,7 +23,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { sum } from '../../prelude/array';
 import * as os from '@client/os';
 
@@ -38,7 +37,6 @@ export default defineComponent({
 		return {
 			remaining: -1,
 			showResult: false,
-			faCheck
 		};
 	},
 	computed: {
@@ -135,7 +133,7 @@ export default defineComponent({
 			> span {
 				position: relative;
 
-				> [data-icon] {
+				> i {
 					margin-right: 4px;
 				}
 

src/client/components/post-form-attaches.vue

@@ -5,7 +5,7 @@
 			<div @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
 				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
 				<div class="sensitive" v-if="element.isSensitive">
-					<Fa class="icon" :icon="faExclamationTriangle"/>
+					<i class="fas fa-exclamation-triangle icon"></i>
 				</div>
 			</div>
 		</template>
@@ -16,8 +16,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
-import { faExclamationTriangle, faICursor } from '@fortawesome/free-solid-svg-icons';
 import MkDriveFileThumbnail from './drive-file-thumbnail.vue'
 import * as os from '@client/os';
 
@@ -44,7 +42,6 @@ export default defineComponent({
 		return {
 			menu: null as Promise<null> | null,
 
-			faExclamationTriangle
 		};
 	},
 
@@ -100,11 +97,11 @@ export default defineComponent({
 				action: () => { this.rename(file) }
 			}, {
 				text: file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
-				icon: file.isSensitive ? faEyeSlash : faEye,
+				icon: file.isSensitive ? 'fas fa-eye-slash' : 'fas fa-eye',
 				action: () => { this.toggleSensitive(file) }
 			}, {
 				text: this.$ts.attachCancel,
-				icon: faTimesCircle,
+				icon: 'fas fa-times-circle',
 				action: () => { this.detachMedia(file.id) }
 			}], ev.currentTarget || ev.target).then(() => this.menu = null);
 		}

src/client/components/post-form.vue

@@ -7,44 +7,45 @@
 	@drop.stop="onDrop"
 >
 	<header>
-		<button v-if="!fixed" class="cancel _button" @click="cancel"><Fa :icon="faTimes"/></button>
+		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="fas fa-times"></i></button>
 		<div>
 			<span class="text-count" :class="{ over: textLength > max }">{{ max - textLength }}</span>
-			<span class="local-only" v-if="localOnly"><Fa :icon="faBiohazard"/></span>
+			<span class="local-only" v-if="localOnly"><i class="fas fa-biohazard"></i></span>
 			<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$ts.visibility" :disabled="channel != null">
-				<span v-if="visibility === 'public'"><Fa :icon="faGlobe"/></span>
+				<span v-if="visibility === 'public'"><i class="fas fa-globe"></i></span>
-				<span v-if="visibility === 'home'"><Fa :icon="faHome"/></span>
+				<span v-if="visibility === 'home'"><i class="fas fa-home"></i></span>
-				<span v-if="visibility === 'followers'"><Fa :icon="faUnlock"/></span>
+				<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
-				<span v-if="visibility === 'specified'"><Fa :icon="faEnvelope"/></span>
+				<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
 			</button>
-			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<Fa :icon="reply ? faReply : renote ? faQuoteRight : faPaperPlane"/></button>
+			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
 		<XNotePreview class="preview" v-if="reply" :note="reply"/>
 		<XNotePreview class="preview" v-if="renote" :note="renote"/>
-		<div class="with-quote" v-if="quoteId"><Fa icon="quote-left"/> {{ $ts.quoteAttached }}<button @click="quoteId = null"><Fa icon="times"/></button></div>
+		<div class="with-quote" v-if="quoteId"><i class="fas fa-quote-left"></i> {{ $ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
 		<div v-if="visibility === 'specified'" class="to-specified">
 			<span style="margin-right: 8px;">{{ $ts.recipient }}</span>
 			<div class="visibleUsers">
 				<span v-for="u in visibleUsers" :key="u.id">
 					<MkAcct :user="u"/>
-					<button class="_button" @click="removeVisibleUser(u)"><Fa :icon="faTimes"/></button>
+					<button class="_button" @click="removeVisibleUser(u)"><i class="fas fa-times"></i></button>
 				</span>
-				<button @click="addVisibleUser" class="_buttonPrimary"><Fa :icon="faPlus" fixed-width/></button>
+				<button @click="addVisibleUser" class="_buttonPrimary"><i class="fas fa-plus fa-fw"></i></button>
 			</div>
 		</div>
+		<MkInfo warn v-if="hasNotSpecifiedMentions" class="hasNotSpecifiedMentions">{{ $ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ $ts.add }}</button></MkInfo>
 		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
 		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd" />
 		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
 		<footer>
-			<button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><Fa :icon="faPhotoVideo"/></button>
+			<button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><i class="fas fa-photo-video"></i></button>
-			<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><Fa :icon="faPollH"/></button>
+			<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
-			<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><Fa :icon="faEyeSlash"/></button>
+			<button class="_button" @click="useCw = !useCw" :class="{ active: useCw }" v-tooltip="$ts.useCw"><i class="fas fa-eye-slash"></i></button>
-			<button class="_button" @click="insertMention" v-tooltip="$ts.mention"><Fa :icon="faAt"/></button>
+			<button class="_button" @click="insertMention" v-tooltip="$ts.mention"><i class="fas fa-at"></i></button>
-			<button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><Fa :icon="faLaughSquint"/></button>
+			<button class="_button" @click="insertEmoji" v-tooltip="$ts.emoji"><i class="fas fa-laugh-squint"></i></button>
-			<button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><Fa :icon="faPlug"/></button>
+			<button class="_button" @click="showActions" v-tooltip="$ts.plugin" v-if="postFormActions.length > 0"><i class="fas fa-plug"></i></button>
 		</footer>
 	</div>
 </div>
@@ -52,8 +53,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
-import { faEyeSlash, faLaughSquint } from '@fortawesome/free-regular-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { length } from 'stringz';
 import { toASCII } from 'punycode/';
@@ -71,12 +70,14 @@ import { selectFile } from '@client/scripts/select-file';
 import { notePostInterruptors, postFormActions } from '@client/store';
 import { isMobile } from '@client/scripts/is-mobile';
 import { throttle } from 'throttle-debounce';
+import MkInfo from '@client/components/ui/info.vue';
 
 export default defineComponent({
 	components: {
 		XNotePreview,
 		XPostFormAttaches: defineAsyncComponent(() => import('./post-form-attaches.vue')),
-		XPollEditor: defineAsyncComponent(() => import('./poll-editor.vue'))
+		XPollEditor: defineAsyncComponent(() => import('./poll-editor.vue')),
+		MkInfo,
 	},
 
 	inject: ['modal'],
@@ -143,6 +144,7 @@ export default defineComponent({
 			autocomplete: null,
 			draghover: false,
 			quoteId: null,
+			hasNotSpecifiedMentions: false,
 			recentHashtags: JSON.parse(localStorage.getItem('hashtags') || '[]'),
 			imeText: '',
 			typing: throttle(3000, () => {
@@ -151,7 +153,6 @@ export default defineComponent({
 				}
 			}),
 			postFormActions,
-			faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faEyeSlash, faLaughSquint, faPlus, faPhotoVideo, faAt, faBiohazard, faPlug
 		};
 	},
 
@@ -214,6 +215,18 @@ export default defineComponent({
 		}
 	},
 
+	watch: {
+		text() {
+			this.checkMissingMention();
+		},
+		visibleUsers: {
+			handler() {
+				this.checkMissingMention();
+			},
+			deep: true
+		}
+	},
+
 	mounted() {
 		if (this.initialText) {
 			this.text = this.initialText;
@@ -338,6 +351,32 @@ export default defineComponent({
 			this.$watch('localOnly', () => this.saveDraft());
 		},
 
+		checkMissingMention() {
+			if (this.visibility === 'specified') {
+				const ast = mfm.parse(this.text);
+
+				for (const x of extractMentions(ast)) {
+					if (!this.visibleUsers.some(u => (u.username === x.username) && (u.host == x.host))) {
+						this.hasNotSpecifiedMentions = true;
+						return;
+					}
+				}
+				this.hasNotSpecifiedMentions = false;
+			}
+		},
+
+		addMissingMention() {
+			const ast = mfm.parse(this.text);
+
+			for (const x of extractMentions(ast)) {
+				if (!this.visibleUsers.some(u => (u.username === x.username) && (u.host == x.host))) {
+					os.api('users/show', { username: x.username, host: x.host }).then(user => {
+						this.visibleUsers.push(user);
+					});
+				}
+			}
+		},
+
 		togglePoll() {
 			if (this.poll) {
 				this.poll = null;
@@ -682,7 +721,7 @@ export default defineComponent({
 					opacity: 0.7;
 				}
 
-				> [data-icon] {
+				> i {
 					margin-left: 6px;
 				}
 			}
@@ -741,6 +780,10 @@ export default defineComponent({
 			}
 		}
 
+		> .hasNotSpecifiedMentions {
+			margin: 0 20px 16px 20px;
+		}
+
 		> .cw,
 		> .text {
 			display: block;

src/client/components/remote-caution.vue

@@ -1,10 +1,9 @@
 <template>
-<div class="jmgmzlwq _block"><Fa :icon="faExclamationTriangle" style="margin-right: 8px;"/>{{ $ts.remoteUserCaution }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
+<div class="jmgmzlwq _block"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>{{ $ts.remoteUserCaution }}<a :href="href" rel="nofollow noopener" target="_blank">{{ $ts.showOnRemote }}</a></div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -16,7 +15,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faExclamationTriangle
 		};
 	}
 });

src/client/components/signin.vue

@@ -10,7 +10,7 @@
 			</MkInput>
 			<MkInput v-model:value="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
 				<span>{{ $ts.password }}</span>
-				<template #prefix><Fa :icon="faLock"/></template>
+				<template #prefix><i class="fas fa-lock"></i></template>
 			</MkInput>
 			<MkButton type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
 		</div>
@@ -28,20 +28,20 @@
 				<p style="margin-bottom:0;">{{ $ts.twoStepAuthentication }}</p>
 				<MkInput v-model:value="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
 					<span>{{ $ts.password }}</span>
-					<template #prefix><Fa :icon="faLock"/></template>
+					<template #prefix><i class="fas fa-lock"></i></template>
 				</MkInput>
 				<MkInput v-model:value="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required>
 					<span>{{ $ts.token }}</span>
-					<template #prefix><Fa :icon="faGavel"/></template>
+					<template #prefix><i class="fas fa-gavel"></i></template>
 				</MkInput>
 				<MkButton type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? $ts.loggingIn : $ts.login }}</MkButton>
 			</div>
 		</div>
 	</div>
 	<div class="social _section">
-		<a class="_borderButton _gap" v-if="meta && meta.enableTwitterIntegration" :href="`${apiUrl}/signin/twitter`"><Fa :icon="faTwitter" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
+		<a class="_borderButton _gap" v-if="meta && meta.enableTwitterIntegration" :href="`${apiUrl}/signin/twitter`"><i class="fab fa-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
-		<a class="_borderButton _gap" v-if="meta && meta.enableGithubIntegration" :href="`${apiUrl}/signin/github`"><Fa :icon="faGithub" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
+		<a class="_borderButton _gap" v-if="meta && meta.enableGithubIntegration" :href="`${apiUrl}/signin/github`"><i class="fab fa-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
-		<a class="_borderButton _gap" v-if="meta && meta.enableDiscordIntegration" :href="`${apiUrl}/signin/discord`"><Fa :icon="faDiscord" style="margin-right: 4px;"/>{{ $t('signinWith', { x: 'Discord' }) }}</a>
+		<a class="_borderButton _gap" v-if="meta && meta.enableDiscordIntegration" :href="`${apiUrl}/signin/discord`"><i class="fab fa-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
 	</div>
 </form>
 </template>
@@ -49,8 +49,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode/';
-import { faLock, faGavel } from '@fortawesome/free-solid-svg-icons';
-import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import MkButton from './ui/button.vue';
 import MkInput from './ui/input.vue';
 import { apiUrl, host } from '@client/config';
@@ -92,7 +90,6 @@ export default defineComponent({
 			credential: null,
 			challengeData: null,
 			queryingKey: false,
-			faLock, faGavel, faTwitter, faDiscord, faGithub
 		};
 	},
 

src/client/components/signup.vue

@@ -3,37 +3,37 @@
 	<template v-if="meta">
 		<MkInput v-if="meta.disableRegistration" v-model:value="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
 			<span>{{ $ts.invitationCode }}</span>
-			<template #prefix><Fa :icon="faKey"/></template>
+			<template #prefix><i class="fas fa-key"></i></template>
 		</MkInput>
 		<MkInput v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @update:value="onChangeUsername">
 			<span>{{ $ts.username }}</span>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 			<template #desc>
-				<span v-if="usernameState == 'wait'" style="color:#999"><Fa :icon="faSpinner" pulse fixed-width/> {{ $ts.checking }}</span>
+				<span v-if="usernameState == 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ $ts.checking }}</span>
-				<span v-if="usernameState == 'ok'" style="color:#3CB7B5"><Fa :icon="faCheck" fixed-width/> {{ $ts.available }}</span>
+				<span v-if="usernameState == 'ok'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.available }}</span>
-				<span v-if="usernameState == 'unavailable'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.unavailable }}</span>
+				<span v-if="usernameState == 'unavailable'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.unavailable }}</span>
-				<span v-if="usernameState == 'error'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.error }}</span>
+				<span v-if="usernameState == 'error'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.error }}</span>
-				<span v-if="usernameState == 'invalid-format'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.usernameInvalidFormat }}</span>
+				<span v-if="usernameState == 'invalid-format'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.usernameInvalidFormat }}</span>
-				<span v-if="usernameState == 'min-range'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.tooShort }}</span>
+				<span v-if="usernameState == 'min-range'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooShort }}</span>
-				<span v-if="usernameState == 'max-range'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.tooLong }}</span>
+				<span v-if="usernameState == 'max-range'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.tooLong }}</span>
 			</template>
 		</MkInput>
 		<MkInput v-model:value="password" type="password" :autocomplete="Math.random()" required @update:value="onChangePassword">
 			<span>{{ $ts.password }}</span>
-			<template #prefix><Fa :icon="faLock"/></template>
+			<template #prefix><i class="fas fa-lock"></i></template>
 			<template #desc>
-				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.weakPassword }}</p>
+				<p v-if="passwordStrength == 'low'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.weakPassword }}</p>
-				<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><Fa :icon="faCheck" fixed-width/> {{ $ts.normalPassword }}</p>
+				<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.normalPassword }}</p>
-				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><Fa :icon="faCheck" fixed-width/> {{ $ts.strongPassword }}</p>
+				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.strongPassword }}</p>
 			</template>
 		</MkInput>
 		<MkInput v-model:value="retypedPassword" type="password" :autocomplete="Math.random()" required @update:value="onChangePasswordRetype">
 			<span>{{ $ts.password }} ({{ $ts.retype }})</span>
-			<template #prefix><Fa :icon="faLock"/></template>
+			<template #prefix><i class="fas fa-lock"></i></template>
 			<template #desc>
-				<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><Fa :icon="faCheck" fixed-width/> {{ $ts.passwordMatched }}</p>
+				<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><i class="fas fa-check fa-fw"></i> {{ $ts.passwordMatched }}</p>
-				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><Fa :icon="faExclamationTriangle" fixed-width/> {{ $ts.passwordNotMatched }}</p>
+				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ $ts.passwordNotMatched }}</p>
 			</template>
 		</MkInput>
 		<label v-if="meta.tosUrl" class="tou">
@@ -45,7 +45,7 @@
 			</I18n>
 		</label>
 		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model:value="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
-		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="grecaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
+		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="recaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
 		<MkButton type="submit" :disabled="shouldDisableSubmitting" primary>{{ $ts.start }}</MkButton>
 	</template>
 </form>
@@ -53,7 +53,6 @@
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from 'vue';
-import { faLock, faExclamationTriangle, faSpinner, faCheck, faKey } from '@fortawesome/free-solid-svg-icons';
 const getPasswordStrength = require('syuilo-password-strength');
 import { toUnicode } from 'punycode/';
 import { host, url } from '@client/config';
@@ -96,7 +95,6 @@ export default defineComponent({
 			ToSAgreement: false,
 			hCaptchaResponse: null,
 			reCaptchaResponse: null,
-			faLock, faExclamationTriangle, faSpinner, faCheck, faKey
 		}
 	},
 

src/client/components/sub-note-content.vue

@@ -3,7 +3,7 @@
 	<div class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ $ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ $ts.deleted }})</span>
-		<MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><Fa :icon="faReply"/></MkA>
+		<MkA class="reply" v-if="note.replyId" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 		<MkA class="rp" v-if="note.renoteId" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
@@ -20,7 +20,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faReply } from '@fortawesome/free-solid-svg-icons';
 import XPoll from './poll.vue';
 import XMediaList from './media-list.vue';
 import * as os from '@client/os';
@@ -38,7 +37,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faReply
 		};
 	}
 });

src/client/components/tab.vue

@@ -29,6 +29,7 @@ export default defineComponent({
 <style lang="scss">
 .pxhvhrfw {
 	display: flex;
+	font-size: 90%;
 
 	> button {
 		flex: 1;

src/client/components/taskmanager.vue

@@ -1,7 +1,7 @@
 <template>
 <XWindow ref="window" :initial-width="650" :initial-height="420" :can-resize="true" @closed="$emit('closed')">
 	<template #header>
-		<Fa :icon="faTerminal" style="margin-right: 0.5em;"/>Task Manager
+		<i class="fas fa-terminal" style="margin-right: 0.5em;"></i>Task Manager
 	</template>
 	<div class="qljqmnzj _monospace">
 		<MkTab v-model:value="tab" style="border-bottom: solid 0.5px var(--divider);">
@@ -78,7 +78,6 @@
 
 <script lang="ts">
 import { defineComponent, markRaw, onBeforeUnmount, ref, shallowRef } from 'vue';
-import { faTerminal } from '@fortawesome/free-solid-svg-icons';
 import XWindow from '@client/components/ui/window.vue';
 import MkTab from '@client/components/tab.vue';
 import MkButton from '@client/components/ui/button.vue';
@@ -139,7 +138,6 @@ export default defineComponent({
 			pools,
 			killPopup,
 			showReq,
-			faTerminal,
 		};
 	},
 });

src/client/components/timeline.vue

@@ -1,5 +1,5 @@
 <template>
-<XNotes :class="{ _noGap_: !$store.state.showGapBetweenNotesInTimeline }" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
+<XNotes :no-gap="!$store.state.showGapBetweenNotesInTimeline" ref="tl" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)" @queue="$emit('queue', $event)"/>
 </template>
 
 <script lang="ts">

src/client/components/ui/container.vue

@@ -4,9 +4,9 @@
 		<div class="title"><slot name="header"></slot></div>
 		<div class="sub">
 			<slot name="func"></slot>
-			<button class="_button" v-if="bodyTogglable" @click="() => showBody = !showBody">
+			<button class="_button" v-if="foldable" @click="() => showBody = !showBody">
-				<template v-if="showBody"><Fa :icon="faAngleUp"/></template>
+				<template v-if="showBody"><i class="fas fa-angle-up"></i></template>
-				<template v-else><Fa :icon="faAngleDown"/></template>
+				<template v-else><i class="fas fa-angle-down"></i></template>
 			</button>
 		</div>
 	</header>
@@ -16,8 +16,11 @@
 		@leave="leave"
 		@after-leave="afterLeave"
 	>
-		<div v-show="showBody">
+		<div v-show="showBody" class="content" :class="{ omitted }" ref="content">
 			<slot></slot>
+			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
+				<span>{{ $ts.showMore }}</span>
+			</button>
 		</div>
 	</transition>
 </div>
@@ -25,7 +28,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -39,7 +41,7 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
-		bodyTogglable: {
+		foldable: {
 			type: Boolean,
 			required: false,
 			default: false
@@ -54,11 +56,17 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		maxHeight: {
+			type: Number,
+			required: false,
+			default: null
+		},
 	},
 	data() {
 		return {
 			showBody: this.expanded,
-			faAngleUp, faAngleDown
+			omitted: null,
+			ignoreOmit: false,
 		};
 	},
 	mounted() {
@@ -73,10 +81,23 @@ export default defineComponent({
 		}, {
 			immediate: true
 		});
+
+		this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
+
+		const calcOmit = () => {
+			if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
+			const height = this.$refs.content.offsetHeight;
+			this.omitted = height > this.maxHeight;
+		};
+
+		calcOmit();
+		new ResizeObserver((entries, observer) => {
+			calcOmit();
+		}).observe(this.$refs.content);
 	},
 	methods: {
 		toggleContent(show: boolean) {
-			if (!this.bodyTogglable) return;
+			if (!this.foldable) return;
 			this.showBody = show;
 		},
 
@@ -127,7 +148,7 @@ export default defineComponent({
 		display: flex;
 		flex-direction: column;
 
-		> div {
+		> .content {
 			overflow: auto;
 		}
 	}
@@ -146,7 +167,7 @@ export default defineComponent({
 			margin: 0;
 			padding: 12px 16px;
 
-			> ::v-deep([data-icon]) {
+			> ::v-deep(i) {
 				margin-right: 6px;
 			}
 
@@ -169,12 +190,35 @@ export default defineComponent({
 		}
 	}
 
-	> div {
+	> .content {
-		> ::v-deep(._content) {
+		&.omitted {
-			padding: 24px;
+			position: relative;
+			max-height: var(--maxHeight);
+			overflow: hidden;
 
-			& + ._content {
+			> .fade {
-				border-top: solid 0.5px var(--divider);
+				display: block;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				height: 64px;
+				background: linear-gradient(0deg, var(--panel), var(--X15));
+
+				> span {
+					display: inline-block;
+					background: var(--panel);
+					padding: 6px 10px;
+					font-size: 0.8em;
+					border-radius: 999px;
+					box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+				}
+
+				&:hover {
+					> span {
+						background: var(--panelHighlight);
+					}
+				}
 			}
 		}
 	}
@@ -187,10 +231,7 @@ export default defineComponent({
 			}
 		}
 
-		> div {
+		> .content {
-			> ::v-deep(._content) {
-				padding: 16px;
-			}
 		}
 	}
 }

src/client/components/ui/folder.vue

@@ -4,8 +4,8 @@
 		<div class="title"><slot name="header"></slot></div>
 		<div class="divider"></div>
 		<button class="_button">
-			<template v-if="showBody"><Fa :icon="faAngleUp"/></template>
+			<template v-if="showBody"><i class="fas fa-angle-up"></i></template>
-			<template v-else><Fa :icon="faAngleDown"/></template>
+			<template v-else><i class="fas fa-angle-down"></i></template>
 		</button>
 	</header>
 	<transition name="folder-toggle"
@@ -23,7 +23,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
 const localStoragePrefix = 'ui:folder:';
 
@@ -43,7 +42,6 @@ export default defineComponent({
 	data() {
 		return {
 			showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
-			faAngleUp, faAngleDown
 		};
 	},
 	watch: {
@@ -109,7 +107,7 @@ export default defineComponent({
 			margin: 0;
 			padding: 12px 16px 12px 0;
 
-			> [data-icon] {
+			> i {
 				margin-right: 6px;
 			}
 

src/client/components/ui/info.vue

@@ -1,14 +1,13 @@
 <template>
 <div class="fpezltsf" :class="{ warn }">
-	<i v-if="warn"><Fa :icon="faExclamationTriangle"/></i>
+	<i v-if="warn" class="fas fa-exclamation-triangle"></i>
-	<i v-else><Fa :icon="faInfoCircle"/></i>
+	<i v-else class="fas fa-info-circle"></i>
 	<slot></slot>
 </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faInfoCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -21,7 +20,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			faInfoCircle, faExclamationTriangle
 		};
 	}
 });

src/client/components/ui/input.vue

@@ -5,7 +5,7 @@
 		<span class="label" ref="labelEl"><slot></slot></span>
 		<span class="title" ref="title">
 			<slot name="title"></slot>
-			<span class="warning" v-if="invalid"><Fa :icon="faExclamationCircle"/>{{ $refs.input.validationMessage }}</span>
+			<span class="warning" v-if="invalid"><i class="fas fa-exclamation-circle"></i>{{ $refs.input.validationMessage }}</span>
 		</span>
 		<div class="prefix" ref="prefixEl"><slot name="prefix"></slot></div>
 		<input v-if="debounce" ref="inputEl"
@@ -56,7 +56,6 @@
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
 import debounce from 'v-debounce';
-import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 import * as os from '@client/os';
 
 export default defineComponent({
@@ -205,7 +204,6 @@ export default defineComponent({
 			focus,
 			onInput,
 			onKeydown,
-			faExclamationCircle,
 		};
 	},
 });

src/client/components/ui/menu.vue

@@ -13,25 +13,25 @@
 			<span><MkEllipsis/></span>
 		</span>
 		<MkA v-else-if="item.type === 'link'" :to="item.to" @click.passive="close()" :tabindex="i" class="_button item">
-			<Fa v-if="item.icon" :icon="item.icon" fixed-width/>
+			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 			<span>{{ item.text }}</span>
-			<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</MkA>
 		<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item">
-			<Fa v-if="item.icon" :icon="item.icon" fixed-width/>
+			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<span>{{ item.text }}</span>
-			<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</a>
 		<button v-else-if="item.type === 'user'" @click="clicked(item.action, $event)" :tabindex="i" class="_button item">
 			<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
-			<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
 		<button v-else @click="clicked(item.action, $event)" :tabindex="i" class="_button item" :class="{ danger: item.danger }">
-			<Fa v-if="item.icon" :icon="item.icon" fixed-width/>
+			<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
 			<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 			<span>{{ item.text }}</span>
-			<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
+			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
 	</template>
 	<span v-if="_items.length === 0" class="none item">
@@ -42,7 +42,6 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { faCircle } from '@fortawesome/free-solid-svg-icons';
 import { focusPrev, focusNext } from '@client/scripts/focus';
 import contains from '@client/scripts/contains';
 
@@ -65,7 +64,6 @@ export default defineComponent({
 	data() {
 		return {
 			_items: [],
-			faCircle,
 		};
 	},
 	computed: {
@@ -207,7 +205,7 @@ export default defineComponent({
 			opacity: 0.7;
 		}
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 			width: 20px;
 		}
@@ -218,7 +216,7 @@ export default defineComponent({
 			height: 20px;
 		}
 
-		> i {
+		> .indicator {
 			position: absolute;
 			top: 5px;
 			left: 13px;

src/client/components/ui/modal-window.vue

@@ -2,12 +2,12 @@
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
 	<div class="ebkgoccj _popup _narrow_" @keydown="onKeydown" :style="{ width: `${width}px`, height: scroll ? (height ? `${height}px` : null) :  (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header">
-			<button class="_button" v-if="withOkButton" @click="$emit('close')"><Fa :icon="faTimes"/></button>
+			<button class="_button" v-if="withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
 			<span class="title">
 				<slot name="header"></slot>
 			</span>
-			<button class="_button" v-if="!withOkButton" @click="$emit('close')"><Fa :icon="faTimes"/></button>
+			<button class="_button" v-if="!withOkButton" @click="$emit('close')"><i class="fas fa-times"></i></button>
-			<button class="_button" v-if="withOkButton" @click="$emit('ok')" :disabled="okButtonDisabled"><Fa :icon="faCheck"/></button>
+			<button class="_button" v-if="withOkButton" @click="$emit('ok')" :disabled="okButtonDisabled"><i class="fas fa-check"></i></button>
 		</div>
 		<div class="body" v-if="padding">
 			<div class="_section">
@@ -23,7 +23,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
 import MkModal from './modal.vue';
 
 export default defineComponent({
@@ -72,7 +71,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faTimes, faCheck
 		};
 	},
 

src/client/components/ui/pagination.vue

@@ -1,16 +1,23 @@
 <template>
-<div class="cxiknjgy">
+<transition name="fade" mode="out-in">
-	<slot :items="items"></slot>
+	<MkLoading v-if="fetching"/>
-	<div class="empty" v-if="empty" key="_empty_">
+
+	<MkError v-else-if="error" @retry="init()"/>
+
+	<div class="empty" v-else-if="empty" key="_empty_">
 		<slot name="empty"></slot>
 	</div>
-	<div class="more" v-show="more" key="_more_">
+
-		<MkButton class="button" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
+	<div v-else class="cxiknjgy">
-			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
+		<slot :items="items"></slot>
-			<template v-if="moreFetching"><MkLoading inline/></template>
+		<div class="more" v-show="more" key="_more_">
-		</MkButton>
+			<MkButton class="button" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
+				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
+				<template v-if="moreFetching"><MkLoading inline/></template>
+			</MkButton>
+		</div>
 	</div>
-</div>
+</transition>
 </template>
 
 <script lang="ts">
@@ -36,6 +43,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
 .cxiknjgy {
 	> .more > .button {
 		margin-left: auto;

src/client/components/ui/select.vue

@@ -15,7 +15,7 @@
 		</select>
 		<div class="suffix">
 			<slot name="suffix">
-				<Fa :icon="faChevronDown"/>
+				<i class="fas fa-chevron-down"></i>
 			</slot>
 		</div>
 	</div>
@@ -25,7 +25,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -49,7 +48,6 @@ export default defineComponent({
 	data() {
 		return {
 			focused: false,
-			faChevronDown,
 		};
 	},
 	computed: {

src/client/components/ui/tooltip.vue

@@ -39,7 +39,7 @@ export default defineComponent({
 			const contentHeight = this.$refs.content.offsetHeight;
 
 			let left = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
-			let top = rect.top + window.pageYOffset + this.source.offsetHeight;
+			let top = rect.top + window.pageYOffset - contentHeight;
 
 			left -= (this.$el.offsetWidth / 2);
 
@@ -47,9 +47,9 @@ export default defineComponent({
 				left = window.innerWidth - contentWidth + window.pageXOffset - 1;
 			}
 
-			if (top + contentHeight - window.pageYOffset > window.innerHeight) {
+			if (top - window.pageYOffset < 0) {
-				top = rect.top + window.pageYOffset - contentHeight;
+				top = rect.top + window.pageYOffset + this.source.offsetHeight;
-				this.$refs.content.style.transformOrigin = 'center bottom';
+				this.$refs.content.style.transformOrigin = 'center top';
 			}
 
 			this.$el.style.left = left + 'px';
@@ -81,6 +81,6 @@ export default defineComponent({
 	text-align: center;
 	border-radius: 4px;
 	pointer-events: none;
-	transform-origin: center top;
+	transform-origin: center bottom;
 }
 </style>

src/client/components/ui/window.vue

@@ -4,13 +4,13 @@
 		<div class="body _popup _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
 			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
 				<slot v-if="closeRight" name="buttons"><button class="_button" style="pointer-events: none;"></button></slot>
-				<button v-else class="_button" @click="close()"><Fa :icon="faTimes"/></button>
+				<button v-else class="_button" @click="close()"><i class="fas fa-times"></i></button>
 
 				<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
 					<slot name="header"></slot>
 				</span>
 
-				<button v-if="closeRight" class="_button" @click="close()"><Fa :icon="faTimes"/></button>
+				<button v-if="closeRight" class="_button" @click="close()"><i class="fas fa-times"></i></button>
 				<slot v-else name="buttons"><button class="_button" style="pointer-events: none;"></button></slot>
 			</div>
 			<div class="body" v-if="padding">
@@ -38,7 +38,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
 import contains from '@client/scripts/contains';
 import * as os from '@client/os';
 
@@ -114,7 +113,6 @@ export default defineComponent({
 		return {
 			showing: true,
 			id: Math.random().toString(), // TODO: UUIDとかにする
-			faTimes
 		};
 	},
 

src/client/components/url-preview.vue

@@ -1,6 +1,6 @@
 <template>
 <div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
-	<button class="disablePlayer" @click="playerEnabled = false" :title="$ts.disablePlayer"><Fa icon="times"/></button>
+	<button class="disablePlayer" @click="playerEnabled = false" :title="$ts.disablePlayer"><i class="fas fa-times"></i></button>
 	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen />
 </div>
 <div v-else-if="tweetId && tweetExpanded" class="twitter" ref="twitter">
@@ -10,7 +10,7 @@
 	<transition name="zoom" mode="out-in">
 		<component :is="self ? 'MkA' : 'a'" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url" v-if="!fetching">
 			<div class="thumbnail" v-if="thumbnail" :style="`background-image: url('${thumbnail}')`">
-				<button class="_button" v-if="!playerEnabled && player.url" @click.prevent="playerEnabled = true" :title="$ts.enablePlayer"><Fa :icon="faPlayCircle"/></button>
+				<button class="_button" v-if="!playerEnabled && player.url" @click.prevent="playerEnabled = true" :title="$ts.enablePlayer"><i class="fas fa-play-circle"></i></button>
 			</div>
 			<article>
 				<header>
@@ -26,7 +26,7 @@
 	</transition>
 	<div class="expandTweet" v-if="tweetId">
 		<a @click="tweetExpanded = true">
-			<Fa :icon="faTwitter"/> {{ $ts.expandTweet }}
+			<i class="fab fa-twitter"></i> {{ $ts.expandTweet }}
 		</a>
 	</div>
 </div>
@@ -34,8 +34,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
-import { faTwitter } from '@fortawesome/free-brands-svg-icons'; 
 import { url as local, lang } from '@client/config';
 import * as os from '@client/os';
 
@@ -83,7 +81,6 @@ export default defineComponent({
 			self: self,
 			attr: self ? 'to' : 'href',
 			target: self ? null : '_blank',
-			faPlayCircle, faTwitter
 		};
 	},
 

src/client/components/user-info.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="_panel vjnjpkug">
 	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
-	<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+	<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 	<div class="title">
 		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 		<p class="username"><MkAcct :user="user"/></p>

src/client/components/user-list.vue

@@ -9,7 +9,7 @@
 		<MkUserInfo class="user" v-for="user in users" :user="user" :key="user.id"/>
 	</div>
 	<button class="more" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :class="{ fetching: moreFetching }" v-show="more" :disabled="moreFetching">
-		<template v-if="moreFetching"><Fa icon="spinner" pulse fixed-width/></template>{{ moreFetching ? $ts.loading : $ts.loadMore }}
+		<template v-if="moreFetching"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>{{ moreFetching ? $ts.loading : $ts.loadMore }}
 	</button>
 </div>
 </template>
@@ -83,7 +83,7 @@ export default defineComponent({
 			cursor: wait;
 		}
 
-		> [data-icon] {
+		> i {
 			margin-right: 4px;
 		}
 	}

src/client/components/user-online-indicator.vue

@@ -0,0 +1,50 @@
+<template>
+<div class="fzgwjkgc" :class="user.onlineStatus" v-tooltip="text"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		user: {
+			type: Object,
+			required: true
+		},
+	},
+
+	computed: {
+		text(): string {
+			switch (this.user.onlineStatus) {
+				case 'online': return this.$ts.online;
+				case 'active': return this.$ts.active;
+				case 'offline': return this.$ts.offline;
+				case 'unknown': return this.$ts.unknown;
+			}
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.fzgwjkgc {
+	box-shadow: 0 0 0 3px var(--panel);
+	border-radius: 120%; // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
+
+	&.online {
+		background: #58d4c9;
+	}
+
+	&.active {
+		background: #e4bc48;
+	}
+
+	&.offline {
+		background: #ea5353;
+	}
+
+	&.unknown {
+		background: #888;
+	}
+}
+</style>

src/client/components/user-preview.vue

@@ -3,7 +3,7 @@
 	<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ top: top + 'px', left: left + 'px' }" @mouseover="() => { $emit('mouseover'); }" @mouseleave="() => { $emit('mouseleave'); }">
 		<div v-if="fetched" class="info">
 			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
-			<MkAvatar class="avatar" :user="user" :disable-preview="true"/>
+			<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
 			<div class="title">
 				<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 				<p class="username"><MkAcct :user="user"/></p>

src/client/components/user-select-dialog.vue

@@ -17,7 +17,7 @@
 	<div class="tbhwbxda _section result" v-if="username != '' || host != ''" :class="{ hit: users.length > 0 }">
 		<div class="users" v-if="users.length > 0">
 			<div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-				<MkAvatar :user="user" class="avatar"/>
+				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
 				<div class="body">
 					<MkUserName :user="user" class="name"/>
 					<MkAcct :user="user" class="acct"/>
@@ -31,7 +31,7 @@
 	<div class="tbhwbxda _section recent" v-if="username == '' && host == ''">
 		<div class="users">
 			<div class="user" v-for="user in recentUsers" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-				<MkAvatar :user="user" class="avatar"/>
+				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
 				<div class="body">
 					<MkUserName :user="user" class="name"/>
 					<MkAcct :user="user" class="acct"/>
@@ -44,7 +44,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
 import MkInput from './ui/input.vue';
 import XModalWindow from '@client/components/ui/modal-window.vue';
 import * as os from '@client/os';
@@ -67,7 +66,6 @@ export default defineComponent({
 			recentUsers: [],
 			users: [],
 			selected: null,
-			faTimes, faCheck
 		};
 	},
 

src/client/components/users-dialog.vue

@@ -2,12 +2,12 @@
 <div class="mk-users-dialog">
 	<div class="header">
 		<span>{{ title }}</span>
-		<button class="_button" @click="close()"><Fa :icon="faTimes"/></button>
+		<button class="_button" @click="close()"><i class="fas fa-times"></i></button>
 	</div>
 
 	<div class="users">
 		<MkA v-for="item in items" class="user" :key="item.id" :to="userPage(extract ? extract(item) : item)">
-			<MkAvatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true"/>
+			<MkAvatar :user="extract ? extract(item) : item" class="avatar" :disable-link="true" :show-indicator="true"/>
 			<div class="body">
 				<MkUserName :user="extract ? extract(item) : item" class="name"/>
 				<MkAcct :user="extract ? extract(item) : item" class="acct"/>
@@ -16,7 +16,7 @@
 	</div>
 	<button class="more _button" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" v-show="more" :disabled="moreFetching">
 		<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-		<template v-if="moreFetching"><Fa :icon="faSpinner" pulse fixed-width/></template>
+		<template v-if="moreFetching"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
 	</button>
 
 	<p class="empty" v-if="empty">{{ $ts.noUsers }}</p>
@@ -27,7 +27,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import paging from '@client/scripts/paging';
 import { userPage } from '../filters/user';
 
@@ -50,7 +49,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			faTimes
 		};
 	},