13.0.0-rc.4

Resolve #9555

CHANGELOG.md

@@ -18,6 +18,12 @@ You should also include the user name that made the change.
 - Various usability improvements
 - Various UI tweaks
 
+### Notable features
+- ロール機能
+	- 従来より柔軟にユーザーの権限を管理できます。例えば、「インスタンスのパトロンはアンテナを30個まで作れる」「基本的にLTLは見れないが、許可した人だけ見れる」「招待制インスタンスだけどユーザーなら誰でも他者を招待できる」のような運用はもちろん、「ローカルユーザーかつアカウント作成から1日未満のユーザーはパブリックな投稿を行えない」のように複数条件を組み合わせて、自動でロールを付与する設定も可能です。
+- Misskey Play
+	- 従来の動的なPagesに代わる、新しいプラットフォームです。動的なコンテンツ(アプリケーション)に特化していて、Pagesに比べてはるかに柔軟なアプリケーションを作成可能です。
+
 ### Changes
 #### For server admins
 - Node.js 18.x or later is required
@@ -27,12 +33,13 @@ You should also include the user name that made the change.
 	- 代わりに今後任意の検索プロバイダを設定できる仕組みを構想しています。その仕組みを使えば今まで通りElasticsearchも利用できます
 - Migrate to Yarn Berry (v3.2.1) @ThatOneCalculator
 	- You may have to `yarn run clean-all`, `sudo corepack enable` and `yarn set version berry` before running `yarn install` if you're still on yarn classic
-- 従来のモデレーターフラグは廃止され、より高度なロール機能が導入されました
-	- これに伴い、アップデートを行うと全てのモデレーターフラグは失われます。そのため、予めモデレーター一覧を記録しておき、アップデート後にモデレーターロールを作りアサインし直してください。
+- インスタンスブロックはサブドメインにも適用されるようになります
+- ロールの導入に伴い、いくつかの機能がロールと統合されました
+	- モデレーターはロールに統合されました。今までのモデレーター情報は失われるため、予めモデレーター一覧を記録しておき、アップデート後にモデレーターロールを作りアサインし直してください。
 	- サイレンスはロールに統合されました。今までのユーザーは恩赦されるため、予めサイレンス一覧を記録しておくのをおすすめします。
-	- ユーザーごとのドライブ容量設定はロールに統合されました
+	- ユーザーごとのドライブ容量設定はロールに統合されました。
 	- インスタンスデフォルトのドライブ容量設定はロールに統合されました。アップデート後、ベースロールのドライブ容量を編集してください。
-	- LTL/GTLの解放状態はロールに統合されました
+	- LTL/GTLの解放状態はロールに統合されました。
 
 #### For users
 - ノートのウォッチ機能が削除されました
@@ -44,7 +51,8 @@ You should also include the user name that made the change.
 	- 0.12.xの変更点についてはこちら https://github.com/syuilo/aiscript/blob/master/CHANGELOG.md#0120
 	- 0.12.x未満のプラグインは読み込むことはできません
 - iOS15以下のデバイスはサポートされなくなりました
-- Firefox109以下はサポートされなくなりました
+- Firefox110以下はサポートされなくなりました
+  - 109でもContainerQueriesのフラグを有効にする事で問題なく使用できます
 
 #### For app developers
 - API: metaのレスポンスに`emojis`プロパティが含まれなくなりました
@@ -66,11 +74,20 @@ You should also include the user name that made the change.
 - Push notification of Antenna note @tamaina
 - AVIF support @tamaina
 - Add Cloudflare Turnstile CAPTCHA support @CyberRex0
+- 非モデレーターでも、権限を持つロールをアサインされたユーザーはインスタンスの招待コードを発行できるように @syuilo
+- 非モデレーターでも、権限を持つロールをアサインされたユーザーはカスタム絵文字の追加、編集、削除を行えるように @syuilo
+- クリップおよびクリップ内のノートの作成可能数を設定可能に @syuilo
+- ユーザーリストおよびユーザーリスト内のユーザーの作成可能数を設定可能に @syuilo
+- ハードワードミュートの最大文字数を設定可能に @syuilo
+- Webhookの作成可能数を設定可能に @syuilo
+- ノートをピン留めできる数を設定可能に @syuilo
 - Server: signToActivityPubGet is set to true by default @syuilo
 - Server: improve syslog performance @syuilo
 - Server: Use undici instead of node-fetch and got @tamaina
+- Server: Judge instance block by endsWith @tamaina
 - Server: improve note scoring for featured notes @CyberRex0
 - Server: アンケート選択肢の文字数制限を緩和 @syuilo
+- Server: add rate limits for some endpoints @syuilo
 - Server: improve stats api performance @syuilo
 - Server: improve nodeinfo performance @syuilo
 - Server: delete outdated notifications regularly to improve db performance @syuilo
@@ -100,6 +117,7 @@ You should also include the user name that made the change.
 - Client: add heatmap of daily active users to about page @syuilo
 - Client: introduce fluent emoji @syuilo
 - Client: add new theme @syuilo
+- Client: add new mfm function (position, fg, bg) @syuilo
 - Client: show fireworks when visit user who today is birthday @syuilo
 - Client: show bot warning on screen when logged in as bot account @syuilo
 - Client: improve overall performance of client @syuilo
@@ -119,6 +137,8 @@ You should also include the user name that made the change.
 - Server: 特定のPNG画像のアップロードに失敗する問題を修正 @usbharu
 - Server: 非公開のクリップのURLでOGPレンダリングされる問題を修正 @syuilo
 - Server: アンテナタイムライン（ストリーミング）が、フォローしていないユーザーの鍵投稿も拾ってしまう @syuilo
+- Server: follow request list api pagination @sim1222
+- Server: ドライブ容量超過時のエラーが適切にレスポンスされない問題を修正 @syuilo
 - Client: パスワードマネージャーなどでユーザー名がオートコンプリートされない問題を修正 @massongit
 - Client: 日付形式の文字列などがカスタム絵文字として表示されるのを修正 @syuilo
 - Client: case insensitive emoji search @saschanaz

locales/ar-SA.yml

@@ -817,6 +817,7 @@ account: "الحسابات"
 cannotLoad: "تعذر التحميل"
 like: "أعجبني"
 show: "المظهر"
+color: "اللون"
 _emailUnavailable:
   used: "هذا البريد الإلكتروني مستخدم"
   format: "صيغة البريد الإلكتروني غير صالحة"

locales/bn-BD.yml

@@ -853,6 +853,7 @@ localOnly: "শুধুমাত্র লোকাল"
 account: "অ্যাকাউন্টগুলি"
 like: "পছন্দ করা"
 show: "প্রদর্শন"
+color: "রং"
 _emailUnavailable:
   used: "এই ইমেইল ঠিকানাটি ইতোমধ্যে ব্যবহৃত হয়েছে"
   format: "এই ইমেল ঠিকানাটি সঠিকভাবে লিখা হয়নি"

locales/cs-CZ.yml

@@ -611,6 +611,7 @@ slow: "Pomalá"
 fast: "Rychlá"
 account: "Účty"
 show: "Zobrazit"
+color: "Barva"
 _ad:
   back: "Zpět"
 _gallery:

locales/de-DE.yml

@@ -924,6 +924,49 @@ neverShow: "Nicht wieder anzeigen"
 remindMeLater: "Vielleicht später"
 didYouLikeMisskey: "Gefällt dir Misskey?"
 pleaseDonate: "Misskey ist die kostenlose Software, die von {host} verwendet wird. Wir würden uns über Spenden freuen, damit dessen Entwicklung weitergeführt werden kann!"
+roles: "Rollen"
+role: "Rolle"
+normalUser: "Standardbenutzer"
+undefined: "Undefiniert"
+assign: "Zuweisen"
+unassign: "Entfernen"
+color: "Farbe"
+manageCustomEmojis: "Benutzerdefinierte Emojis verwalten"
+_role:
+  new: "Rolle erstellen"
+  edit: "Rolle bearbeiten"
+  name: "Rollenname"
+  description: "Rollenbeschreibung"
+  permission: "Rollenberechtigungen"
+  descriptionOfPermission: "<b>Moderatoren</b> können grundlegende Verwaltungsaufgaben erledigen.\n<b>Administratoren</b> können alle Einstellungen der Instanz verwalten."
+  assignTarget: "Zuweisungsart"
+  descriptionOfAssignTarget: "<b>Manuell</b> bedeutet, dass die Liste der Benutzer einer Rolle manuell verwaltet wird.\n<b>Konditionell</b> bedeutet, dass die Liste der Benutzer einer Rolle durch eine Liste an Konditionen automatisch verwaltet wird."
+  manual: "Manuell"
+  conditional: "Konditional"
+  condition: "Konditionen"
+  isConditionalRole: "Dies ist eine konditionale Rolle."
+  isPublic: "Öffentliche Rolle"
+  descriptionOfIsPublic: "Ist dies aktiviert, so kann jeder die Liste der Benutzer, die dieser Rolle zugewiesen sind, einsehen. Zusätzlich wird diese Rolle im Profil zugewiesener Benutzer angezeigt."
+  options: "Optionen"
+  baseRole: "Rollenvorlage"
+  useBaseValue: "Wert der Rollenvorlage verwenden"
+  chooseRoleToAssign: "Zuzuweisende Rolle auswählen"
+  canEditMembersByModerator: "Moderatoren können Benutzern diese Rolle zuweisen"
+  descriptionOfCanEditMembersByModerator: "Wenn aktiviert, so können Moderatoren und Adminstratoren anderen Benutzern diese Rolle zuweisen bzw. diese Zuweisung aufheben. Wenn deaktiviert, so ist es nur Administratoren möglich, Zuweisungen dieser Rolle zu verwalten."
+  _options:
+    gtlAvailable: "Kann auf die globale Chronik zugreifen"
+    ltlAvailable: "Kann auf die lokale Chronik zugreifen"
+    canPublicNote: "Kann öffentliche Notizen erstellen"
+    canInvite: "Einladungscodes für diese Instanz erstellen"
+    canManageCustomEmojis: "Benutzerdefinierte Emojis verwalten"
+    driveCapacity: "Drive-Kapazität"
+    antennaMax: "Maximale Anzahl an Antennen"
+  _condition:
+    isLocal: "Lokaler Benutzer"
+    isRemote: "Benutzer fremder Instanz"
+    and: "UND"
+    or: "ODER"
+    not: "NICHT"
 _sensitiveMediaDetection:
   description: "Ermöglicht eine Erleichterung der Servermoderation durch die automatische Erkennungen von NSFW-Medien unter Verwendung von Machine Learning. Hierdurch wird die Serverlast etwas erhöht."
   sensitivity: "Erkennungssensitivität"

locales/el-GR.yml

@@ -1,6 +1,6 @@
 ---
 _lang_: "Ελληνικά"
-monthAndDay: "{μήνας}/{ημέρα}"
+monthAndDay: "{day}/{month}"
 search: "Αναζήτηση"
 notifications: "Ειδοποιήσεις"
 username: "Όνομα μέλους"

locales/en-US.yml

@@ -924,6 +924,56 @@ neverShow: "Don't show again"
 remindMeLater: "Maybe later"
 didYouLikeMisskey: "Have you taken a liking to Misskey?"
 pleaseDonate: "{host} uses the free software, Misskey. We would highly appreciate your donations so development of Misskey can continue!"
+roles: "Roles"
+role: "Role"
+normalUser: "Normal user"
+undefined: "Undefined"
+assign: "Assign"
+unassign: "Unassign"
+color: "Color"
+manageCustomEmojis: "Manage Custom Emojis"
+_role:
+  new: "New role"
+  edit: "Edit role"
+  name: "Role name"
+  description: "Role description"
+  permission: "Role permissions"
+  descriptionOfPermission: "<b>Moderators</b> can perform basic moderation operations.\n<b>Administrators</b> can change all settings of the instance."
+  assignTarget: "Assign target"
+  descriptionOfAssignTarget: "<b>Manual</b> to manually change who is part of this role and who is not.\n<b>Conditional</b> to have users be automatically assigned and removed from this role based on a set of conditions."
+  manual: "Manual"
+  conditional: "Conditional"
+  condition: "Conditions"
+  isConditionalRole: "This is a conditional role."
+  isPublic: "Public role"
+  descriptionOfIsPublic: "Anyone will be able to view a list of users assigned to this role. In addition, this role will be displayed in the profiles of assigned users."
+  options: "Role options"
+  baseRole: "Base role"
+  useBaseValue: "Use base role value"
+  chooseRoleToAssign: "Select the role to assign"
+  canEditMembersByModerator: "Allow moderators to edit the list members of this role"
+  descriptionOfCanEditMembersByModerator: "When turned on, moderators as well as administrators will be able to assign and unassign users to this role. When turned off, only administrators will be able to assign users."
+  _options:
+    gtlAvailable: "Viewing the global timeline"
+    ltlAvailable: "Viewing the local timeline"
+    canPublicNote: "Can send public notes"
+    canInvite: "Create instance invite codes"
+    canManageCustomEmojis: "Manage Custom Emojis"
+    driveCapacity: "Drive capacity"
+    antennaMax: "Maximum number of antennas"
+    wordMuteMax: "Maximum number of characters allowed in the word mute string"
+  _condition:
+    isLocal: "Local user"
+    isRemote: "Remote user"
+    createdLessThan: "Created less than"
+    createdMoreThan: "Created more than"
+    followersLessThanOrEq: "The number of followers is less than or equal to"
+    followersMoreThanOrEq: "The number of followers is greater than or equal to"
+    followingLessThanOrEq: "The number of accounts following is less than or equal to"
+    followingMoreThanOrEq: "The number of accounts following is greater than or equal to"
+    and: "AND"
+    or: "OR"
+    not: "NOT"
 _sensitiveMediaDetection:
   description: "Reduces the effort of server moderation through automatically recognizing NSFW media via Machine Learning. This will slightly increase the load on the server."
   sensitivity: "Detection sensitivity"

locales/es-ES.yml

@@ -918,6 +918,7 @@ cannotLoad: "No se puede cargar."
 numberOfProfileView: "Número de vistas de perfil"
 like: "¡Muy bien!"
 show: "Apariencia"
+color: "Color"
 _sensitiveMediaDetection:
   description: "Reduce el esfuerzo de la moderación el el servidor a través del reconocimiento automático de contenido NSFW usando 'Machine Learning'. Esto puede incrementar ligeramente la carga en el servidor."
   sensitivity: "Sensibilidad de detección"

locales/fr-FR.yml

@@ -911,7 +911,11 @@ loggedInAsBot: "Connecté actuellement en tant que bot"
 tools: "Outils"
 cannotLoad: "Chargement impossible"
 like: "J'aime"
+numberOfLikes: "Favoris"
 show: "Affichage"
+neverShow: "Ne plus afficher"
+remindMeLater: "Peut-être plus tard"
+color: "Couleur"
 _sensitiveMediaDetection:
   description: "L'apprentissage automatique peut être utilisé pour détecter automatiquement les médias sensibles à modérer. La sollicitation des serveurs augmente légèrement."
   sensitivity: "Sensibilité de la détection"

locales/id-ID.yml

@@ -859,6 +859,7 @@ like: "Suka"
 unlike: "Tidak Suka"
 numberOfLikes: "Jumlah yang disukai"
 show: "Tampilkan"
+color: "Warna"
 _emailUnavailable:
   used: "Alamat surel ini telah digunakan"
   format: "Format tidak valid."

locales/it-IT.yml

@@ -109,7 +109,7 @@ you: "Tu"
 clickToShow: "Clicca per visualizzare"
 sensitive: "Contenuto sensibile"
 add: "Aggiungi"
-reaction: "Reazione"
+reaction: "Reazioni"
 reactionSetting: "Reazioni visualizzate sul pannello"
 reactionSettingDescription2: "Trascina per riorganizzare, clicca per cancellare, usa il pulsante \"+\" per aggiungere."
 rememberNoteVisibility: "Ricordare le impostazioni di visibilità delle note"
@@ -226,7 +226,7 @@ currentPassword: "Password attuale"
 newPassword: "Nuova Password"
 newPasswordRetype: "Conferma password"
 attachFile: "Allega file"
-more: "Altri!"
+more: "Di più!"
 featured: "Tendenze"
 usernameOrUserId: "Nome utente o ID utente"
 noSuchUser: "Nessun utente trovato"
@@ -512,7 +512,7 @@ newNoteRecived: "Vedi le nuove note"
 sounds: "Impostazioni suoni"
 sound: "Impostazioni suoni"
 listen: "Ascolta"
-none: "Niente"
+none: "Nessuno"
 showInPage: "Visualizza in pagina"
 popout: "Finestra pop-out"
 volume: "Volume"
@@ -578,7 +578,7 @@ useFullReactionPicker: "Usa la totalità del pannello di reazioni"
 width: "Larghezza"
 height: "Altezza"
 large: "Grande"
-medium: "Predefinito"
+medium: "Medio"
 small: "Piccolo"
 generateAccessToken: "Genera token di accesso"
 permission: "Autorizzazioni "
@@ -649,7 +649,7 @@ instanceTicker: "Informazioni sull'istanza da cui vengono le note"
 waitingFor: "Aspettando {x}"
 random: "Casuale"
 system: "Sistema"
-switchUi: "Cambiare interfaccia utente"
+switchUi: "Cambiare interfaccia"
 desktop: "Desktop"
 clip: "Nota"
 createNew: "Crea"
@@ -799,7 +799,7 @@ received: "Ricevuto"
 searchResult: "Risultati della Ricerca"
 hashtags: "Hashtag"
 troubleshooting: "Risoluzione problemi"
-useBlurEffect: "Utilizza effetto sfocatura per l'interfaccia utente"
+useBlurEffect: "Utilizza effetto sfocatura nell'interfaccia"
 learnMore: "Più dettagli"
 misskeyUpdated: "Misskey è stato aggiornato!"
 whatIsNew: "Visualizza le informazioni sull'aggiornamento"
@@ -917,7 +917,58 @@ tools: "Strumenti"
 cannotLoad: "Caricamento impossibile"
 numberOfProfileView: "Visualizzazioni profilo"
 like: "Mi piace!"
+unlike: "Non mi piace"
+numberOfLikes: "Numero di Like"
 show: "Visualizza"
+neverShow: "Non mostrare più"
+remindMeLater: "Rimanda"
+didYouLikeMisskey: "Ti piace Misskey?"
+pleaseDonate: "Misskey è il software libero utilizzato su {host}. Offrendo una donazione è più facile continuare a svilupparlo!"
+roles: "Ruoli"
+role: "Ruolo"
+normalUser: "Profilo standard"
+undefined: "Indefinito"
+assign: "Assegna"
+unassign: "Disassegna"
+color: "Colore"
+manageCustomEmojis: "Gestisci le emoji personalizzate"
+_role:
+  new: "Nuovo ruolo"
+  edit: "Modifica ruolo"
+  name: "Nome del ruolo"
+  description: "Descrizione del ruolo"
+  permission: "Permessi del ruolo"
+  descriptionOfPermission: "<b>Moderatori</b> possono svolgere le attività di moderazione basilari.\n<b>Amministratori</b> possono modificare la configurazione dell'istanza."
+  assignTarget: "Assegna il target"
+  descriptionOfAssignTarget: "<b>Manuale</b> per assegnare manualmente questo ruolo ai profili.\n<b>Condizionale</b> per assegnare o rimuovere automaticamente questo ruolo ai profili, secondo determinate condizioni."
+  manual: "Manuale"
+  conditional: "Condizionale"
+  condition: "Condizioni"
+  isConditionalRole: "Questo è un ruolo condizionato"
+  isPublic: "Ruolo pubblico"
+  descriptionOfIsPublic: "La lista di profili assegnati a questo ruolo è visibile a chiunque. Inoltre, il ruolo verrà mostrato nei relativi profili."
+  options: "Opzioni del ruolo"
+  baseRole: "Ruolo di base"
+  useBaseValue: "Eredita dal ruolo base"
+  chooseRoleToAssign: "Seleziona il ruolo da assegnare"
+  canEditMembersByModerator: "Consenti ai Moderatori di modificare i membri di questo ruolo"
+  descriptionOfCanEditMembersByModerator: "Se attivo, anche i Moderatori potranno assegnare o togliere questo ruolo. Altrimenti, se disattivo, potranno solo gli Amministratori."
+  _options:
+    gtlAvailable: "Disponibilità della Timeline Federata"
+    ltlAvailable: "Disponibilità della Timeline Locale"
+    canPublicNote: "Può scrivere Note con Visibilità Pubblica"
+    canInvite: "Genera codici di invito all'istanza"
+    canManageCustomEmojis: "Gestire le emoji personalizzate"
+    driveCapacity: "Capienza del Drive"
+    antennaMax: "Numero massimo di Antenne"
+  _condition:
+    isLocal: "Profilo locale"
+    isRemote: "Profilo remoto"
+    createdLessThan: "Creato meno di"
+    createdMoreThan: "Creato più di"
+    and: "E"
+    or: "O"
+    not: "NON"
 _sensitiveMediaDetection:
   description: "L'apprendimento automatico può essere utilizzato per individuare automaticamente i media sensibili da moderare. Il carico del server aumenta leggermente."
   sensitivity: "Sensibilità di rilevamento"
@@ -1090,9 +1141,9 @@ _channel:
   usersCount: "{n} partecipanti"
   notesCount: "{n} note"
 _menuDisplay:
-  sideFull: "laro"
-  sideIcon: "Orizzontale (icona)"
-  top: "superficie"
+  sideFull: "Laterale"
+  sideIcon: "Laterale (solo icone)"
+  top: "In alto"
   hide: "Nascondere"
 _wordMute:
   muteWords: "Parole da filtrare"
@@ -1194,10 +1245,10 @@ _ago:
   future: "Futuro"
   justNow: "Ora"
   secondsAgo: "{n}s fa"
-  minutesAgo: "{n}min fa"
+  minutesAgo: "{n} min fa"
   hoursAgo: "{n} ore fa"
-  daysAgo: "{n} giorni fa"
-  weeksAgo: "{n} settimane fa"
+  daysAgo: "{n} gg fa"
+  weeksAgo: "{n} sett. fa"
   monthsAgo: "{n} mesi fa"
   yearsAgo: "{n} anni fa"
 _time:
@@ -1319,10 +1370,12 @@ _widgets:
   jobQueue: "Coda di lavoro"
   serverMetric: "Statistiche server"
   aiscript: "Console AiScript"
+  aiscriptApp: "App AiScript"
   aichan: "Mascotte Ai"
   userList: "Elenco utenti"
   _userList:
     chooseList: "Seleziona una lista"
+  clicker: "Cliccaggio"
 _cw:
   hide: "Nascondere"
   show: "Mostra di più"
@@ -1425,7 +1478,16 @@ _timelines:
   social: "Sociale"
   global: "Federata"
 _play:
+  new: "Crea un Play"
+  edit: "Modifica i Play"
+  created: "Il Play è stato creato"
+  updated: "Il Play è stato aggiornato"
+  deleted: "Il Play è stato eliminato"
+  pageSetting: "Impostazioni di Play"
+  editThisPage: "Modifica il Play"
   viewSource: "Visualizza sorgente"
+  my: "I miei Play"
+  liked: "Play piaciuti"
   featured: "Popolari"
   title: "Titolo"
   script: "Script"

locales/ja-JP.yml

@@ -193,7 +193,7 @@ clearQueueConfirmText: "未配達の投稿は配送されなくなります。
 clearCachedFiles: "キャッシュをクリア"
 clearCachedFilesConfirm: "キャッシュされたリモートファイルをすべて削除しますか？"
 blockedInstances: "ブロックしたインスタンス"
-blockedInstancesDescription: "ブロックしたいインスタンスのホストを改行で区切って設定します。ブロックされたインスタンスは、このインスタンスとやり取りできなくなります。"
+blockedInstancesDescription: "ブロックしたいインスタンスのホストを改行で区切って設定します。ブロックされたインスタンスは、このインスタンスとやり取りできなくなります。サブドメインもブロックされます。"
 muteAndBlock: "ミュートとブロック"
 mutedUsers: "ミュートしたユーザー"
 blockedUsers: "ブロックしたユーザー"
@@ -931,6 +931,8 @@ undefined: "未定義"
 assign: "アサイン"
 unassign: "アサインを解除"
 color: "色"
+manageCustomEmojis: "カスタム絵文字の管理"
+youCannotCreateAnymore: "これ以上作成することはできません。"
 
 _role:
   new: "ロールの作成"
@@ -957,13 +959,26 @@ _role:
     gtlAvailable: "グローバルタイムラインの閲覧"
     ltlAvailable: "ローカルタイムラインの閲覧"
     canPublicNote: "パブリック投稿の許可"
+    canInvite: "インスタンス招待コードの発行"
+    canManageCustomEmojis: "カスタム絵文字の管理"
     driveCapacity: "ドライブ容量"
+    pinMax: "ノートのピン留めの最大数"
     antennaMax: "アンテナの作成可能数"
+    wordMuteMax: "ワードミュートの最大文字数"
+    webhookMax: "Webhookの作成可能数"
+    clipMax: "クリップの作成可能数"
+    noteEachClipsMax: "クリップ内のノートの最大数"
+    userListMax: "ユーザーリストの作成可能数"
+    userEachUserListsMax: "ユーザーリスト内のユーザーの最大数"
   _condition:
     isLocal: "ローカルユーザー"
     isRemote: "リモートユーザー"
     createdLessThan: "アカウント作成から～以内"
     createdMoreThan: "アカウント作成から～経過"
+    followersLessThanOrEq: "フォロワー数が～以下"
+    followersMoreThanOrEq: "フォロワー数が～以上"
+    followingLessThanOrEq: "フォロー数が～以下"
+    followingMoreThanOrEq: "フォロー数が～以上"
     and: "～かつ～"
     or: "～または～"
     not: "～ではない"

locales/ja-KS.yml

@@ -915,8 +915,40 @@ caption: "キャプション"
 loggedInAsBot: "Botアカウントでログイン中やで"
 tools: "ツール"
 cannotLoad: "読み込めへんで"
+numberOfProfileView: "プロフィール表示回数"
 like: "ええやん！"
+unlike: "いいねを解除"
+numberOfLikes: "いいね数"
 show: "表示"
+neverShow: "今後表示しない"
+remindMeLater: "また後で"
+didYouLikeMisskey: "Misskeyを気に入っとっただけましたん？"
+pleaseDonate: "Misskeyは{host}が使用している無料のソフトウェアやで。これからも開発を続けれるように、寄付したってな～。"
+roles: "ロール"
+role: "ロール"
+undefined: "未定義"
+assign: "アサイン"
+unassign: "アサインを解除"
+color: "色"
+_role:
+  new: "ロールの作成"
+  edit: "ロールの編集"
+  name: "ロール名"
+  description: "ロールの説明"
+  isPublic: "ロールを公開"
+  descriptionOfIsPublic: "ロールにアサインされたユーザーを誰でも見ることができるで。そんで、ユーザーのプロフィールでこのロールが表示されるで。"
+  options: "オプション"
+  baseRole: "ベースロール"
+  useBaseValue: "ベースロールの値を使用"
+  chooseRoleToAssign: "アサインするロールを選択"
+  canEditMembersByModerator: "モデレーターのメンバー編集を許可"
+  descriptionOfCanEditMembersByModerator: "オンにすると、管理者に加えてモデレーターもこのロールへユーザーをアサイン/アサイン解除できるようになるで。オフにすると管理者のみが行えるで。"
+  _options:
+    gtlAvailable: "グローバルタイムラインの閲覧"
+    ltlAvailable: "ローカルタイムラインの閲覧"
+    canPublicNote: "パブリック投稿の許可"
+    driveCapacity: "ドライブ容量"
+    antennaMax: "アンテナの作成可能数"
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出して、モデレーションに役立てることができるで。サーバーの負荷が少し増えてまうなあ。"
   sensitivity: "検出感度やで"
@@ -1318,10 +1350,12 @@ _widgets:
   jobQueue: "ジョブキュー"
   serverMetric: "サーバーメトリクス"
   aiscript: "AiScriptコンソール"
+  aiscriptApp: "AiScript App"
   aichan: "藍"
   userList: "ユーザーリスト"
   _userList:
     chooseList: "リストを選ぶ"
+  clicker: "クリッカー"
 _cw:
   hide: "隠す"
   show: "続き見して！"
@@ -1385,6 +1419,7 @@ _profile:
   changeBanner: "バナー画像を変更するで"
 _exportOrImport:
   allNotes: "全てのノート"
+  favoritedNotes: "お気に入りにしたノート"
   followingList: "フォロー"
   muteList: "ミュート"
   blockingList: "ブロック"
@@ -1423,7 +1458,16 @@ _timelines:
   social: "ソーシャル"
   global: "グローバル"
 _play:
+  new: "Playの作成"
+  edit: "Playの編集"
+  created: "Playを作ったで"
+  updated: "Playを更新したで"
+  deleted: "Playを消したで"
+  pageSetting: "Play設定"
+  editThisPage: "このPlayを編集"
   viewSource: "ソースを表示"
+  my: "自分のPlay"
+  liked: "いいねしたPlay"
   featured: "人気"
   title: "タイトル"
   script: "スクリプト"

locales/ko-KR.yml

@@ -15,7 +15,7 @@ gotIt: "알겠어요"
 cancel: "취소"
 noThankYou: "나중에"
 enterUsername: "유저명 입력"
-renotedBy: "{user}님의 리노트"
+renotedBy: "{user}님이 리노트"
 noNotes: "노트가 없습니다"
 noNotifications: "표시할 알림이 없습니다"
 instance: "인스턴스"
@@ -924,6 +924,31 @@ neverShow: "다시 보지 않기"
 remindMeLater: "나중에 알림"
 didYouLikeMisskey: "Misskey가 마음에 드시나요?"
 pleaseDonate: "{host}은(는) 무료 소프트웨어 Misskey를 사용합니다. 후원을 통해 저희의 개발이 이어질 수 있게 도와주세요!"
+roles: "역할"
+role: "역할"
+undefined: "정의되지 않음"
+assign: "할당"
+unassign: "할당 취소"
+color: "색"
+_role:
+  new: "새 역할 생성"
+  edit: "역할 수정"
+  name: "역할 이름"
+  description: "역할 설명"
+  isPublic: "공개 역할"
+  descriptionOfIsPublic: "역할에 할당된 사용자를 누구나 볼 수 있습니다. 또한 사용자 프로필에 이 역할이 표시됩니다."
+  options: "옵션"
+  baseRole: "기본 역할"
+  useBaseValue: "기본값 사용"
+  chooseRoleToAssign: "할당할 역할 선택"
+  canEditMembersByModerator: "모더레이터의 역할 수정 허용"
+  descriptionOfCanEditMembersByModerator: "이 옵션을 켜면 모더레이터도 이 역할에 사용자를 추가하거나 삭제할 수 있습니다. 꺼져 있으면 관리자만 가능합니다."
+  _options:
+    gtlAvailable: "글로벌 타임라인 보이기"
+    ltlAvailable: "로컬 타임라인 보이기"
+    canPublicNote: "공개 노트 허용"
+    driveCapacity: "드라이브 용량"
+    antennaMax: "최대 안테나 생성 허용 수"
 _sensitiveMediaDetection:
   description: "기계학습을 통해 자동으로 민감한 미디어를 탐지하여, 모더레이션에 참고할 수 있도록 합니다. 서버의 부하를 약간 증가시킵니다."
   sensitivity: "탐지 민감도"

locales/pl-PL.yml

@@ -868,6 +868,7 @@ sendPushNotificationReadMessageCaption: "Chwilowo pojawi się powiadomienie \"{e
 loggedInAsBot: "Jesteś obecnie zalogowany/a jako bot"
 like: "Polub"
 show: "Wyświetlanie"
+color: "Kolor"
 _sensitiveMediaDetection:
   description: "Zmniejsza wysiłek związany z moderacją serwera dzięki automatycznemu rozpoznawaniu zawartości NSFW za pomocą uczenia maszynowego. To nieznacznie zwiększy obciążenie serwera."
   setSensitiveFlagAutomatically: "Oznacz jako NSFW"

locales/ru-RU.yml

@@ -866,6 +866,7 @@ windowMaximize: "Развернуть"
 windowRestore: "Восстановить"
 like: "Нравится!"
 show: "Отображение"
+color: "Цвет"
 _sensitiveMediaDetection:
   description: "Машинное обучение может быть использовано для автоматического обнаружения чувствительных медиа для модерации. Нагрузка на сервер увеличивается незначительно."
   setSensitiveFlagAutomatically: "Установить флаг NSFW"

locales/sk-SK.yml

@@ -917,6 +917,7 @@ neverShow: "Nabudúce nezobrazovať"
 remindMeLater: "Pripomenúť neskôr"
 didYouLikeMisskey: "Páči sa vám Misskey?"
 pleaseDonate: "Misskey je bezplatný softvér, ktorý používa {host}. Prosím, prispejte, aby sme ho mohli ďalej rozvíjať!"
+color: "Farba"
 _sensitiveMediaDetection:
   description: "Strojové učenie sa použije na automatickú detekciu citlivých médií na účely ich moderovania. Mierne sa zvýši zaťaženie servera."
   sensitivity: "Citlivosť detekcie"

locales/th-TH.yml

@@ -924,6 +924,51 @@ neverShow: "ไม่ต้องแสดงข้อความนี้อ
 remindMeLater: "ไว้ครั้งหน้าแล้วกัน"
 didYouLikeMisskey: "คุณเคยชอบ Misskey ไหม?"
 pleaseDonate: "{host} ใช้ซอฟต์แวร์ฟรี Misskey เราขอขอบคุณการบริจาคของคุณอย่างสูงเพื่อให้การพัฒนา Misskey สามารถดำเนินต่อไปได้นะ!"
+roles: "บทบาท"
+role: "บทบาท"
+normalUser: "ผู้ใช้มาตรฐาน"
+undefined: "ไม่ได้กำหนด"
+assign: "กำหนด"
+unassign: "ยังไม่มอบหมาย"
+color: "สี"
+manageCustomEmojis: "จัดการอีโมจิแบบกำหนดเอง"
+_role:
+  new: "บทบาทใหม่"
+  edit: "แก้ไขบทบาท"
+  name: "ชื่อบทบาท"
+  description: "คำอธิบายบทบาท"
+  permission: "สิทธิ์ตามบทบาท"
+  descriptionOfPermission: "<b>ผู้ดูแลกลั่นกรองเนื้อหา</b> สามารถดำเนินการดูแลขั้นพื้นฐานได้นะ\n<b>ผู้ดูแลระบบ</b> สามารถเปลี่ยนการตั้งค่าทั้งหมดของอินสแตนซ์ได้นะ"
+  assignTarget: "กำหนดเป้าหมาย"
+  descriptionOfAssignTarget: "<b>แมนนวล</b> เพื่อเปลี่ยนผู้ที่เป็นส่วนหนึ่งของบทบาทนี้และใครที่ไม่ใช่ด้วยตนเอง\n<b>เงื่อนไข</b> เพื่อให้ผู้ใช้ได้รับการกำหนดและนำออกจากบทบาทนี้โดยอัตโนมัติตามเงื่อนไขชุดหนึ่ง"
+  manual: "ปรับเอง"
+  conditional: "มีเงื่อนไข"
+  condition: "เงื่อนไข"
+  isConditionalRole: "นี่คือบทบาทที่มีเงื่อนไข"
+  isPublic: "บทบาทสาธารณะ"
+  descriptionOfIsPublic: "ทุกคนสามารถดูได้ว่าผู้ใช้งานนั้นได้รับมอบหมายบทบาทด้วยหรือไม่ \n\nบทบาทจะแสดงในโปรไฟล์ของผู้ใช้ด้วย"
+  options: "ตัวเลือกบทบาท"
+  baseRole: "บทบาทพื้นฐาน"
+  useBaseValue: "ใช้บทบาทพื้นฐานเริ่มต้น"
+  chooseRoleToAssign: "เลือกบทบาทที่ต้องการกำหนด"
+  canEditMembersByModerator: "อนุญาตให้ผู้ดูแลแก้ไขสมาชิก"
+  descriptionOfCanEditMembersByModerator: "เมื่อเปิดใช้ ผู้ดูแลนอกเหนือจากผู้ดูแลระบบแล้ว จะสามารถกำหนดและยกเลิกการมอบหมายบทบาทนี้ให้กับผู้ใช้ได้ เมื่อปิด เฉพาะผู้ดูแลระบบเท่านั้นที่จะสามารถกำหนดผู้ใช้ได้นะ"
+  _options:
+    gtlAvailable: "การดูไทม์ไลน์ทั่วโลก"
+    ltlAvailable: "การดูไทม์ไลน์ในท้องถิ่น"
+    canPublicNote: "สามารถส่งโน้ตสาธารณะ"
+    canInvite: "สร้างรหัสเชิญอินสแตนซ์"
+    canManageCustomEmojis: "จัดการอีโมจิแบบกำหนดเอง"
+    driveCapacity: "ความจุของไดรฟ์"
+    antennaMax: "จำนวนสูงสุดของเสาอากาศ"
+  _condition:
+    isLocal: "ผู้ใช้ภายใน"
+    isRemote: "ผู้ใช้ระยะไกล"
+    createdLessThan: "สร้างน้อยกว่า"
+    createdMoreThan: "สร้างมากกว่า"
+    and: "และ"
+    or: "หรือ"
+    not: "ไม่"
 _sensitiveMediaDetection:
   description: "ลดความพยายามในการดูแลเซิร์ฟเวอร์ผ่านการจดจำสื่อ NSFW โดยอัตโนมัติผ่านการเรียนรู้ของเครื่อง การทำสิ่งนี้อาจจะเพิ่มภาระบนเซิร์ฟเวอร์เล็กน้อย"
   sensitivity: "การตรวจจับความไว"

locales/uk-UA.yml

@@ -894,6 +894,7 @@ windowRestore: "Відновити"
 caption: "Підпис"
 like: "Вподобати"
 show: "Відображення"
+color: "Колір"
 _sensitiveMediaDetection:
   sensitivity: "Чутливість детектування"
   setSensitiveFlagAutomatically: "Позначити як NSFW"

locales/vi-VN.yml

@@ -896,6 +896,7 @@ account: "Tài khoản của bạn"
 move: "Di chuyển"
 like: "Thích"
 show: "Hiển thị"
+color: "Màu sắc"
 _sensitiveMediaDetection:
   description: "Giảm nỗ lực kiểm duyệt máy chủ thông qua việc tự động nhận dạng media NSFW thông qua học máy. Điều này sẽ làm tăng một chút áp lực trên máy chủ."
   sensitivity: "Phát hiện nhạy cảm"

locales/zh-CN.yml

@@ -13,7 +13,7 @@ fetchingAsApObject: "在联邦宇宙查询中..."
 ok: "OK"
 gotIt: "我明白了"
 cancel: "取消"
-noThankYou: "不用"
+noThankYou: "不用，谢谢"
 enterUsername: "输入用户名"
 renotedBy: "由 {user} 转贴"
 noNotes: "没有帖子"
@@ -924,6 +924,57 @@ neverShow: "不再显示"
 remindMeLater: "稍后提醒我"
 didYouLikeMisskey: "您喜欢Misskey吗？"
 pleaseDonate: "Misskey是{host}所使用的免费软件。为了今后也能够维持Misskey的开发，请在有余力的情况下进行捐助！"
+roles: "角色"
+role: "角色"
+normalUser: "普通用户"
+undefined: "未定义"
+assign: "分配"
+unassign: "取消分配"
+color: "颜色"
+manageCustomEmojis: "管理自定义表情符号"
+_role:
+  new: "创建角色"
+  edit: "编辑角色"
+  name: "角色名称"
+  description: "角色描述"
+  permission: "角色权限"
+  descriptionOfPermission: "<b>监察员</b>可以执行基本的审核操作。\n<b>管理员</b>可以更改实例的所有设置。"
+  assignTarget: "授权对象"
+  descriptionOfAssignTarget: "<b>手动</b>指手动选择谁被包括在这个角色中。\n<b>符合条件</b>指设置条件以自动包括符合条件的用户。"
+  manual: "手动"
+  conditional: "符合条件"
+  condition: "条件"
+  isConditionalRole: "这是一个条件控制的角色。"
+  isPublic: "角色公开"
+  descriptionOfIsPublic: "任何人都可以看到分配该角色的用户。而用户的个人资料也将显示该角色。"
+  options: "选项"
+  baseRole: "基本角色"
+  useBaseValue: "使用基本角色的值"
+  chooseRoleToAssign: "选择要分配的角色"
+  canEditMembersByModerator: "允许监察者编辑成员"
+  descriptionOfCanEditMembersByModerator: "如果选中，监察者和管理员都能够为用户分配/取消分配角色。如果未选中，则只有管理员可以执行此操作。"
+  _options:
+    gtlAvailable: "查看全局时间线"
+    ltlAvailable: "查看本地时间线"
+    canPublicNote: "允许公开发帖"
+    canInvite: "发放实例邀请码"
+    canManageCustomEmojis: "管理自定义表情符号"
+    driveCapacity: "网盘容量"
+    antennaMax: "可创建的最大天线数量"
+    wordMuteMax: "屏蔽词的字数限制"
+    webhookMax: "Webhook 创建数量限制"
+  _condition:
+    isLocal: "是本地用户"
+    isRemote: "是远程用户"
+    createdLessThan: "账户创建时间少于"
+    createdMoreThan: "账户创建时间超过"
+    followersLessThanOrEq: "关注者不多于"
+    followersMoreThanOrEq: "关注者不少于"
+    followingLessThanOrEq: "关注中不多于"
+    followingMoreThanOrEq: "关注中不少于"
+    and: "符合以下全部条件"
+    or: "符合以下任一条件"
+    not: "不符合以下任何条件"
 _sensitiveMediaDetection:
   description: "可以使用机器学习技术自动检测敏感媒体，以便进行审核。服务器负载将略微增加。"
   sensitivity: "检测敏感度"

locales/zh-TW.yml

@@ -324,8 +324,8 @@ integration: "整合"
 connectService: "己連結"
 disconnectService: "己斷開 "
 enableLocalTimeline: "開啟本地時間軸"
-enableGlobalTimeline: "啟用公開時間軸"
-disablingTimelinesInfo: "即使您關閉了時間線功能，管理員和協調人仍可以繼續使用，以方便您。"
+enableGlobalTimeline: "啟用全域時間軸"
+disablingTimelinesInfo: "為了方便，即使您關閉了時間線功能，管理員和審核員仍可以繼續使用。"
 registration: "註冊"
 enableRegistration: "開啟新使用者註冊"
 invite: "邀請"
@@ -388,7 +388,7 @@ aboutMisskey: "關於 Misskey"
 administrator: "管理員"
 token: "權杖"
 twoStepAuthentication: "兩階段驗證"
-moderator: "板主"
+moderator: "監察員"
 moderation: "言論調節"
 nUsersMentioned: "提到了{n}"
 securityKey: "安全金鑰"
@@ -869,7 +869,7 @@ recommended: "推薦"
 check: "檢查"
 driveCapOverrideLabel: "更改這個使用者的雲端硬碟容量上限"
 driveCapOverrideCaption: "如果指定0以下的值，就會被取消。"
-requireAdminForView: "必須以管理者帳號登入才可以檢視。"
+requireAdminForView: "必須以管理員帳號登入才可以檢視。"
 isSystemAccount: "由系統自動建立與管理的帳號。"
 typeToConfirm: "要執行這項操作，請輸入 {x} "
 deleteAccount: "刪除帳號"
@@ -924,6 +924,56 @@ neverShow: "不再顯示"
 remindMeLater: "以後再說"
 didYouLikeMisskey: "您是否喜愛Misskey呢？"
 pleaseDonate: "Misskey是由{host}使用的免費軟體。請贊助我們，讓開發能夠持續！"
+roles: "角色"
+role: "角色"
+normalUser: "一般使用者"
+undefined: "未定義"
+assign: "指派"
+unassign: "取消指派"
+color: "顏色"
+manageCustomEmojis: "管理自訂表情符號"
+_role:
+  new: "建立角色"
+  edit: "編輯角色"
+  name: "角色名稱"
+  description: "角色描述 "
+  permission: "角色的權限"
+  descriptionOfPermission: "<b>審核員</b>執行與審核相關的基本操作。\n<b>管理員</b>能變更實例的全部設定。"
+  assignTarget: "指派目標"
+  descriptionOfAssignTarget: "<b>手動</b>是以手動管理這個角色包含的人員。\n<b>符合條件</b>是設定條件以自動包含符合條件的使用者。"
+  manual: "手動"
+  conditional: "符合條件"
+  condition: "條件"
+  isConditionalRole: "這是條件角色。"
+  isPublic: "角色為公開"
+  descriptionOfIsPublic: "任何人都可以看到被指派了角色的使用者。此外，使用者的個人檔案將顯示這個角色。"
+  options: "選項"
+  baseRole: "基本角色"
+  useBaseValue: "使用基本角色的值"
+  chooseRoleToAssign: "選擇要指派的角色"
+  canEditMembersByModerator: "允許編輯監察員的成員"
+  descriptionOfCanEditMembersByModerator: "如果開啟，管理員與監察員都可以為使用者指派/解除指派該角色。如果關閉，則只有管理員可以執行。"
+  _options:
+    gtlAvailable: "瀏覽全域時間軸"
+    ltlAvailable: "瀏覽本地時間軸"
+    canPublicNote: "允許公開貼文"
+    canInvite: "發行實例邀請碼"
+    canManageCustomEmojis: "管理自訂表情符號"
+    driveCapacity: "雲端硬碟容量"
+    antennaMax: "可建立的天線數量"
+    webhookMax: "可建立的Webhook數"
+  _condition:
+    isLocal: "本地使用者"
+    isRemote: "遠端使用者"
+    createdLessThan: "自建立帳戶開始～以內"
+    createdMoreThan: "自建立帳戶開始～經過"
+    followersLessThanOrEq: "追隨者人數在～以下"
+    followersMoreThanOrEq: "追隨者人數在～以上"
+    followingLessThanOrEq: "追隨人數在～以下"
+    followingMoreThanOrEq: "追隨人數在～以上"
+    and: "～和～"
+    or: "～或～"
+    not: "～否"
 _sensitiveMediaDetection:
   description: "您可以使用機器學習自動檢測敏感媒體並將其用於審核。 伺服器的負荷會稍微增加。"
   sensitivity: "檢測敏感度"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "13.0.0-beta.41",
+	"version": "13.0.0-rc.4",
 	"codename": "indigo",
 	"repository": {
 		"type": "git",

packages/backend/package.json

@@ -72,7 +72,7 @@
 		"json5-loader": "4.0.1",
 		"jsonld": "8.1.0",
 		"jsrsasign": "10.6.1",
-		"mfm-js": "0.23.1",
+		"mfm-js": "0.23.3",
 		"mime-types": "2.1.35",
 		"misskey-js": "0.0.14",
 		"ms": "3.0.0-canary.1",

packages/backend/src/core/AntennaService.ts

@@ -16,6 +16,7 @@ import { DI } from '@/di-symbols.js';
 import type { MutingsRepository, BlockingsRepository, NotesRepository, AntennaNotesRepository, AntennasRepository, UserGroupJoiningsRepository, UserListJoiningsRepository } from '@/models/index.js';
 import { UtilityService } from '@/core/UtilityService.js';
 import { bindThis } from '@/decorators.js';
+import { StreamMessages } from '@/server/api/stream/types.js';
 import type { OnApplicationShutdown } from '@nestjs/common';
 
 @Injectable()
@@ -73,7 +74,7 @@ export class AntennaService implements OnApplicationShutdown {
 		const obj = JSON.parse(data);
 
 		if (obj.channel === 'internal') {
-			const { type, body } = obj.message;
+			const { type, body } = obj.message as StreamMessages['internal']['payload'];
 			switch (type) {
 				case 'antennaCreated':
 					this.antennas.push(body);

packages/backend/src/core/MetaService.ts

@@ -4,8 +4,9 @@ import Redis from 'ioredis';
 import { DI } from '@/di-symbols.js';
 import { Meta } from '@/models/entities/Meta.js';
 import { GlobalEventService } from '@/core/GlobalEventService.js';
-import type { OnApplicationShutdown } from '@nestjs/common';
 import { bindThis } from '@/decorators.js';
+import { StreamMessages } from '@/server/api/stream/types.js';
+import type { OnApplicationShutdown } from '@nestjs/common';
 
 @Injectable()
 export class MetaService implements OnApplicationShutdown {
@@ -40,7 +41,7 @@ export class MetaService implements OnApplicationShutdown {
 		const obj = JSON.parse(data);
 
 		if (obj.channel === 'internal') {
-			const { type, body } = obj.message;
+			const { type, body } = obj.message as StreamMessages['internal']['payload'];
 			switch (type) {
 				case 'metaUpdated': {
 					this.cache = body;

packages/backend/src/core/NotePiningService.ts

@@ -12,6 +12,7 @@ import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { ApDeliverManagerService } from '@/core/activitypub/ApDeliverManagerService.js';
 import { ApRendererService } from '@/core/activitypub/ApRendererService.js';
 import { bindThis } from '@/decorators.js';
+import { RoleService } from '@/core/RoleService.js';
 
 @Injectable()
 export class NotePiningService {
@@ -30,6 +31,7 @@ export class NotePiningService {
 
 		private userEntityService: UserEntityService,
 		private idService: IdService,
+		private roleService: RoleService,
 		private relayService: RelayService,
 		private apDeliverManagerService: ApDeliverManagerService,
 		private apRendererService: ApRendererService,
@@ -55,7 +57,7 @@ export class NotePiningService {
 
 		const pinings = await this.userNotePiningsRepository.findBy({ userId: user.id });
 
-		if (pinings.length >= 5) {
+		if (pinings.length >= (await this.roleService.getUserRoleOptions(user.id)).pinLimit) {
 			throw new IdentifiableError('15a018eb-58e5-4da1-93be-330fcc5e4e1a', 'You can not pin notes any more.');
 		}
 

packages/backend/src/core/RoleService.ts

@@ -10,22 +10,41 @@ import { MetaService } from '@/core/MetaService.js';
 import { UserCacheService } from '@/core/UserCacheService.js';
 import { RoleCondFormulaValue } from '@/models/entities/Role.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { StreamMessages } from '@/server/api/stream/types.js';
 import type { OnApplicationShutdown } from '@nestjs/common';
 
 export type RoleOptions = {
 	gtlAvailable: boolean;
 	ltlAvailable: boolean;
 	canPublicNote: boolean;
+	canInvite: boolean;
+	canManageCustomEmojis: boolean;
 	driveCapacityMb: number;
+	pinLimit: number;
 	antennaLimit: number;
+	wordMuteLimit: number;
+	webhookLimit: number;
+	clipLimit: number;
+	noteEachClipsLimit: number;
+	userListLimit: number;
+	userEachUserListsLimit: number;
 };
 
 export const DEFAULT_ROLE: RoleOptions = {
 	gtlAvailable: true,
 	ltlAvailable: true,
 	canPublicNote: true,
+	canInvite: false,
+	canManageCustomEmojis: false,
 	driveCapacityMb: 100,
+	pinLimit: 5,
 	antennaLimit: 5,
+	wordMuteLimit: 200,
+	webhookLimit: 3,
+	clipLimit: 10,
+	noteEachClipsLimit: 200,
+	userListLimit: 10,
+	userEachUserListsLimit: 50,
 };
 
 @Injectable()
@@ -63,7 +82,7 @@ export class RoleService implements OnApplicationShutdown {
 		const obj = JSON.parse(data);
 
 		if (obj.channel === 'internal') {
-			const { type, body } = obj.message;
+			const { type, body } = obj.message as StreamMessages['internal']['payload'];
 			switch (type) {
 				case 'roleCreated': {
 					const cached = this.rolesCache.get(null);
@@ -141,6 +160,18 @@ export class RoleService implements OnApplicationShutdown {
 				case 'createdMoreThan': {
 					return user.createdAt.getTime() < (Date.now() - (value.sec * 1000));
 				}
+				case 'followersLessThanOrEq': {
+					return user.followersCount <= value.value;
+				}
+				case 'followersMoreThanOrEq': {
+					return user.followersCount >= value.value;
+				}
+				case 'followingLessThanOrEq': {
+					return user.followingCount <= value.value;
+				}
+				case 'followingMoreThanOrEq': {
+					return user.followingCount >= value.value;
+				}
 				default:
 					return false;
 			}
@@ -179,8 +210,17 @@ export class RoleService implements OnApplicationShutdown {
 			gtlAvailable: getOptionValues('gtlAvailable').some(x => x === true),
 			ltlAvailable: getOptionValues('ltlAvailable').some(x => x === true),
 			canPublicNote: getOptionValues('canPublicNote').some(x => x === true),
+			canInvite: getOptionValues('canInvite').some(x => x === true),
+			canManageCustomEmojis: getOptionValues('canManageCustomEmojis').some(x => x === true),
 			driveCapacityMb: Math.max(...getOptionValues('driveCapacityMb')),
+			pinLimit: Math.max(...getOptionValues('pinLimit')),
 			antennaLimit: Math.max(...getOptionValues('antennaLimit')),
+			wordMuteLimit: Math.max(...getOptionValues('wordMuteLimit')),
+			webhookLimit: Math.max(...getOptionValues('webhookLimit')),
+			clipLimit: Math.max(...getOptionValues('clipLimit')),
+			noteEachClipsLimit: Math.max(...getOptionValues('noteEachClipsLimit')),
+			userListLimit: Math.max(...getOptionValues('userListLimit')),
+			userEachUserListsLimit: Math.max(...getOptionValues('userEachUserListsLimit')),
 		};
 	}
 

packages/backend/src/core/UserCacheService.ts

@@ -6,6 +6,7 @@ import type { CacheableLocalUser, CacheableUser, ILocalUser, User } from '@/mode
 import { DI } from '@/di-symbols.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { bindThis } from '@/decorators.js';
+import { StreamMessages } from '@/server/api/stream/types.js';
 import type { OnApplicationShutdown } from '@nestjs/common';
 
 @Injectable()
@@ -39,7 +40,7 @@ export class UserCacheService implements OnApplicationShutdown {
 		const obj = JSON.parse(data);
 
 		if (obj.channel === 'internal') {
-			const { type, body } = obj.message;
+			const { type, body } = obj.message as StreamMessages['internal']['payload'];
 			switch (type) {
 				case 'userChangeSuspendedState':
 				case 'remoteUserUpdated': {
@@ -62,6 +63,13 @@ export class UserCacheService implements OnApplicationShutdown {
 					this.localUserByNativeTokenCache.set(body.newToken, user);
 					break;
 				}
+				case 'follow': {
+					const follower = this.userByIdCache.get(body.followerId);
+					if (follower) follower.followingCount++;
+					const followee = this.userByIdCache.get(body.followeeId);
+					if (followee) followee.followersCount++;
+					break;
+				}
 				default:
 					break;
 			}

packages/backend/src/core/UserFollowingService.ts

@@ -62,6 +62,7 @@ export class UserFollowingService {
 		private federatedInstanceService: FederatedInstanceService,
 		private webhookService: WebhookService,
 		private apRendererService: ApRendererService,
+		private globalEventService: GlobalEventService,
 		private perUserFollowingChart: PerUserFollowingChart,
 		private instanceChart: InstanceChart,
 	) {
@@ -195,6 +196,8 @@ export class UserFollowingService {
 		}
 	
 		if (alreadyFollowed) return;
+
+		this.globalEventService.publishInternalEvent('follow', { followerId: follower.id, followeeId: followee.id });
 	
 		//#region Increment counts
 		await Promise.all([
@@ -314,6 +317,8 @@ export class UserFollowingService {
 		follower: {id: User['id']; host: User['host']; },
 		followee: { id: User['id']; host: User['host']; },
 	): Promise<void> {
+		this.globalEventService.publishInternalEvent('unfollow', { followerId: follower.id, followeeId: followee.id });
+	
 		//#region Decrement following / followers counts
 		await Promise.all([
 			this.usersRepository.decrement({ id: follower.id }, 'followingCount', 1),

packages/backend/src/core/UserListService.ts

@@ -10,6 +10,7 @@ import { DI } from '@/di-symbols.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { ProxyAccountService } from '@/core/ProxyAccountService.js';
 import { bindThis } from '@/decorators.js';
+import { RoleService } from '@/core/RoleService.js';
 
 @Injectable()
 export class UserListService {
@@ -23,13 +24,21 @@ export class UserListService {
 		private userEntityService: UserEntityService,
 		private idService: IdService,
 		private userFollowingService: UserFollowingService,
+		private roleService: RoleService,
 		private globalEventServie: GlobalEventService,
 		private proxyAccountService: ProxyAccountService,
 	) {
 	}
 
 	@bindThis
-	public async push(target: User, list: UserList) {
+	public async push(target: User, list: UserList, me: User) {
+		const currentCount = await this.userListJoiningsRepository.countBy({
+			userListId: list.id,
+		});
+		if (currentCount > (await this.roleService.getUserRoleOptions(me.id)).userEachUserListsLimit) {
+			throw new Error('Too many users');
+		}
+
 		await this.userListJoiningsRepository.insert({
 			id: this.idService.genId(),
 			createdAt: new Date(),

packages/backend/src/core/UtilityService.ts

@@ -24,6 +24,12 @@ export class UtilityService {
 		return this.toPuny(this.config.host) === this.toPuny(host);
 	}
 
+	@bindThis
+	public isBlockedHost(blockedHosts: string[], host: string | null): boolean {
+		if (host == null) return false;
+		return blockedHosts.some(x => `.${host.toLowerCase()}`.endsWith(`.${x}`));
+	}
+
 	@bindThis
 	public extractDbHost(uri: string): string {
 		const url = new URL(uri);

packages/backend/src/core/WebhookService.ts

@@ -3,8 +3,9 @@ import Redis from 'ioredis';
 import type { WebhooksRepository } from '@/models/index.js';
 import type { Webhook } from '@/models/entities/Webhook.js';
 import { DI } from '@/di-symbols.js';
-import type { OnApplicationShutdown } from '@nestjs/common';
 import { bindThis } from '@/decorators.js';
+import { StreamMessages } from '@/server/api/stream/types.js';
+import type { OnApplicationShutdown } from '@nestjs/common';
 
 @Injectable()
 export class WebhookService implements OnApplicationShutdown {
@@ -39,7 +40,7 @@ export class WebhookService implements OnApplicationShutdown {
 		const obj = JSON.parse(data);
 
 		if (obj.channel === 'internal') {
-			const { type, body } = obj.message;
+			const { type, body } = obj.message as StreamMessages['internal']['payload'];
 			switch (type) {
 				case 'webhookCreated':
 					if (body.active) {

packages/backend/src/core/activitypub/ApInboxService.ts

@@ -291,7 +291,7 @@ export class ApInboxService {
 
 		// アナウンス先をブロックしてたら中断
 		const meta = await this.metaService.fetch();
-		if (meta.blockedHosts.includes(this.utilityService.extractDbHost(uri))) return;
+		if (this.utilityService.isBlockedHost(meta.blockedHosts, this.utilityService.extractDbHost(uri))) return;
 
 		const unlock = await this.appLockService.getApLock(uri);
 

packages/backend/src/core/activitypub/ApResolverService.ts

@@ -96,7 +96,7 @@ export class Resolver {
 		}
 
 		const meta = await this.metaService.fetch();
-		if (meta.blockedHosts.includes(host)) {
+		if (this.utilityService.isBlockedHost(meta.blockedHosts, host)) {
 			throw new Error('Instance is blocked');
 		}
 

packages/backend/src/core/activitypub/models/ApNoteService.ts

@@ -324,7 +324,7 @@ export class ApNoteService {
 	
 		// ブロックしてたら中断
 		const meta = await this.metaService.fetch();
-		if (meta.blockedHosts.includes(this.utilityService.extractDbHost(uri))) throw { statusCode: 451 };
+		if (this.utilityService.isBlockedHost(meta.blockedHosts, this.utilityService.extractDbHost(uri))) throw { statusCode: 451 };
 	
 		const unlock = await this.appLockService.getApLock(uri);
 	

packages/backend/src/core/chart/charts/federation.ts

@@ -61,21 +61,21 @@ export default class FederationChart extends Chart<typeof schema> {
 			this.followingsRepository.createQueryBuilder('following')
 				.select('COUNT(DISTINCT following.followeeHost)')
 				.where('following.followeeHost IS NOT NULL')
-				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'following.followeeHost NOT IN (:...blocked)', { blocked: meta.blockedHosts })
+				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'following.followeeHost NOT ILIKE ANY(ARRAY[:...blocked])', { blocked: meta.blockedHosts.flatMap(x => [x, `%.${x}`]) })
 				.andWhere(`following.followeeHost NOT IN (${ suspendedInstancesQuery.getQuery() })`)
 				.getRawOne()
 				.then(x => parseInt(x.count, 10)),
 			this.followingsRepository.createQueryBuilder('following')
 				.select('COUNT(DISTINCT following.followerHost)')
 				.where('following.followerHost IS NOT NULL')
-				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'following.followerHost NOT IN (:...blocked)', { blocked: meta.blockedHosts })
+				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'following.followerHost NOT ILIKE ANY(ARRAY[:...blocked])', { blocked: meta.blockedHosts.flatMap(x => [x, `%.${x}`]) })
 				.andWhere(`following.followerHost NOT IN (${ suspendedInstancesQuery.getQuery() })`)
 				.getRawOne()
 				.then(x => parseInt(x.count, 10)),
 			this.followingsRepository.createQueryBuilder('following')
 				.select('COUNT(DISTINCT following.followeeHost)')
 				.where('following.followeeHost IS NOT NULL')
-				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'following.followeeHost NOT IN (:...blocked)', { blocked: meta.blockedHosts })
+				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'following.followeeHost NOT ILIKE ANY(ARRAY[:...blocked])', { blocked: meta.blockedHosts.flatMap(x => [x, `%.${x}`]) })
 				.andWhere(`following.followeeHost NOT IN (${ suspendedInstancesQuery.getQuery() })`)
 				.andWhere(`following.followeeHost IN (${ pubsubSubQuery.getQuery() })`)
 				.setParameters(pubsubSubQuery.getParameters())
@@ -84,7 +84,7 @@ export default class FederationChart extends Chart<typeof schema> {
 			this.instancesRepository.createQueryBuilder('instance')
 				.select('COUNT(instance.id)')
 				.where(`instance.host IN (${ subInstancesQuery.getQuery() })`)
-				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'instance.host NOT IN (:...blocked)', { blocked: meta.blockedHosts })
+				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'instance.host NOT ILIKE ANY(ARRAY[:...blocked])', { blocked: meta.blockedHosts.flatMap(x => [x, `%.${x}`]) })
 				.andWhere('instance.isSuspended = false')
 				.andWhere('instance.isNotResponding = false')
 				.getRawOne()
@@ -92,7 +92,7 @@ export default class FederationChart extends Chart<typeof schema> {
 			this.instancesRepository.createQueryBuilder('instance')
 				.select('COUNT(instance.id)')
 				.where(`instance.host IN (${ pubInstancesQuery.getQuery() })`)
-				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'instance.host NOT IN (:...blocked)', { blocked: meta.blockedHosts })
+				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'instance.host NOT ILIKE ANY(ARRAY[:...blocked])', { blocked: meta.blockedHosts.flatMap(x => [x, `%.${x}`]) })
 				.andWhere('instance.isSuspended = false')
 				.andWhere('instance.isNotResponding = false')
 				.getRawOne()

packages/backend/src/core/entities/InstanceEntityService.ts

@@ -7,8 +7,8 @@ import type { } from '@/models/entities/Blocking.js';
 import type { User } from '@/models/entities/User.js';
 import type { Instance } from '@/models/entities/Instance.js';
 import { MetaService } from '@/core/MetaService.js';
+import { UtilityService } from '../UtilityService.js';
 import { bindThis } from '@/decorators.js';
-import { UserEntityService } from './UserEntityService.js';
 
 @Injectable()
 export class InstanceEntityService {
@@ -17,6 +17,8 @@ export class InstanceEntityService {
 		private instancesRepository: InstancesRepository,
 
 		private metaService: MetaService,
+
+		private utilityService: UtilityService,
 	) {
 	}
 
@@ -35,7 +37,7 @@ export class InstanceEntityService {
 			followersCount: instance.followersCount,
 			isNotResponding: instance.isNotResponding,
 			isSuspended: instance.isSuspended,
-			isBlocked: meta.blockedHosts.includes(instance.host),
+			isBlocked: this.utilityService.isBlockedHost(meta.blockedHosts, instance.host),
 			softwareName: instance.softwareName,
 			softwareVersion: instance.softwareVersion,
 			openRegistrations: instance.openRegistrations,

packages/backend/src/core/entities/RoleEntityService.ts

@@ -62,6 +62,7 @@ export class RoleEntityService {
 			isModerator: role.isModerator,
 			canEditMembersByModerator: role.canEditMembersByModerator,
 			options: roleOptions,
+			usersCount: assigns.length,
 			...(opts.detail ? {
 				users: this.userEntityService.packMany(assigns.map(x => x.userId), me),
 			} : {}),

packages/backend/src/core/entities/UserEntityService.ts

@@ -448,6 +448,14 @@ export class UserEntityService implements OnModuleInit {
 						userId: user.id,
 					}).then(result => result >= 1)
 					: false,
+				roles: this.roleService.getUserRoles(user.id).then(roles => roles.filter(role => role.isPublic).map(role => ({
+					id: role.id,
+					name: role.name,
+					color: role.color,
+					description: role.description,
+					isModerator: role.isModerator,
+					isAdministrator: role.isAdministrator,
+				}))),
 			} : {}),
 
 			...(opts.detail && isMe ? {

packages/backend/src/models/entities/Role.ts

@@ -34,6 +34,26 @@ type CondFormulaValueCreatedMoreThan = {
 	sec: number;
 };
 
+type CondFormulaValueFollowersLessThanOrEq = {
+	type: 'followersLessThanOrEq';
+	value: number;
+};
+
+type CondFormulaValueFollowersMoreThanOrEq = {
+	type: 'followersMoreThanOrEq';
+	value: number;
+};
+
+type CondFormulaValueFollowingLessThanOrEq = {
+	type: 'followingLessThanOrEq';
+	value: number;
+};
+
+type CondFormulaValueFollowingMoreThanOrEq = {
+	type: 'followingMoreThanOrEq';
+	value: number;
+};
+
 export type RoleCondFormulaValue =
 	CondFormulaValueAnd |
 	CondFormulaValueOr |
@@ -41,7 +61,11 @@ export type RoleCondFormulaValue =
 	CondFormulaValueIsLocal |
 	CondFormulaValueIsRemote |
 	CondFormulaValueCreatedLessThan |
-	CondFormulaValueCreatedMoreThan;
+	CondFormulaValueCreatedMoreThan |
+	CondFormulaValueFollowersLessThanOrEq |
+	CondFormulaValueFollowersMoreThanOrEq |
+	CondFormulaValueFollowingLessThanOrEq |
+	CondFormulaValueFollowingMoreThanOrEq;
 
 @Entity()
 export class Role {

packages/backend/src/queue/processors/DeliverProcessorService.ts

@@ -56,7 +56,7 @@ export class DeliverProcessorService {
 
 		// ブロックしてたら中断
 		const meta = await this.metaService.fetch();
-		if (meta.blockedHosts.includes(this.utilityService.toPuny(host))) {
+		if (this.utilityService.isBlockedHost(meta.blockedHosts, this.utilityService.toPuny(host))) {
 			return 'skip (blocked)';
 		}
 

packages/backend/src/queue/processors/ImportUserListsProcessorService.ts

@@ -10,10 +10,10 @@ import { DownloadService } from '@/core/DownloadService.js';
 import { UserListService } from '@/core/UserListService.js';
 import { IdService } from '@/core/IdService.js';
 import { UtilityService } from '@/core/UtilityService.js';
+import { bindThis } from '@/decorators.js';
 import { QueueLoggerService } from '../QueueLoggerService.js';
 import type Bull from 'bull';
 import type { DbUserImportJobData } from '../types.js';
-import { bindThis } from '@/decorators.js';
 
 @Injectable()
 export class ImportUserListsProcessorService {
@@ -102,7 +102,7 @@ export class ImportUserListsProcessorService {
 
 				if (await this.userListJoiningsRepository.findOneBy({ userListId: list!.id, userId: target.id }) != null) continue;
 
-				this.userListService.push(target, list!);
+				this.userListService.push(target, list!, user);
 			} catch (e) {
 				this.logger.warn(`Error in line:${linenum} ${e}`);
 			}

packages/backend/src/queue/processors/InboxProcessorService.ts

@@ -76,7 +76,7 @@ export class InboxProcessorService {
 
 		// ブロックしてたら中断
 		const meta = await this.metaService.fetch();
-		if (meta.blockedHosts.includes(host)) {
+		if (this.utilityService.isBlockedHost(meta.blockedHosts, host)) {
 			return `Blocked request: ${host}`;
 		}
 
@@ -158,7 +158,7 @@ export class InboxProcessorService {
 
 				// ブロックしてたら中断
 				const ldHost = this.utilityService.extractDbHost(authUser.user.uri);
-				if (meta.blockedHosts.includes(ldHost)) {
+				if (this.utilityService.isBlockedHost(meta.blockedHosts, ldHost)) {
 					return `Blocked request: ${ldHost}`;
 				}
 			} else {

packages/backend/src/server/api/ApiCallService.ts

@@ -271,6 +271,17 @@ export class ApiCallService implements OnApplicationShutdown {
 			}
 		}
 
+		if (ep.meta.requireRoleOption != null && !user!.isRoot) {
+			const myRole = await this.roleService.getUserRoleOptions(user!.id);
+			if (!myRole[ep.meta.requireRoleOption]) {
+				throw new ApiError({
+					message: 'You are not assigned to a required role.',
+					code: 'ROLE_PERMISSION_DENIED',
+					id: '7f86f06f-7e15-4057-8561-f4b6d4ac755a',
+				});
+			}
+		}
+
 		if (token && ep.meta.kind && !token.permission.some(p => p === ep.meta.kind)) {
 			throw new ApiError({
 				message: 'Your app does not have the necessary permissions to use this endpoint.',

packages/backend/src/server/api/ApiServerService.ts

@@ -36,8 +36,8 @@ export class ApiServerService {
 
 		private userEntityService: UserEntityService,
 		private apiCallService: ApiCallService,
-		private signupApiServiceService: SignupApiService,
-		private signinApiServiceService: SigninApiService,
+		private signupApiService: SignupApiService,
+		private signinApiService: SigninApiService,
 		private githubServerService: GithubServerService,
 		private discordServerService: DiscordServerService,
 		private twitterServerService: TwitterServerService,
@@ -116,7 +116,7 @@ export class ApiServerService {
 				'g-recaptcha-response'?: string;
 				'turnstile-response'?: string;
 			}
-		}>('/signup', (request, reply) => this.signupApiServiceService.signup(request, reply));
+		}>('/signup', (request, reply) => this.signupApiService.signup(request, reply));
 
 		fastify.post<{
 			Body: {
@@ -129,9 +129,9 @@ export class ApiServerService {
 				credentialId?: string;
 				challengeId?: string;
 			};
-		}>('/signin', (request, reply) => this.signinApiServiceService.signin(request, reply));
+		}>('/signin', (request, reply) => this.signinApiService.signin(request, reply));
 
-		fastify.post<{ Body: { code: string; } }>('/signup-pending', (request, reply) => this.signupApiServiceService.signupPending(request, reply));
+		fastify.post<{ Body: { code: string; } }>('/signup-pending', (request, reply) => this.signupApiService.signupPending(request, reply));
 
 		fastify.register(this.discordServerService.create);
 		fastify.register(this.githubServerService.create);

packages/backend/src/server/api/EndpointsModule.ts

@@ -37,7 +37,7 @@ import * as ep___admin_federation_updateInstance from './endpoints/admin/federat
 import * as ep___admin_getIndexStats from './endpoints/admin/get-index-stats.js';
 import * as ep___admin_getTableStats from './endpoints/admin/get-table-stats.js';
 import * as ep___admin_getUserIps from './endpoints/admin/get-user-ips.js';
-import * as ep___admin_invite from './endpoints/admin/invite.js';
+import * as ep___invite from './endpoints/invite.js';
 import * as ep___admin_promo_create from './endpoints/admin/promo/create.js';
 import * as ep___admin_queue_clear from './endpoints/admin/queue/clear.js';
 import * as ep___admin_queue_deliverDelayed from './endpoints/admin/queue/deliver-delayed.js';
@@ -371,7 +371,7 @@ const $admin_federation_updateInstance: Provider = { provide: 'ep:admin/federati
 const $admin_getIndexStats: Provider = { provide: 'ep:admin/get-index-stats', useClass: ep___admin_getIndexStats.default };
 const $admin_getTableStats: Provider = { provide: 'ep:admin/get-table-stats', useClass: ep___admin_getTableStats.default };
 const $admin_getUserIps: Provider = { provide: 'ep:admin/get-user-ips', useClass: ep___admin_getUserIps.default };
-const $admin_invite: Provider = { provide: 'ep:admin/invite', useClass: ep___admin_invite.default };
+const $invite: Provider = { provide: 'ep:invite', useClass: ep___invite.default };
 const $admin_promo_create: Provider = { provide: 'ep:admin/promo/create', useClass: ep___admin_promo_create.default };
 const $admin_queue_clear: Provider = { provide: 'ep:admin/queue/clear', useClass: ep___admin_queue_clear.default };
 const $admin_queue_deliverDelayed: Provider = { provide: 'ep:admin/queue/deliver-delayed', useClass: ep___admin_queue_deliverDelayed.default };
@@ -709,7 +709,7 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$admin_getIndexStats,
 		$admin_getTableStats,
 		$admin_getUserIps,
-		$admin_invite,
+		$invite,
 		$admin_promo_create,
 		$admin_queue_clear,
 		$admin_queue_deliverDelayed,
@@ -1041,7 +1041,7 @@ const $retention: Provider = { provide: 'ep:retention', useClass: ep___retention
 		$admin_getIndexStats,
 		$admin_getTableStats,
 		$admin_getUserIps,
-		$admin_invite,
+		$invite,
 		$admin_promo_create,
 		$admin_queue_clear,
 		$admin_queue_deliverDelayed,

packages/backend/src/server/api/SignupApiService.ts

@@ -12,8 +12,8 @@ import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { EmailService } from '@/core/EmailService.js';
 import { ILocalUser } from '@/models/entities/User.js';
 import { FastifyReplyError } from '@/misc/fastify-reply-error.js';
-import { SigninService } from './SigninService.js';
 import { bindThis } from '@/decorators.js';
+import { SigninService } from './SigninService.js';
 import type { FastifyRequest, FastifyReply } from 'fastify';
 
 @Injectable()
@@ -193,7 +193,7 @@ export class SignupApiService {
 				emailVerifyCode: null,
 			});
 
-			this.signinService.signin(request, reply, account as ILocalUser);
+			return this.signinService.signin(request, reply, account as ILocalUser);
 		} catch (err) {
 			throw new FastifyReplyError(400, err);
 		}

packages/backend/src/server/api/endpoints.ts

@@ -36,7 +36,7 @@ import * as ep___admin_federation_updateInstance from './endpoints/admin/federat
 import * as ep___admin_getIndexStats from './endpoints/admin/get-index-stats.js';
 import * as ep___admin_getTableStats from './endpoints/admin/get-table-stats.js';
 import * as ep___admin_getUserIps from './endpoints/admin/get-user-ips.js';
-import * as ep___admin_invite from './endpoints/admin/invite.js';
+import * as ep___invite from './endpoints/invite.js';
 import * as ep___admin_promo_create from './endpoints/admin/promo/create.js';
 import * as ep___admin_queue_clear from './endpoints/admin/queue/clear.js';
 import * as ep___admin_queue_deliverDelayed from './endpoints/admin/queue/deliver-delayed.js';
@@ -368,7 +368,7 @@ const eps = [
 	['admin/get-index-stats', ep___admin_getIndexStats],
 	['admin/get-table-stats', ep___admin_getTableStats],
 	['admin/get-user-ips', ep___admin_getUserIps],
-	['admin/invite', ep___admin_invite],
+	['invite', ep___invite],
 	['admin/promo/create', ep___admin_promo_create],
 	['admin/queue/clear', ep___admin_queue_clear],
 	['admin/queue/deliver-delayed', ep___admin_queue_deliverDelayed],
@@ -695,6 +695,8 @@ export interface IEndpointMeta {
 	 */
 	readonly requireAdmin?: boolean;
 
+	readonly requireRoleOption?: string;
+
 	/**
 	 * エンドポイントのリミテーションに関するやつ
 	 * 省略した場合はリミテーションは無いものとして解釈されます。

packages/backend/src/server/api/endpoints/admin/ad/update.ts

@@ -38,7 +38,7 @@ export const paramDef = {
 @Injectable()
 export default class extends Endpoint<typeof meta, typeof paramDef> {
 	constructor(
-		@Inject(DI.usersRepository)
+		@Inject(DI.adsRepository)
 		private adsRepository: AdsRepository,
 	) {
 		super(meta, paramDef, async (ps, me) => {

packages/backend/src/server/api/endpoints/admin/emoji/add-aliases-bulk.ts

@@ -8,7 +8,7 @@ export const meta = {
 	tags: ['admin'],
 
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canManageCustomEmojis',
 } as const;
 
 export const paramDef = {

packages/backend/src/server/api/endpoints/admin/emoji/add.ts

@@ -14,7 +14,7 @@ export const meta = {
 	tags: ['admin'],
 
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canManageCustomEmojis',
 
 	errors: {
 		noSuchFile: {

packages/backend/src/server/api/endpoints/admin/emoji/copy.ts

@@ -14,7 +14,7 @@ export const meta = {
 	tags: ['admin'],
 
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canManageCustomEmojis',
 
 	errors: {
 		noSuchEmoji: {

packages/backend/src/server/api/endpoints/admin/emoji/delete-bulk.ts

@@ -9,7 +9,7 @@ export const meta = {
 	tags: ['admin'],
 
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canManageCustomEmojis',
 } as const;
 
 export const paramDef = {

packages/backend/src/server/api/endpoints/admin/emoji/delete.ts

@@ -10,7 +10,7 @@ export const meta = {
 	tags: ['admin'],
 
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canManageCustomEmojis',
 
 	errors: {
 		noSuchEmoji: {

packages/backend/src/server/api/endpoints/admin/emoji/import-zip.ts

@@ -5,7 +5,7 @@ import { QueueService } from '@/core/QueueService.js';
 export const meta = {
 	secure: true,
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canManageCustomEmojis',
 } as const;
 
 export const paramDef = {

packages/backend/src/server/api/endpoints/admin/emoji/list-remote.ts

@@ -11,7 +11,7 @@ export const meta = {
 	tags: ['admin'],
 
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canManageCustomEmojis',
 
 	res: {
 		type: 'array',

packages/backend/src/server/api/endpoints/admin/emoji/list.ts

@@ -11,7 +11,7 @@ export const meta = {
 	tags: ['admin'],
 
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canManageCustomEmojis',
 
 	res: {
 		type: 'array',

packages/backend/src/server/api/endpoints/admin/emoji/remove-aliases-bulk.ts

@@ -8,7 +8,7 @@ export const meta = {
 	tags: ['admin'],
 
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canManageCustomEmojis',
 } as const;
 
 export const paramDef = {

packages/backend/src/server/api/endpoints/admin/emoji/set-aliases-bulk.ts

@@ -8,7 +8,7 @@ export const meta = {
 	tags: ['admin'],
 
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canManageCustomEmojis',
 } as const;
 
 export const paramDef = {

packages/backend/src/server/api/endpoints/admin/emoji/set-category-bulk.ts

@@ -8,7 +8,7 @@ export const meta = {
 	tags: ['admin'],
 
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canManageCustomEmojis',
 } as const;
 
 export const paramDef = {

packages/backend/src/server/api/endpoints/admin/emoji/update.ts

@@ -9,7 +9,7 @@ export const meta = {
 	tags: ['admin'],
 
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canManageCustomEmojis',
 
 	errors: {
 		noSuchEmoji: {

packages/backend/src/server/api/endpoints/admin/update-meta.ts

@@ -139,7 +139,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			}
 
 			if (Array.isArray(ps.blockedHosts)) {
-				set.blockedHosts = ps.blockedHosts.filter(Boolean);
+				set.blockedHosts = ps.blockedHosts.filter(Boolean).map(x => x.toLowerCase());
 			}
 
 			if (ps.themeColor !== undefined) {

packages/backend/src/server/api/endpoints/ap/show.ts

@@ -117,7 +117,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 	private async fetchAny(uri: string, me: CacheableLocalUser | null | undefined): Promise<SchemaType<typeof meta['res']> | null> {
 	// ブロックしてたら中断
 		const fetchedMeta = await this.metaService.fetch();
-		if (fetchedMeta.blockedHosts.includes(this.utilityService.extractDbHost(uri))) return null;
+		if (this.utilityService.isBlockedHost(fetchedMeta.blockedHosts, this.utilityService.extractDbHost(uri))) return null;
 
 		let local = await this.mergePack(me, ...await Promise.all([
 			this.apDbResolverService.getUserFromApId(uri),

packages/backend/src/server/api/endpoints/blocking/create.ts

@@ -5,15 +5,15 @@ import type { UsersRepository, BlockingsRepository } from '@/models/index.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { UserBlockingService } from '@/core/UserBlockingService.js';
 import { DI } from '@/di-symbols.js';
-import { ApiError } from '../../error.js';
 import { GetterService } from '@/server/api/GetterService.js';
+import { ApiError } from '../../error.js';
 
 export const meta = {
 	tags: ['account'],
 
 	limit: {
 		duration: ms('1hour'),
-		max: 100,
+		max: 20,
 	},
 
 	requireCredential: true,

packages/backend/src/server/api/endpoints/channels/create.ts

@@ -1,4 +1,5 @@
 import { Inject, Injectable } from '@nestjs/common';
+import ms from 'ms';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import type { ChannelsRepository, DriveFilesRepository } from '@/models/index.js';
 import type { Channel } from '@/models/entities/Channel.js';
@@ -14,6 +15,11 @@ export const meta = {
 
 	kind: 'write:channels',
 
+	limit: {
+		duration: ms('1hour'),
+		max: 10,
+	},
+
 	res: {
 		type: 'object',
 		optional: false, nullable: false,

packages/backend/src/server/api/endpoints/clips/add-note.ts

@@ -1,10 +1,12 @@
 import { Inject, Injectable } from '@nestjs/common';
+import ms from 'ms';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { IdService } from '@/core/IdService.js';
 import { DI } from '@/di-symbols.js';
 import type { ClipNotesRepository, ClipsRepository } from '@/models/index.js';
-import { ApiError } from '../../error.js';
 import { GetterService } from '@/server/api/GetterService.js';
+import { RoleService } from '@/core/RoleService.js';
+import { ApiError } from '../../error.js';
 
 export const meta = {
 	tags: ['account', 'notes', 'clips'],
@@ -13,6 +15,11 @@ export const meta = {
 
 	kind: 'write:account',
 
+	limit: {
+		duration: ms('1hour'),
+		max: 20,
+	},
+
 	errors: {
 		noSuchClip: {
 			message: 'No such clip.',
@@ -31,6 +38,12 @@ export const meta = {
 			code: 'ALREADY_CLIPPED',
 			id: '734806c4-542c-463a-9311-15c512803965',
 		},
+
+		tooManyClipNotes: {
+			message: 'You cannot add notes to the clip any more.',
+			code: 'TOO_MANY_CLIP_NOTES',
+			id: 'f0dba960-ff73-4615-8df4-d6ac5d9dc118',
+		},
 	},
 } as const;
 
@@ -54,6 +67,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private clipNotesRepository: ClipNotesRepository,
 
 		private idService: IdService,
+		private roleService: RoleService,
 		private getterService: GetterService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
@@ -80,6 +94,13 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				throw new ApiError(meta.errors.alreadyClipped);
 			}
 
+			const currentCount = await this.clipNotesRepository.countBy({
+				clipId: clip.id,
+			});
+			if (currentCount > (await this.roleService.getUserRoleOptions(me.id)).noteEachClipsLimit) {
+				throw new ApiError(meta.errors.tooManyClipNotes);
+			}
+
 			await this.clipNotesRepository.insert({
 				id: this.idService.genId(),
 				noteId: note.id,

packages/backend/src/server/api/endpoints/clips/create.ts

@@ -4,6 +4,8 @@ import { IdService } from '@/core/IdService.js';
 import type { ClipsRepository } from '@/models/index.js';
 import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
 import { DI } from '@/di-symbols.js';
+import { RoleService } from '@/core/RoleService.js';
+import { ApiError } from '@/server/api/error.js';
 
 export const meta = {
 	tags: ['clips'],
@@ -17,6 +19,14 @@ export const meta = {
 		optional: false, nullable: false,
 		ref: 'Clip',
 	},
+
+	errors: {
+		tooManyClips: {
+			message: 'You cannot create clip any more.',
+			code: 'TOO_MANY_CLIPS',
+			id: '920f7c2d-6208-4b76-8082-e632020f5883',
+		},
+	},
 } as const;
 
 export const paramDef = {
@@ -37,9 +47,17 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private clipsRepository: ClipsRepository,
 
 		private clipEntityService: ClipEntityService,
+		private roleService: RoleService,
 		private idService: IdService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
+			const currentCount = await this.clipsRepository.countBy({
+				userId: me.id,
+			});
+			if (currentCount > (await this.roleService.getUserRoleOptions(me.id)).clipLimit) {
+				throw new ApiError(meta.errors.tooManyClips);
+			}
+	
 			const clip = await this.clipsRepository.insert({
 				id: this.idService.genId(),
 				createdAt: new Date(),

packages/backend/src/server/api/endpoints/drive/files/create.ts

@@ -90,7 +90,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				}
 			}
 
-			const meta = await this.metaService.fetch();
+			const instance = await this.metaService.fetch();
 
 			try {
 				// Create file
@@ -102,8 +102,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 					folderId: ps.folderId,
 					force: ps.force,
 					sensitive: ps.isSensitive,
-					requestIp: meta.enableIpLogging ? ip : null,
-					requestHeaders: meta.enableIpLogging ? headers : null,
+					requestIp: instance.enableIpLogging ? ip : null,
+					requestHeaders: instance.enableIpLogging ? headers : null,
 				});
 				return await this.driveFileEntityService.pack(driveFile, { self: true });
 			} catch (err) {
@@ -116,7 +116,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				}
 				throw new ApiError();
 			} finally {
-		cleanup!();
+				cleanup!();
 			}
 		});
 	}

packages/backend/src/server/api/endpoints/following/requests/list.ts

@@ -1,5 +1,6 @@
 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
 import type { FollowRequestsRepository } from '@/models/index.js';
 import { FollowRequestEntityService } from '@/core/entities/FollowRequestEntityService.js';
 import { DI } from '@/di-symbols.js';
@@ -40,7 +41,11 @@ export const meta = {
 
 export const paramDef = {
 	type: 'object',
-	properties: {},
+	properties: {
+		sinceId: { type: 'string', format: 'misskey:id' },
+		untilId: { type: 'string', format: 'misskey:id' },
+		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
+	},
 	required: [],
 } as const;
 
@@ -52,13 +57,17 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private followRequestsRepository: FollowRequestsRepository,
 
 		private followRequestEntityService: FollowRequestEntityService,
+		private queryService: QueryService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
-			const reqs = await this.followRequestsRepository.findBy({
-				followeeId: me.id,
-			});
+			const query = this.queryService.makePaginationQuery(this.followRequestsRepository.createQueryBuilder('request'), ps.sinceId, ps.untilId)
+				.andWhere('request.followeeId = :meId', { meId: me.id });
 
-			return await Promise.all(reqs.map(req => this.followRequestEntityService.pack(req)));
+			const requests = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await Promise.all(requests.map(req => this.followRequestEntityService.pack(req)));
 		});
 	}
 }

packages/backend/src/server/api/endpoints/i/update.ts

@@ -17,6 +17,7 @@ import { UserFollowingService } from '@/core/UserFollowingService.js';
 import { AccountUpdateService } from '@/core/AccountUpdateService.js';
 import { HashtagService } from '@/core/HashtagService.js';
 import { DI } from '@/di-symbols.js';
+import { RoleService } from '@/core/RoleService.js';
 import { ApiError } from '../../error.js';
 
 export const meta = {
@@ -62,6 +63,12 @@ export const meta = {
 			code: 'INVALID_REGEXP',
 			id: '0d786918-10df-41cd-8f33-8dec7d9a89a5',
 		},
+
+		tooManyMutedWords: {
+			message: 'Too many muted words.',
+			code: 'TOO_MANY_MUTED_WORDS',
+			id: '010665b1-a211-42d2-bc64-8f6609d79785',
+		},
 	},
 
 	res: {
@@ -144,6 +151,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 		private userFollowingService: UserFollowingService,
 		private accountUpdateService: AccountUpdateService,
 		private hashtagService: HashtagService,
+		private roleService: RoleService,
 	) {
 		super(meta, paramDef, async (ps, _user, token) => {
 			const user = await this.usersRepository.findOneByOrFail({ id: _user.id });
@@ -163,6 +171,12 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			if (ps.avatarId !== undefined) updates.avatarId = ps.avatarId;
 			if (ps.bannerId !== undefined) updates.bannerId = ps.bannerId;
 			if (ps.mutedWords !== undefined) {
+				// TODO: ちゃんと数える
+				const length = JSON.stringify(ps.mutedWords).length;
+				if (length > (await this.roleService.getUserRoleOptions(user.id)).wordMuteLimit) {
+					throw new ApiError(meta.errors.tooManyMutedWords);
+				}
+
 				// validate regular expression syntax
 				ps.mutedWords.filter(x => !Array.isArray(x)).forEach(x => {
 					const regexp = x.match(/^\/(.+)\/(.*)$/);

packages/backend/src/server/api/endpoints/i/webhooks/create.ts

@@ -5,6 +5,8 @@ import type { WebhooksRepository } from '@/models/index.js';
 import { webhookEventTypes } from '@/models/entities/Webhook.js';
 import { GlobalEventService } from '@/core/GlobalEventService.js';
 import { DI } from '@/di-symbols.js';
+import { RoleService } from '@/core/RoleService.js';
+import { ApiError } from '@/server/api/error.js';
 
 export const meta = {
 	tags: ['webhooks'],
@@ -12,6 +14,14 @@ export const meta = {
 	requireCredential: true,
 
 	kind: 'write:account',
+
+	errors: {
+		tooManyWebhooks: {
+			message: 'You cannot create webhook any more.',
+			code: 'TOO_MANY_WEBHOOKS',
+			id: '87a9bb19-111e-4e37-81d3-a3e7426453b0',
+		},
+	},
 } as const;
 
 export const paramDef = {
@@ -38,8 +48,16 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 		private idService: IdService,
 		private globalEventService: GlobalEventService,
+		private roleService: RoleService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
+			const currentWebhooksCount = await this.webhooksRepository.countBy({
+				userId: me.id,
+			});
+			if (currentWebhooksCount > (await this.roleService.getUserRoleOptions(me.id)).webhookLimit) {
+				throw new ApiError(meta.errors.tooManyWebhooks);
+			}
+
 			const webhook = await this.webhooksRepository.insert({
 				id: this.idService.genId(),
 				createdAt: new Date(),

packages/backend/src/server/api/endpoints/i/webhooks/update.ts

@@ -67,7 +67,11 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				active: ps.active,
 			});
 
-			this.globalEventService.publishInternalEvent('webhookUpdated', webhook);
+			const updated = await this.webhooksRepository.findOneByOrFail({
+				id: ps.webhookId,
+			});
+
+			this.globalEventService.publishInternalEvent('webhookUpdated', updated);
 		});
 	}
 }

packages/backend/src/server/api/endpoints/invite.ts

@@ -6,10 +6,10 @@ import { IdService } from '@/core/IdService.js';
 import { DI } from '@/di-symbols.js';
 
 export const meta = {
-	tags: ['admin'],
+	tags: ['meta'],
 
 	requireCredential: true,
-	requireModerator: true,
+	requireRoleOption: 'canInvite',
 
 	res: {
 		type: 'object',
@@ -41,7 +41,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 		private idService: IdService,
 	) {
-		super(meta, paramDef, async () => {
+		super(meta, paramDef, async (ps, me) => {
 			const code = rndstr({
 				length: 8,
 				chars: '2-9A-HJ-NP-Z', // [0-9A-Z] w/o [01IO] (32 patterns)

packages/backend/src/server/api/endpoints/mute/create.ts

@@ -1,12 +1,13 @@
 import { Inject, Injectable } from '@nestjs/common';
+import ms from 'ms';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { IdService } from '@/core/IdService.js';
 import type { MutingsRepository } from '@/models/index.js';
 import type { Muting } from '@/models/entities/Muting.js';
 import { GlobalEventService } from '@/core/GlobalEventService.js';
 import { DI } from '@/di-symbols.js';
-import { ApiError } from '../../error.js';
 import { GetterService } from '@/server/api/GetterService.js';
+import { ApiError } from '../../error.js';
 
 export const meta = {
 	tags: ['account'],
@@ -15,6 +16,11 @@ export const meta = {
 
 	kind: 'write:mutes',
 
+	limit: {
+		duration: ms('1hour'),
+		max: 20,
+	},
+
 	errors: {
 		noSuchUser: {
 			message: 'No such user.',

packages/backend/src/server/api/endpoints/notes/favorites/create.ts

@@ -1,4 +1,5 @@
 import { Inject, Injectable } from '@nestjs/common';
+import ms from 'ms';
 import type { NoteFavoritesRepository } from '@/models/index.js';
 import { IdService } from '@/core/IdService.js';
 import { Endpoint } from '@/server/api/endpoint-base.js';
@@ -13,6 +14,11 @@ export const meta = {
 
 	kind: 'write:favorites',
 
+	limit: {
+		duration: ms('1hour'),
+		max: 20,
+	},
+
 	errors: {
 		noSuchNote: {
 			message: 'No such note.',

packages/backend/src/server/api/endpoints/users/lists/create.ts

@@ -5,6 +5,8 @@ import type { UserList } from '@/models/entities/UserList.js';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { UserListEntityService } from '@/core/entities/UserListEntityService.js';
 import { DI } from '@/di-symbols.js';
+import { ApiError } from '@/server/api/error.js';
+import { RoleService } from '@/core/RoleService.js';
 
 export const meta = {
 	tags: ['lists'],
@@ -20,6 +22,14 @@ export const meta = {
 		optional: false, nullable: false,
 		ref: 'UserList',
 	},
+
+	errors: {
+		tooManyUserLists: {
+			message: 'You cannot create user list any more.',
+			code: 'TOO_MANY_USERLISTS',
+			id: '0cf21a28-7715-4f39-a20d-777bfdb8d138',
+		},
+	},
 } as const;
 
 export const paramDef = {
@@ -39,8 +49,16 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 
 		private userListEntityService: UserListEntityService,
 		private idService: IdService,
+		private roleService: RoleService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
+			const currentCount = await this.userListsRepository.countBy({
+				userId: me.id,
+			});
+			if (currentCount > (await this.roleService.getUserRoleOptions(me.id)).userListLimit) {
+				throw new ApiError(meta.errors.tooManyUserLists);
+			}
+	
 			const userList = await this.userListsRepository.insert({
 				id: this.idService.genId(),
 				createdAt: new Date(),

packages/backend/src/server/api/endpoints/users/lists/push.ts

@@ -1,4 +1,5 @@
 import { Inject, Injectable } from '@nestjs/common';
+import ms from 'ms';
 import type { UserListsRepository, UserListJoiningsRepository, BlockingsRepository } from '@/models/index.js';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { GetterService } from '@/server/api/GetterService.js';
@@ -15,6 +16,11 @@ export const meta = {
 
 	description: 'Add a user to an existing list.',
 
+	limit: {
+		duration: ms('1hour'),
+		max: 30,
+	},
+
 	errors: {
 		noSuchList: {
 			message: 'No such list.',
@@ -105,7 +111,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			}
 
 			// Push the user
-			await this.userListService.push(user, userList);
+			await this.userListService.push(user, userList, me);
 		});
 	}
 }

packages/backend/src/server/api/stream/types.ts

@@ -14,7 +14,7 @@ import type { Page } from '@/models/entities/Page.js';
 import type { Packed } from '@/misc/schema.js';
 import type { Webhook } from '@/models/entities/Webhook.js';
 import type { Meta } from '@/models/entities/Meta.js';
-import { Role, RoleAssignment } from '@/models';
+import { Following, Role, RoleAssignment } from '@/models';
 import type Emitter from 'strict-event-emitter-types';
 import type { EventEmitter } from 'events';
 
@@ -28,6 +28,8 @@ export interface InternalStreamTypes {
 	userChangeSuspendedState: Serialized<{ id: User['id']; isSuspended: User['isSuspended']; }>;
 	userTokenRegenerated: Serialized<{ id: User['id']; oldToken: User['token']; newToken: User['token']; }>;
 	remoteUserUpdated: Serialized<{ id: User['id']; }>;
+	follow: Serialized<{ followerId: User['id']; followeeId: User['id']; }>;
+	unfollow: Serialized<{ followerId: User['id']; followeeId: User['id']; }>;
 	defaultRoleOverrideUpdated: Serialized<Role['options']>;
 	roleCreated: Serialized<Role>;
 	roleDeleted: Serialized<Role>;

packages/frontend/package.json

@@ -37,7 +37,7 @@
 		"is-file-animated": "1.0.2",
 		"json5": "2.2.3",
 		"matter-js": "0.18.0",
-		"mfm-js": "0.23.1",
+		"mfm-js": "0.23.3",
 		"misskey-js": "0.0.14",
 		"photoswipe": "5.3.4",
 		"prismjs": "1.29.0",

packages/frontend/src/components/MkAnalogClock.vue

@@ -1,5 +1,5 @@
 <template>
-<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
+<svg :class="$style.root" viewBox="0 0 10 10" preserveAspectRatio="none">
 	<template v-if="props.graduations === 'dots'">
 		<circle
 			v-for="(angle, i) in graduationsMajor"
@@ -39,8 +39,7 @@
 	-->
 
 	<line
-		class="s"
-		:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
+		:class="[$style.s, { [$style.animate]: !disableSAnimate && sAnimation !== 'none', [$style.elastic]: sAnimation === 'elastic', [$style.easeOut]: sAnimation === 'easeOut' }]"
 		:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
 		:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
 		:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
@@ -205,21 +204,21 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.mbcofsoe {
+<style lang="scss" module>
+.root {
 	display: block;
+}
 
-	> .s {
-		will-change: transform;
-		transform-origin: 50% 50%;
+.s {
+	will-change: transform;
+	transform-origin: 50% 50%;
 
-		&.animate.elastic {
-			transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
-		}
+	&.animate.elastic {
+		transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
+	}
 
-		&.animate.easeOut {
-			transition: transform .7s cubic-bezier(0,.7,.3,1);
-		}
+	&.animate.easeOut {
+		transition: transform .7s cubic-bezier(0,.7,.3,1);
 	}
 }
 </style>

packages/frontend/src/components/MkCwButton.vue

@@ -1,7 +1,7 @@
 <template>
-<button class="nrvgflfu _button" @click="toggle">
+<button class="_button" :class="$style.root" @click="toggle">
 	<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
-	<span v-if="!modelValue">{{ label }}</span>
+	<span v-if="!modelValue" :class="$style.label">{{ label }}</span>
 </button>
 </template>
 
@@ -34,8 +34,8 @@ const toggle = () => {
 };
 </script>
 
-<style lang="scss" scoped>
-.nrvgflfu {
+<style lang="scss" module>
+.root {
 	display: inline-block;
 	padding: 4px 8px;
 	font-size: 0.7em;
@@ -46,17 +46,17 @@ const toggle = () => {
 	&:hover {
 		background: var(--cwHoverBg);
 	}
+}
 
-	> span {
-		margin-left: 4px;
+.label {
+	margin-left: 4px;
 
-		&:before {
-			content: '(';
-		}
+	&:before {
+		content: '(';
+	}
 
-		&:after {
-			content: ')';
-		}
+	&:after {
+		content: ')';
 	}
 }
 </style>

packages/frontend/src/components/MkDateSeparatedList.vue

@@ -1,13 +1,14 @@
 <script lang="ts">
-import { defineComponent, h, PropType, TransitionGroup } from 'vue';
+import { defineComponent, h, PropType, TransitionGroup, useCssModule } from 'vue';
 import MkAd from '@/components/global/MkAd.vue';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
+import { MisskeyEntity } from '@/types/date-separated-list';
 
 export default defineComponent({
 	props: {
 		items: {
-			type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
+			type: Array as PropType<MisskeyEntity[]>,
 			required: true,
 		},
 		direction: {
@@ -33,6 +34,7 @@ export default defineComponent({
 	},
 
 	setup(props, { slots, expose }) {
+		const $style = useCssModule();
 		function getDateText(time: string) {
 			const date = new Date(time).getDate();
 			const month = new Date(time).getMonth() + 1;
@@ -57,21 +59,25 @@ export default defineComponent({
 				new Date(item.createdAt).getDate() !== new Date(props.items[i + 1].createdAt).getDate()
 			) {
 				const separator = h('div', {
-					class: 'separator',
+					class: $style['separator'],
 					key: item.id + ':separator',
 				}, h('p', {
-					class: 'date',
+					class: $style['date'],
 				}, [
-					h('span', [
+					h('span', {
+						class: $style['date-1'],
+					}, [
 						h('i', {
-							class: 'ti ti-chevron-up icon',
+							class: `ti ti-chevron-up ${$style['date-1-icon']}`,
 						}),
 						getDateText(item.createdAt),
 					]),
-					h('span', [
+					h('span', {
+						class: $style['date-2'],
+					}, [
 						getDateText(props.items[i + 1].createdAt),
 						h('i', {
-							class: 'ti ti-chevron-down icon',
+							class: `ti ti-chevron-down ${$style['date-2-icon']}`,
 						}),
 					]),
 				]));
@@ -89,26 +95,62 @@ export default defineComponent({
 			}
 		});
 
+		function onBeforeLeave(el: HTMLElement) {
+			el.style.top = `${el.offsetTop}px`;
+			el.style.left = `${el.offsetLeft}px`;
+		}
+		function onLeaveCanceled(el: HTMLElement) {
+			el.style.top = '';
+			el.style.left = '';
+		}
+
 		return () => h(
 			defaultStore.state.animation ? TransitionGroup : 'div',
-			defaultStore.state.animation ? {
-				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-				name: 'list',
-				tag: 'div',
-				'data-direction': props.direction,
-				'data-reversed': props.reversed ? 'true' : 'false',
-			} : {
-				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
+			{
+					class: {
+						[$style['date-separated-list']]: true,
+						[$style['date-separated-list-nogap']]: props.noGap,
+						[$style['reversed']]: props.reversed,
+						[$style['direction-down']]: props.direction === 'down',
+						[$style['direction-up']]: props.direction === 'up',
+					},
+					...(defaultStore.state.animation ? {
+						name: 'list',
+						tag: 'div',
+						onBeforeLeave,
+						onLeaveCanceled,
+					} : {}),
 			},
 			{ default: renderChildren });
 	},
 });
 </script>
 
-<style lang="scss">
-.sqadhkmv {
+<style lang="scss" module>
+.date-separated-list {
 	container-type: inline-size;
 
+	&:global {
+	> .list-move {
+		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+	}
+
+	&.deny-move-transition > .list-move {
+		transition: none !important;
+	}
+
+	> .list-leave-active,
+	> .list-enter-active {
+		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+	}
+
+	> .list-leave-from,
+	> .list-leave-to,
+	> .list-leave-active {
+		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+		position: absolute !important;
+	}
+
 	> *:empty {
 		display: none;
 	}
@@ -116,73 +158,75 @@ export default defineComponent({
 	> *:not(:last-child) {
 		margin-bottom: var(--margin);
 	}
-
-	> .list-move {
-		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 	}
+}
 
-	> .list-enter-active {
-		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
-	}
+.date-separated-list-nogap {
+	> * {
+		margin: 0 !important;
+		border: none;
+		border-radius: 0;
+		box-shadow: none;
 
-	&[data-direction="up"] {
-		> .list-enter-from {
-			opacity: 0;
-			transform: translateY(64px);
-		}
-	}
-
-	&[data-direction="down"] {
-		> .list-enter-from {
-			opacity: 0;
-			transform: translateY(-64px);
-		}
-	}
-
-	> .separator {
-		text-align: center;
-
-		> .date {
-			display: inline-block;
-			position: relative;
-			margin: 0;
-			padding: 0 16px;
-			line-height: 32px;
-			text-align: center;
-			font-size: 12px;
-			color: var(--dateLabelFg);
-
-			> span {
-				&:first-child {
-					margin-right: 8px;
-
-					> .icon {
-						margin-right: 8px;
-					}
-				}
-
-				&:last-child {
-					margin-left: 8px;
-
-					> .icon {
-						margin-left: 8px;
-					}
-				}
-			}
-		}
-	}
-
-	&.noGap {
-		> * {
-			margin: 0 !important;
-			border: none;
-			border-radius: 0;
-			box-shadow: none;
-
-			&:not(:last-child) {
-				border-bottom: solid 0.5px var(--divider);
-			}
+		&:not(:last-child) {
+			border-bottom: solid 0.5px var(--divider);
 		}
 	}
 }
+
+.direction-up {
+	&:global {
+	> .list-enter-from,
+	> .list-leave-to {
+		opacity: 0;
+		transform: translateY(64px);
+	}
+	}
+}
+.direction-down {
+	&:global {
+	> .list-enter-from,
+	> .list-leave-to {
+		opacity: 0;
+		transform: translateY(-64px);
+	}
+	}
+}
+
+.reversed {
+	display: flex;
+	flex-direction: column-reverse;
+}
+
+.separator {
+	text-align: center;
+}
+
+.date {
+	display: inline-block;
+	position: relative;
+	margin: 0;
+	padding: 0 16px;
+	line-height: 32px;
+	text-align: center;
+	font-size: 12px;
+	color: var(--dateLabelFg);
+}
+
+.date-1 {
+	margin-right: 8px;
+}
+
+.date-1-icon {
+	margin-right: 8px;
+}
+
+.date-2 {
+	margin-left: 8px;
+}
+
+.date-2-icon {
+	margin-left: 8px;
+}
 </style>
+

packages/frontend/src/components/MkDigitalClock.vue

@@ -1,11 +1,11 @@
 <template>
-<span class="zjobosdg">
+<span>
 	<span v-text="hh"></span>
-	<span class="colon" :class="{ showColon }">:</span>
+	<span :class="[$style.colon, { [$style.showColon]: showColon }]">:</span>
 	<span v-text="mm"></span>
-	<span v-if="showS" class="colon" :class="{ showColon }">:</span>
+	<span v-if="showS" :class="[$style.colon, { [$style.showColon]: showColon }]">:</span>
 	<span v-if="showS" v-text="ss"></span>
-	<span v-if="showMs" class="colon" :class="{ showColon }">:</span>
+	<span v-if="showMs" :class="[$style.colon, { [$style.showColon]: showColon }]">:</span>
 	<span v-if="showMs" v-text="ms"></span>
 </span>
 </template>
@@ -62,16 +62,14 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.zjobosdg {
-	> .colon {
-		opacity: 0;
-		transition: opacity 1s ease;
+<style lang="scss" module>
+.colon {
+	opacity: 0;
+	transition: opacity 1s ease;
 
-		&.showColon {
-			opacity: 1;
-			transition: opacity 0s;
-		}
+	&.showColon {
+		opacity: 1;
+		transition: opacity 0s;
 	}
 }
 </style>

packages/frontend/src/components/MkFolder.vue

@@ -1,17 +1,20 @@
 <template>
-<div ref="rootEl" class="dwzlatin" :class="{ opened }">
-	<div class="header _button" @click="toggle">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot name="label"></slot></span>
-		<span class="right">
-			<span class="text"><slot name="suffix"></slot></span>
+<div ref="rootEl" :class="[$style.root, { [$style.opened]: opened }]">
+	<div :class="$style.header" class="_button" @click="toggle">
+		<span :class="$style.headerIcon"><slot name="icon"></slot></span>
+		<span :class="$style.headerText"><slot name="label"></slot></span>
+		<span :class="$style.headerRight">
+			<span :class="$style.headerRightText"><slot name="suffix"></slot></span>
 			<i v-if="opened" class="ti ti-chevron-up icon"></i>
 			<i v-else class="ti ti-chevron-down icon"></i>
 		</span>
 	</div>
-	<div v-if="openedAtLeastOnce" class="body" :class="{ bgSame }" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null }">
+	<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null }">
 		<Transition
-			:name="$store.state.animation ? 'folder-toggle' : ''"
+			:enter-active-class="$store.state.animation ? $style.transition_toggle_enterActive : ''"
+			:leave-active-class="$store.state.animation ? $style.transition_toggle_leaveActive : ''"
+			:enter-from-class="$store.state.animation ? $style.transition_toggle_enterFrom : ''"
+			:leave-to-class="$store.state.animation ? $style.transition_toggle_leaveTo : ''"
 			@enter="enter"
 			@after-enter="afterEnter"
 			@leave="leave"
@@ -94,85 +97,88 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.folder-toggle-enter-active, .folder-toggle-leave-active {
+<style lang="scss" module>
+.transition_toggle_enterActive,
+.transition_toggle_leaveActive {
 	overflow-y: clip;
 	transition: opacity 0.3s, height 0.3s, transform 0.3s !important;
 }
-.folder-toggle-enter-from, .folder-toggle-leave-to {
+.transition_toggle_enterFrom,
+.transition_toggle_leaveTo {
 	opacity: 0;
 }
 
-.dwzlatin {
+.root {
 	display: block;
 
-	> .header {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		box-sizing: border-box;
-		padding: 10px 14px 10px 14px;
-		background: var(--buttonBg);
-		border-radius: 6px;
-
-		&:hover {
-			text-decoration: none;
-			background: var(--buttonHoverBg);
-		}
-
-		&.active {
-			color: var(--accent);
-			background: var(--buttonHoverBg);
-		}
-
-		> .icon {
-			margin-right: 0.75em;
-			flex-shrink: 0;
-			text-align: center;
-			opacity: 0.8;
-
-			&:empty {
-				display: none;
-
-				& + .text {
-					padding-left: 4px;
-				}
-			}
-		}
-
-		> .text {
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			padding-right: 12px;
-		}
-
-		> .right {
-			margin-left: auto;
-			opacity: 0.7;
-			white-space: nowrap;
-
-			> .text:not(:empty) {
-				margin-right: 0.75em;
-			}
-		}
-	}
-
-	> .body {
-		background: var(--panel);
-		border-radius: 0 0 6px 6px;
-		container-type: inline-size;
-		overflow: auto;
-
-		&.bgSame {
-			background: var(--bg);
-		}
-	}
-
 	&.opened {
 		> .header {
 			border-radius: 6px 6px 0 0;
 		}
 	}
 }
+
+.header {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 9px 12px 9px 12px;
+	background: var(--buttonBg);
+	border-radius: 6px;
+	transition: border-radius 0.3s;
+
+	&:hover {
+		text-decoration: none;
+		background: var(--buttonHoverBg);
+	}
+
+	&.active {
+		color: var(--accent);
+		background: var(--buttonHoverBg);
+	}
+}
+
+.headerIcon {
+	margin-right: 0.75em;
+	flex-shrink: 0;
+	text-align: center;
+	opacity: 0.8;
+
+	&:empty {
+		display: none;
+
+		& + .headerText {
+			padding-left: 4px;
+		}
+	}
+}
+
+.headerText {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	padding-right: 12px;
+}
+
+.headerRight {
+	margin-left: auto;
+	opacity: 0.7;
+	white-space: nowrap;
+}
+
+.headerRightText:not(:empty) {
+	margin-right: 0.75em;
+}
+
+.body {
+	background: var(--panel);
+	border-radius: 0 0 6px 6px;
+	container-type: inline-size;
+	overflow: auto;
+
+	&.bgSame {
+		background: var(--bg);
+	}
+}
 </style>

packages/frontend/src/components/MkModal.vue

@@ -1,8 +1,15 @@
 <template>
-<Transition :name="transitionName" :duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened">
-	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" class="qzhlnise" :class="{ drawer: type === 'drawer', dialog: type === 'dialog' || type === 'dialog:top', popup: type === 'popup' }" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-		<div class="bg _modalBg" :class="{ transparent: transparentBg && (type === 'popup') }" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
-		<div ref="content" class="content" :class="{ fixed, top: type === 'dialog:top' }" :style="{ zIndex }" @click.self="onBgClick">
+<Transition
+	:name="transitionName"
+	:enter-active-class="$style['transition_' + transitionName + '_enterActive']"
+	:leave-active-class="$style['transition_' + transitionName + '_leaveActive']"
+	:enter-from-class="$style['transition_' + transitionName + '_enterFrom']"
+	:leave-to-class="$style['transition_' + transitionName + '_leaveTo']"
+	:duration="transitionDuration" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened"
+>
+	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog' || type === 'dialog:top', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+		<div class="_modalBg" :class="[$style.bg, { [$style.bgTransparent]: transparentBg && (type === 'popup') }]" :style="{ zIndex }" @click="onBgClick" @mousedown="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
+		<div ref="content" :class="[$style.content, { [$style.fixed]: fixed, [$style.top]: type === 'dialog:top' }]" :style="{ zIndex }" @click.self="onBgClick">
 			<slot :max-height="maxHeight" :type="type"></slot>
 		</div>
 	</div>
@@ -280,8 +287,9 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-.send-enter-active, .send-leave-active {
+<style lang="scss" module>
+.transition_send_enterActive,
+.transition_send_leaveActive {
 	> .bg {
 		transition: opacity 0.3s !important;
 	}
@@ -291,7 +299,8 @@ defineExpose({
 		transition: opacity 0.3s ease-in, transform 0.3s cubic-bezier(.5,-0.5,1,.5) !important;
 	}
 }
-.send-enter-from, .send-leave-to {
+.transition_send_enterFrom,
+.transition_send_leaveTo {
 	> .bg {
 		opacity: 0;
 	}
@@ -303,7 +312,8 @@ defineExpose({
 	}
 }
 
-.modal-enter-active, .modal-leave-active {
+.transition_modal_enterActive,
+.transition_modal_leaveActive {
 	> .bg {
 		transition: opacity 0.2s !important;
 	}
@@ -313,7 +323,8 @@ defineExpose({
 		transition: opacity 0.2s, transform 0.2s !important;
 	}
 }
-.modal-enter-from, .modal-leave-to {
+.transition_modal_enterFrom,
+.transition_modal_leaveTo {
 	> .bg {
 		opacity: 0;
 	}
@@ -326,7 +337,8 @@ defineExpose({
 	}
 }
 
-.modal-popup-enter-active, .modal-popup-leave-active {
+.transition_modal-popup_enterActive,
+.transition_modal-popup_leaveActive {
 	> .bg {
 		transition: opacity 0.1s !important;
 	}
@@ -336,7 +348,8 @@ defineExpose({
 		transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1), transform 0.1s cubic-bezier(0, 0, 0.2, 1) !important;
 	}
 }
-.modal-popup-enter-from, .modal-popup-leave-to {
+.transition_modal-popup_enterFrom,
+.transition_modal-popup_leaveTo {
 	> .bg {
 		opacity: 0;
 	}
@@ -349,7 +362,7 @@ defineExpose({
 	}
 }
 
-.modal-drawer-enter-active {
+.transition_modal-drawer_enterActive {
 	> .bg {
 		transition: opacity 0.2s !important;
 	}
@@ -358,7 +371,7 @@ defineExpose({
 		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
 	}
 }
-.modal-drawer-leave-active {
+.transition_modal-drawer_leaveActive {
 	> .bg {
 		transition: opacity 0.2s !important;
 	}
@@ -367,7 +380,8 @@ defineExpose({
 		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
 	}
 }
-.modal-drawer-enter-from, .modal-drawer-leave-to {
+.transition_modal-drawer_enterFrom,
+.transition_modal-drawer_leaveTo {
 	> .bg {
 		opacity: 0;
 	}
@@ -378,15 +392,7 @@ defineExpose({
 	}
 }
 
-.qzhlnise {
-	> .bg {
-		&.transparent {
-			background: transparent;
-			-webkit-backdrop-filter: none;
-			backdrop-filter: none;
-		}
-	}
-
+.root {
 	&.dialog {
 		> .content {
 			position: fixed;
@@ -408,12 +414,12 @@ defineExpose({
 				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
 			}
 
-			> ::v-deep(*) {
+			&:global > * {
 				margin: auto;
 			}
 
 			&.top {
-				> ::v-deep(*) {
+				&:global > * {
 					margin-top: 0;
 				}
 			}
@@ -445,11 +451,18 @@ defineExpose({
 			right: 0;
 			margin: auto;
 
-			> ::v-deep(*) {
+			&:global > * {
 				margin: auto;
 			}
 		}
 	}
+}
 
+.bg {
+	&.bgTransparent {
+		background: transparent;
+		-webkit-backdrop-filter: none;
+		backdrop-filter: none;
+	}
 }
 </style>

packages/frontend/src/components/MkNotes.vue

@@ -9,7 +9,16 @@
 
 	<template #default="{ items: notes }">
 		<div :class="[$style.root, { [$style.noGap]: noGap }]">
-			<MkDateSeparatedList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" :class="$style.notes">
+			<MkDateSeparatedList
+				ref="notes"
+				v-slot="{ item: note }"
+				:items="notes"
+				:direction="pagination.reversed ? 'up' : 'down'"
+				:reversed="pagination.reversed"
+				:no-gap="noGap"
+				:ad="true"
+				:class="$style.notes"
+			>
 				<XNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note"/>
 			</MkDateSeparatedList>
 		</div>

packages/frontend/src/components/MkNotification.vue

@@ -35,26 +35,26 @@
 		<div v-once :class="$style.content">
 			<MkA v-if="notification.type === 'reaction'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
 				<i class="ti ti-quote" :class="$style.quote"></i>
 			</MkA>
 			<MkA v-else-if="notification.type === 'renote'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
-				<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full"/>
+				<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :author="notification.note.renote.user"/>
 				<i class="ti ti-quote" :class="$style.quote"></i>
 			</MkA>
 			<MkA v-else-if="notification.type === 'reply'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
 			</MkA>
 			<MkA v-else-if="notification.type === 'mention'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
 			</MkA>
 			<MkA v-else-if="notification.type === 'quote'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
 			</MkA>
 			<MkA v-else-if="notification.type === 'pollEnded'" :class="$style.text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 				<i class="ti ti-quote" :class="$style.quote"></i>
-				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full"/>
+				<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :author="notification.note.user"/>
 				<i class="ti ti-quote" :class="$style.quote"></i>
 			</MkA>
 			<span v-else-if="notification.type === 'follow'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>

packages/frontend/src/components/MkNotifications.vue

@@ -8,7 +8,7 @@
 	</template>
 
 	<template #default="{ items: notifications }">
-		<MkDateSeparatedList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
+		<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :no-gap="true">
 			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
 			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
 		</MkDateSeparatedList>
@@ -97,8 +97,8 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.elsfgstc {
+<style lang="scss" module>
+.list {
 	background: var(--panel);
 }
 </style>

packages/frontend/src/components/MkPageWindow.vue

@@ -17,7 +17,7 @@
 		</template>
 	</template>
 
-	<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }" style="container-type: inline-size;">
+	<div :class="$style.root" :style="{ background: pageMetadata?.value?.bg }" style="container-type: inline-size;">
 		<RouterView :router="router"/>
 	</div>
 </MkWindow>
@@ -133,8 +133,8 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-.yrolvcoq {
+<style lang="scss" module>
+.root {
 	min-height: 100%;
 	background: var(--bg);
 

packages/frontend/src/components/MkPagination.vue

@@ -1,5 +1,11 @@
 <template>
-<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+<Transition
+	:enter-active-class="$store.state.animation ? $style.transition_fade_enterActive : ''"
+	:leave-active-class="$store.state.animation ? $style.transition_fade_leaveActive : ''"
+	:enter-from-class="$store.state.animation ? $style.transition_fade_enterFrom : ''"
+	:leave-to-class="$store.state.animation ? $style.transition_fade_leaveTo : ''"
+	mode="out-in"
+>
 	<MkLoading v-if="fetching"/>
 
 	<MkError v-else-if="error" @retry="init()"/>
@@ -14,15 +20,15 @@
 	</div>
 
 	<div v-else ref="rootEl">
-		<div v-show="pagination.reversed && more" key="_more_" class="cxiknjgy _margin">
-			<MkButton v-if="!moreFetching" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMoreAhead">
+		<div v-show="pagination.reversed && more" key="_more_" class="_margin">
+			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
 				{{ i18n.ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else class="loading"/>
 		</div>
-		<slot :items="items"></slot>
-		<div v-show="!pagination.reversed && more" key="_more_" class="cxiknjgy _margin">
-			<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
+		<slot :items="items" :fetching="fetching || moreFetching"></slot>
+		<div v-show="!pagination.reversed && more" key="_more_" class="_margin">
+			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
 				{{ i18n.ts.loadMore }}
 			</MkButton>
 			<MkLoading v-else class="loading"/>
@@ -31,15 +37,18 @@
 </Transition>
 </template>
 
-<script lang="ts" setup>
-import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref, ref, shallowRef, watch } from 'vue';
+<script lang="ts">
+import { computed, ComputedRef, isRef, nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
-import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
+import { onScrollTop, isTopVisible, getBodyScrollHeight, getScrollContainer, onScrollBottom, scrollToBottom, scroll, isBottomVisible } from '@/scripts/scroll';
 import MkButton from '@/components/MkButton.vue';
+import { defaultStore } from '@/store';
+import { MisskeyEntity } from '@/types/date-separated-list';
 import { i18n } from '@/i18n';
 
 const SECOND_FETCH_LIMIT = 30;
+const TOLERANCE = 16;
 
 export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints> = {
 	endpoint: E;
@@ -58,8 +67,11 @@ export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints>
 	reversed?: boolean;
 
 	offsetMode?: boolean;
-};
 
+	pageEl?: HTMLElement;
+};
+</script>
+<script lang="ts" setup>
 const props = withDefaults(defineProps<{
 	pagination: Paging;
 	disableAutoLoad?: boolean;
@@ -72,21 +84,73 @@ const emit = defineEmits<{
 	(ev: 'queue', count: number): void;
 }>();
 
-type Item = { id: string; [another: string]: unknown; };
+let rootEl = $shallowRef<HTMLElement>();
 
-const rootEl = shallowRef<HTMLElement>();
-const items = ref<Item[]>([]);
-const queue = ref<Item[]>([]);
+// 遡り中かどうか
+let backed = $ref(false);
+
+let scrollRemove = $ref<(() => void) | null>(null);
+
+const items = ref<MisskeyEntity[]>([]);
+const queue = ref<MisskeyEntity[]>([]);
 const offset = ref(0);
 const fetching = ref(true);
 const moreFetching = ref(false);
 const more = ref(false);
-const backed = ref(false); // 遡り中か否か
 const isBackTop = ref(false);
 const empty = computed(() => items.value.length === 0);
 const error = ref(false);
+const {
+	enableInfiniteScroll,
+} = defaultStore.reactiveState;
 
-const init = async (): Promise<void> => {
+const contentEl = $computed(() => props.pagination.pageEl || rootEl);
+const scrollableElement = $computed(() => getScrollContainer(contentEl));
+
+// 先頭が表示されているかどうかを検出
+// https://qiita.com/mkataigi/items/0154aefd2223ce23398e
+let scrollObserver = $ref<IntersectionObserver>();
+
+watch([() => props.pagination.reversed, $$(scrollableElement)], () => {
+	if (scrollObserver) scrollObserver.disconnect();
+
+	scrollObserver = new IntersectionObserver(entries => {
+		backed = entries[0].isIntersecting;
+	}, {
+		root: scrollableElement,
+		rootMargin: props.pagination.reversed ? '-100% 0px 100% 0px' : '100% 0px -100% 0px',
+		threshold: 0.01,
+	});
+}, { immediate: true });
+
+watch($$(rootEl), () => {
+	scrollObserver.disconnect();
+	nextTick(() => {
+		if (rootEl) scrollObserver.observe(rootEl);
+	});
+});
+
+watch([$$(backed), $$(contentEl)], () => {
+	if (!backed) {
+		if (!contentEl) return;
+
+		scrollRemove = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl, executeQueue, TOLERANCE);
+	} else {
+		if (scrollRemove) scrollRemove();
+		scrollRemove = null;
+	}
+});
+
+if (props.pagination.params && isRef(props.pagination.params)) {
+	watch(props.pagination.params, init, { deep: true });
+}
+
+watch(queue, (a, b) => {
+	if (a.length === 0 && b.length === 0) return;
+	emit('queue', queue.value.length);
+}, { deep: true });
+
+async function init(): Promise<void> {
 	queue.value = [];
 	fetching.value = true;
 	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
@@ -96,18 +160,15 @@ const init = async (): Promise<void> => {
 	}).then(res => {
 		for (let i = 0; i < res.length; i++) {
 			const item = res[i];
-			if (props.pagination.reversed) {
-				if (i === res.length - 2) item._shouldInsertAd_ = true;
-			} else {
-				if (i === 3) item._shouldInsertAd_ = true;
-			}
+			if (i === 3) item._shouldInsertAd_ = true;
 		}
 		if (!props.pagination.noPaging && (res.length > (props.pagination.limit || 10))) {
 			res.pop();
-			items.value = props.pagination.reversed ? [...res].reverse() : res;
+			if (props.pagination.reversed) moreFetching.value = true;
+			items.value = res;
 			more.value = true;
 		} else {
-			items.value = props.pagination.reversed ? [...res].reverse() : res;
+			items.value = res;
 			more.value = false;
 		}
 		offset.value = res.length;
@@ -117,17 +178,16 @@ const init = async (): Promise<void> => {
 		error.value = true;
 		fetching.value = false;
 	});
-};
+}
 
-const reload = (): void => {
+const reload = (): Promise<void> => {
 	items.value = [];
-	init();
+	return init();
 };
 
 const fetchMore = async (): Promise<void> => {
 	if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
 	moreFetching.value = true;
-	backed.value = true;
 	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
 	await os.api(props.pagination.endpoint, {
 		...params,
@@ -142,22 +202,52 @@ const fetchMore = async (): Promise<void> => {
 	}).then(res => {
 		for (let i = 0; i < res.length; i++) {
 			const item = res[i];
-			if (props.pagination.reversed) {
-				if (i === res.length - 9) item._shouldInsertAd_ = true;
-			} else {
-				if (i === 10) item._shouldInsertAd_ = true;
-			}
+			if (i === 10) item._shouldInsertAd_ = true;
 		}
+
+		const reverseConcat = _res => {
+			const oldHeight = scrollableElement ? scrollableElement.scrollHeight : getBodyScrollHeight();
+			const oldScroll = scrollableElement ? scrollableElement.scrollTop : window.scrollY;
+
+			items.value = items.value.concat(_res);
+
+			return nextTick(() => {
+				if (scrollableElement) {
+					scroll(scrollableElement, { top: oldScroll + (scrollableElement.scrollHeight - oldHeight), behavior: 'instant' });
+				} else {
+					window.scroll({ top: oldScroll + (getBodyScrollHeight() - oldHeight), behavior: 'instant' });
+				}
+
+				return nextTick();
+			});
+		};
+
 		if (res.length > SECOND_FETCH_LIMIT) {
 			res.pop();
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-			more.value = true;
+
+			if (props.pagination.reversed) {
+				reverseConcat(res).then(() => {
+					more.value = true;
+					moreFetching.value = false;
+				});
+			} else {
+				items.value = items.value.concat(res);
+				more.value = true;
+				moreFetching.value = false;
+			}
 		} else {
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-			more.value = false;
+			if (props.pagination.reversed) {
+				reverseConcat(res).then(() => {
+					more.value = false;
+					moreFetching.value = false;
+				});
+			} else {
+				items.value = items.value.concat(res);
+				more.value = false;
+				moreFetching.value = false;
+			}
 		}
 		offset.value += res.length;
-		moreFetching.value = false;
 	}, err => {
 		moreFetching.value = false;
 	});
@@ -180,10 +270,10 @@ const fetchMoreAhead = async (): Promise<void> => {
 	}).then(res => {
 		if (res.length > SECOND_FETCH_LIMIT) {
 			res.pop();
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
+			items.value = items.value.concat(res);
 			more.value = true;
 		} else {
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
+			items.value = items.value.concat(res);
 			more.value = false;
 		}
 		offset.value += res.length;
@@ -193,125 +283,113 @@ const fetchMoreAhead = async (): Promise<void> => {
 	});
 };
 
-const prepend = (item: Item): void => {
-	if (props.pagination.reversed) {
-		if (rootEl.value) {
-			const container = getScrollContainer(rootEl.value);
-			if (container == null) {
-				// TODO?
-			} else {
-				const pos = getScrollPosition(rootEl.value);
-				const viewHeight = container.clientHeight;
-				const height = container.scrollHeight;
-				const isBottom = (pos + viewHeight > height - 32);
-				if (isBottom) {
-					// オーバーフローしたら古いアイテムは捨てる
-					if (items.value.length >= props.displayLimit) {
-						// このやり方だとVue 3.2以降アニメーションが動かなくなる
-						//items.value = items.value.slice(-props.displayLimit);
-						while (items.value.length >= props.displayLimit) {
-							items.value.shift();
-						}
-						more.value = true;
-					}
-				}
-			}
-		}
-		items.value.push(item);
-		// TODO
-	} else {
-		// 初回表示時はunshiftだけでOK
-		if (!rootEl.value) {
-			items.value.unshift(item);
-			return;
-		}
-
-		const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value));
-
-		if (isTop) {
-			// Prepend the item
-			items.value.unshift(item);
-
-			// オーバーフローしたら古いアイテムは捨てる
-			if (items.value.length >= props.displayLimit) {
-				// このやり方だとVue 3.2以降アニメーションが動かなくなる
-				//this.items = items.value.slice(0, props.displayLimit);
-				while (items.value.length >= props.displayLimit) {
-					items.value.pop();
-				}
-				more.value = true;
-			}
-		} else {
-			queue.value.push(item);
-			onScrollTop(rootEl.value, () => {
-				for (const item of queue.value) {
-					prepend(item);
-				}
-				queue.value = [];
-			});
-		}
+const prepend = (item: MisskeyEntity): void => {
+	// 初回表示時はunshiftだけでOK
+	if (!rootEl) {
+		items.value.unshift(item);
+		return;
 	}
+
+	const isTop = isBackTop.value || (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl, TOLERANCE);
+
+	if (isTop) unshiftItems([item]);
+	else prependQueue(item);
 };
 
-const append = (item: Item): void => {
+function unshiftItems(newItems: MisskeyEntity[]) {
+	const length = newItems.length + items.value.length;
+	items.value = [...newItems, ...items.value].slice(0, props.displayLimit);
+
+	if (length >= props.displayLimit) more.value = true;
+}
+
+function executeQueue() {
+	if (queue.value.length === 0) return;
+	unshiftItems(queue.value);
+	queue.value = [];
+}
+
+function prependQueue(newItem: MisskeyEntity) {
+	queue.value.unshift(newItem);
+	if (queue.value.length >= props.displayLimit) {
+		queue.value.pop();
+	}
+}
+
+const appendItem = (item: MisskeyEntity): void => {
 	items.value.push(item);
 };
 
-const removeItem = (finder: (item: Item) => boolean) => {
+const removeItem = (finder: (item: MisskeyEntity) => boolean) => {
 	const i = items.value.findIndex(finder);
 	items.value.splice(i, 1);
 };
 
-const updateItem = (id: Item['id'], replacer: (old: Item) => Item): void => {
+const updateItem = (id: MisskeyEntity['id'], replacer: (old: MisskeyEntity) => MisskeyEntity): void => {
 	const i = items.value.findIndex(item => item.id === id);
 	items.value[i] = replacer(items.value[i]);
 };
 
-if (props.pagination.params && isRef(props.pagination.params)) {
-	watch(props.pagination.params, init, { deep: true });
-}
-
-watch(queue, (a, b) => {
-	if (a.length === 0 && b.length === 0) return;
-	emit('queue', queue.value.length);
-}, { deep: true });
-
-init();
+const inited = init();
 
 onActivated(() => {
 	isBackTop.value = false;
 });
 
 onDeactivated(() => {
-	isBackTop.value = window.scrollY === 0;
+	isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl ? rootEl.scrollHeight - window.innerHeight : 0) : window.scrollY === 0;
+});
+
+function toBottom() {
+	scrollToBottom(contentEl);
+}
+
+onMounted(() => {
+	inited.then(() => {
+		if (props.pagination.reversed) {
+			nextTick(() => {
+				setTimeout(toBottom, 800);
+
+				// scrollToBottomでmoreFetchingボタンが画面外まで出るまで
+				// more = trueを遅らせる
+				setTimeout(() => {
+					moreFetching.value = false;
+				}, 2000);
+			});
+		}
+	});
+});
+
+onBeforeUnmount(() => {
+	scrollObserver.disconnect();
 });
 
 defineExpose({
 	items,
 	queue,
 	backed,
+	more,
+	inited,
 	reload,
 	prepend,
-	append,
+	append: appendItem,
 	removeItem,
 	updateItem,
 });
 </script>
 
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
+<style lang="scss" module>
+.transition_fade_enterActive,
+.transition_fade_leaveActive {
 	transition: opacity 0.125s ease;
 }
-.fade-enter-from,
-.fade-leave-to {
+.transition_fade_enterFrom,
+.transition_fade_leaveTo {
 	opacity: 0;
 }
 
-.cxiknjgy {
-	> .button {
-		margin-left: auto;
-		margin-right: auto;
-	}
+.more {
+	margin-left: auto;
+	margin-right: auto;
 }
 </style>

packages/frontend/src/components/MkPopupMenu.vue

@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @close="emit('closing')" @closed="emit('closed')">
-	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
+	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" :class="{ [$style.drawer]: type === 'drawer' }" @close="modal.close()"/>
 </MkModal>
 </template>
 
@@ -26,12 +26,10 @@ const emit = defineEmits<{
 let modal = $shallowRef<InstanceType<typeof MkModal>>();
 </script>
 
-<style lang="scss" scoped>
-.sfhdhdhq {
-	&.drawer {
-		border-radius: 24px;
-		border-bottom-right-radius: 0;
-		border-bottom-left-radius: 0;
-	}
+<style lang="scss" module>
+.drawer {
+	border-radius: 24px;
+	border-bottom-right-radius: 0;
+	border-bottom-left-radius: 0;
 }
 </style>

packages/frontend/src/components/MkPostForm.vue

@@ -1,66 +1,65 @@
 <template>
 <div
-	class="gafaadew"
-	:class="{ modal, _popup: modal }"
+	:class="[$style.root, { [$style.modal]: modal, _popup: modal }]"
 	@dragover.stop="onDragover"
 	@dragenter="onDragenter"
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
-	<header>
-		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="ti ti-x"></i></button>
-		<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
-			<MkAvatar :user="postAccount ?? $i" class="avatar"/>
+	<header :class="$style.header">
+		<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button>
+		<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu">
+			<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/>
 		</button>
-		<div class="right">
-			<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
-			<span v-if="localOnly" class="local-only"><i class="ti ti-world-off"></i></span>
-			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
+		<div :class="$style.headerRight">
+			<span :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</span>
+			<span v-if="localOnly" :class="$style.localOnly"><i class="ti ti-world-off"></i></span>
+			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button" :class="$style.visibility" :disabled="channel != null" @click="setVisibility">
 				<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
 				<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
 				<span v-if="visibility === 'followers'"><i class="ti ti-lock"></i></span>
 				<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
 			</button>
-			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
-			<button v-click-anime class="submit _button" :class="{ posting }" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
-				<div class="inner">
+			<button v-tooltip="i18n.ts.previewNoteText" class="_button" :class="[$style.previewButton, { [$style.previewButtonActive]: showPreview }]" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
+			<button v-click-anime class="_button" :class="[$style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
+				<div :class="$style.submitInner">
 					<template v-if="posted"></template>
 					<template v-else-if="posting"><MkEllipsis/></template>
 					<template v-else>{{ submitText }}</template>
-					<i :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
+					<i style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
 				</div>
 			</button>
 		</div>
 	</header>
-	<div class="form" :class="{ fixed }">
-		<MkNoteSimple v-if="reply" class="preview" :note="reply"/>
-		<MkNoteSimple v-if="renote" class="preview" :note="renote"/>
-		<div v-if="quoteId" class="with-quote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
-		<div v-if="visibility === 'specified'" class="to-specified">
+	<div :class="[$style.form]">
+		<MkNoteSimple v-if="reply" :class="$style.targetNote" :note="reply"/>
+		<MkNoteSimple v-if="renote" :class="$style.targetNote" :note="renote"/>
+		<div v-if="quoteId" :class="$style.withQuote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
+		<div v-if="visibility === 'specified'" :class="$style.toSpecified">
 			<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
-			<div class="visibleUsers">
-				<span v-for="u in visibleUsers" :key="u.id">
+			<div :class="$style.visibleUsers">
+				<span v-for="u in visibleUsers" :key="u.id" :class="$style.visibleUser">
 					<MkAcct :user="u"/>
-					<button class="_button" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
+					<button class="_button" style="padding: 4px 8px;" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
 				</span>
-				<button class="_buttonPrimary" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
+				<button class="_buttonPrimary" style="padding: 4px; border-radius: 8px;" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
 			</div>
 		</div>
-		<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
-		<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-		<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
-		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
-		<XPostFormAttaches v-model="files" class="attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
+		<MkInfo v-if="hasNotSpecifiedMentions" warn :class="$style.hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
+		<input v-show="useCw" ref="cwInputEl" v-model="cw" :class="$style.cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
+		<textarea ref="textareaEl" v-model="text" :class="[$style.text, { [$style.withCw]: useCw }]" :disabled="posting || posted" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" :class="$style.hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
+		<XPostFormAttaches v-model="files" :class="$style.attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
 		<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
-		<XNotePreview v-if="showPreview" class="preview" :text="text"/>
-		<footer>
-			<button v-tooltip="i18n.ts.attachFile" class="_button" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
-			<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
-			<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
-			<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="ti ti-at"></i></button>
-			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
-			<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
-			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ti ti-plug"></i></button>
+		<XNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
+		<footer :class="$style.footer">
+			<button v-tooltip="i18n.ts.attachFile" class="_button" :class="$style.footerButton" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
+			<button v-tooltip="i18n.ts.poll" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: poll }]" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
+			<button v-tooltip="i18n.ts.useCw" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: useCw }]" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
+			<button v-tooltip="i18n.ts.mention" class="_button" :class="$style.footerButton" @click="insertMention"><i class="ti ti-at"></i></button>
+			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="[$style.footerButton, { [$style.footerButtonActive]: withHashtags }]" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
+			<button v-tooltip="i18n.ts.emoji" class="_button" :class="$style.footerButton" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" :class="$style.footerButton" @click="showActions"><i class="ti ti-plug"></i></button>
 		</footer>
 		<datalist id="hashtags">
 			<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
@@ -742,306 +741,275 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-.gafaadew {
+<style lang="scss" module>
+.root {
 	position: relative;
 
 	&.modal {
 		width: 100%;
 		max-width: 520px;
 	}
+}
 
-	> header {
-		z-index: 1000;
-		height: 66px;
+.header {
+	z-index: 1000;
+	height: 66px;
+}
 
-		> .cancel {
-			padding: 0;
-			font-size: 1em;
-			width: 64px;
-			line-height: 66px;
-		}
+.cancel {
+	padding: 0;
+	font-size: 1em;
+	width: 64px;
+	line-height: 66px;
+}
 
-		> .account {
-			height: 100%;
-			aspect-ratio: 1/1;
-			display: inline-flex;
-			vertical-align: bottom;
+.account {
+	height: 100%;
+	aspect-ratio: 1/1;
+	display: inline-flex;
+	vertical-align: bottom;
+}
 
-			> .avatar {
-				width: 28px;
-				height: 28px;
-				margin: auto;
-			}
-		}
+.avatar {
+	width: 28px;
+	height: 28px;
+	margin: auto;
+}
 
-		> .right {
-			position: absolute;
-			top: 0;
-			right: 0;
+.headerRight {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
 
-			> .text-count {
-				opacity: 0.7;
-				line-height: 66px;
-			}
+.textCount {
+	opacity: 0.7;
+	line-height: 66px;
+}
 
-			> .visibility {
-				height: 34px;
-				width: 34px;
-				margin: 0 0 0 8px;
+.visibility {
+	height: 34px;
+	width: 34px;
+	margin: 0 0 0 8px;
 
-				& + .localOnly {
-					margin-left: 0 !important;
-				}
-			}
-			
-			> .local-only {
-				margin: 0 0 0 12px;
-				opacity: 0.7;
-			}
+	& + .localOnly {
+		margin-left: 0 !important;
+	}
+}
 
-			> .preview {
-				display: inline-block;
-				padding: 0;
-				margin: 0 8px 0 0;
-				font-size: 16px;
-				width: 34px;
-				height: 34px;
-				border-radius: 6px;
+.localOnly {
+	margin: 0 0 0 12px;
+	opacity: 0.7;
+}
 
-				&:hover {
-					background: var(--X5);
-				}
+.previewButton {
+	display: inline-block;
+	padding: 0;
+	margin: 0 8px 0 0;
+	font-size: 16px;
+	width: 34px;
+	height: 34px;
+	border-radius: 6px;
 
-				&.active {
-					color: var(--accent);
-				}
-			}
+	&:hover {
+		background: var(--X5);
+	}
 
-			> .submit {
-				margin: 16px 16px 16px 0;
-				vertical-align: bottom;
+	&.previewButtonActive {
+		color: var(--accent);
+	}
+}
 
-				&:disabled {
-					opacity: 0.7;
-				}
+.submit {
+	margin: 16px 16px 16px 0;
+	vertical-align: bottom;
 
-				&.posting {
-					cursor: wait;
-				}
+	&:disabled {
+		opacity: 0.7;
+	}
 
-				&:not(:disabled):hover {
-					> .inner {
-						background: linear-gradient(90deg, var(--X8), var(--X8));
-					}
-				}
+	&.posting {
+		cursor: wait;
+	}
 
-				&:not(:disabled):active {
-					> .inner {
-						background: linear-gradient(90deg, var(--X8), var(--X8));
-					}
-				}
-
-				> .inner {
-					padding: 0 12px;
-					line-height: 34px;
-					font-weight: bold;
-					border-radius: 4px;
-					font-size: 0.9em;
-					min-width: 90px;
-					box-sizing: border-box;
-					color: var(--fgOnAccent);
-					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-
-					> i {
-						margin-left: 6px;
-					}
-				}
-			}
+	&:not(:disabled):hover {
+		> .inner {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
 		}
 	}
 
-	> .form {
-		> .preview {
-			padding: 16px;
+	&:not(:disabled):active {
+		> .inner {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
 		}
+	}
+}
 
-		> .with-quote {
-			margin: 0 0 8px 0;
-			color: var(--accent);
+.submitInner {
+	padding: 0 12px;
+	line-height: 34px;
+	font-weight: bold;
+	border-radius: 4px;
+	font-size: 0.9em;
+	min-width: 90px;
+	box-sizing: border-box;
+	color: var(--fgOnAccent);
+	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+}
 
-			> button {
-				padding: 4px 8px;
-				color: var(--accentAlpha04);
+.form {
+}
 
-				&:hover {
-					color: var(--accentAlpha06);
-				}
+.preview {
+	padding: 16px 20px 0 20px;
+}
 
-				&:active {
-					color: var(--accentDarken30);
-				}
-			}
-		}
+.targetNote {
+	padding: 0 20px 16px 20px;
+}
 
-		> .to-specified {
-			padding: 6px 24px;
-			margin-bottom: 8px;
-			overflow: auto;
-			white-space: nowrap;
+.withQuote {
+	margin: 0 0 8px 0;
+	color: var(--accent);
+}
 
-			> .visibleUsers {
-				display: inline;
-				top: -1px;
-				font-size: 14px;
+.toSpecified {
+	padding: 6px 24px;
+	margin-bottom: 8px;
+	overflow: auto;
+	white-space: nowrap;
+}
 
-				> button {
-					padding: 4px;
-					border-radius: 8px;
-				}
+.visibleUsers {
+	display: inline;
+	top: -1px;
+	font-size: 14px;
+}
 
-				> span {
-					margin-right: 14px;
-					padding: 8px 0 8px 8px;
-					border-radius: 8px;
-					background: var(--X4);
+.visibleUser {
+	margin-right: 14px;
+	padding: 8px 0 8px 8px;
+	border-radius: 8px;
+	background: var(--X4);
+}
 
-					> button {
-						padding: 4px 8px;
-					}
-				}
-			}
-		}
+.hasNotSpecifiedMentions {
+	margin: 0 20px 16px 20px;
+}
 
-		> .hasNotSpecifiedMentions {
-			margin: 0 20px 16px 20px;
-		}
+.cw,
+.hashtags,
+.text {
+	display: block;
+	box-sizing: border-box;
+	padding: 0 24px;
+	margin: 0;
+	width: 100%;
+	font-size: 16px;
+	border: none;
+	border-radius: 0;
+	background: transparent;
+	color: var(--fg);
+	font-family: inherit;
 
-		> .cw,
-		> .hashtags,
-		> .text {
-			display: block;
-			box-sizing: border-box;
-			padding: 0 24px;
-			margin: 0;
-			width: 100%;
-			font-size: 16px;
-			border: none;
-			border-radius: 0;
-			background: transparent;
-			color: var(--fg);
-			font-family: inherit;
+	&:focus {
+		outline: none;
+	}
 
-			&:focus {
-				outline: none;
-			}
+	&:disabled {
+		opacity: 0.5;
+	}
+}
 
-			&:disabled {
-				opacity: 0.5;
-			}
-		}
+.cw {
+	z-index: 1;
+	padding-bottom: 8px;
+	border-bottom: solid 0.5px var(--divider);
+}
 
-		> .cw {
-			z-index: 1;
-			padding-bottom: 8px;
-			border-bottom: solid 0.5px var(--divider);
-		}
+.hashtags {
+	z-index: 1;
+	padding-top: 8px;
+	padding-bottom: 8px;
+	border-top: solid 0.5px var(--divider);
+}
 
-		> .hashtags {
-			z-index: 1;
-			padding-top: 8px;
-			padding-bottom: 8px;
-			border-top: solid 0.5px var(--divider);
-		}
+.text {
+	max-width: 100%;
+	min-width: 100%;
+	min-height: 90px;
 
-		> .text {
-			max-width: 100%;
-			min-width: 100%;
-			min-height: 90px;
+	&.withCw {
+		padding-top: 8px;
+	}
+}
 
-			&.withCw {
-				padding-top: 8px;
-			}
-		}
+.footer {
+	padding: 0 16px 16px 16px;
+}
 
-		> footer {
-			padding: 0 16px 16px 16px;
+.footerButton {
+	display: inline-block;
+	padding: 0;
+	margin: 0;
+	font-size: 1em;
+	width: 46px;
+	height: 46px;
+	border-radius: 6px;
 
-			> button {
-				display: inline-block;
-				padding: 0;
-				margin: 0;
-				font-size: 1em;
-				width: 46px;
-				height: 46px;
-				border-radius: 6px;
+	&:hover {
+		background: var(--X5);
+	}
 
-				&:hover {
-					background: var(--X5);
-				}
-
-				&.active {
-					color: var(--accent);
-				}
-			}
-		}
+	&.footerButtonActive {
+		color: var(--accent);
 	}
 }
 
 @container (max-width: 500px) {
-	.gafaadew {
-		> header {
-			height: 50px;
+	.header {
+		height: 50px;
 
-			> .cancel {
-				width: 50px;
+		> .cancel {
+			width: 50px;
+			line-height: 50px;
+		}
+
+		> .headerRight {
+			> .textCount {
 				line-height: 50px;
 			}
 
-			> .right {
-				> .text-count {
-					line-height: 50px;
-				}
-
-				> .submit {
-					margin: 8px;
-				}
+			> .submit {
+				margin: 8px;
 			}
 		}
+	}
 
-		> .form {
-			> .to-specified {
-				padding: 6px 16px;
-			}
+	.toSpecified {
+		padding: 6px 16px;
+	}
 
-			> .cw,
-			> .hashtags,
-			> .text {
-				padding: 0 16px;
-			}
+	.cw,
+	.hashtags,
+	.text {
+		padding: 0 16px;
+	}
 
-			> .text {
-				min-height: 80px;
-			}
+	.text {
+		min-height: 80px;
+	}
 
-			> footer {
-				padding: 0 8px 8px 8px;
-			}
-		}
+	.footer {
+		padding: 0 8px 8px 8px;
 	}
 }
 
 @container (max-width: 310px) {
-	.gafaadew {
-		> .form {
-			> footer {
-				> button {
-					font-size: 14px;
-					width: 44px;
-					height: 44px;
-				}
-			}
-		}
+	.footerButton {
+		font-size: 14px;
+		width: 44px;
+		height: 44px;
 	}
 }
 </style>

packages/frontend/src/components/MkReactionEffect.vue

@@ -1,6 +1,6 @@
 <template>
 <div :class="$style.root" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
-	<span class="text" :class="{ up }">
+	<span :class="[$style.text, { [$style.up]: up }]">
 		<MkReactionIcon class="icon" :reaction="reaction"/>
 	</span>
 </div>
@@ -43,30 +43,28 @@ onMounted(() => {
 	position: fixed;
 	width: 128px;
 	height: 128px;
+}
 
-	&:global {
-		> .text {
-			display: block;
-			height: 1em;
-			text-align: center;
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			margin: auto;
-			color: var(--accent);
-			font-size: 18px;
-			font-weight: bold;
-			transform: translateY(-30px);
-			transition: transform 1s cubic-bezier(0,.5,0,1), opacity 1s cubic-bezier(.5,0,1,.5);
-			will-change: opacity, transform;
+.text {
+	display: block;
+	height: 1em;
+	text-align: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	margin: auto;
+	color: var(--accent);
+	font-size: 18px;
+	font-weight: bold;
+	transform: translateY(-30px);
+	transition: transform 1s cubic-bezier(0,.5,0,1), opacity 1s cubic-bezier(.5,0,1,.5);
+	will-change: opacity, transform;
 
-			&.up {
-				opacity: 0;
-				transform: translateY(-50px) rotateZ(v-bind(angle));
-			}
-		}
+	&.up {
+		opacity: 0;
+		transform: translateY(-50px) rotateZ(v-bind(angle));
 	}
 }
 </style>

packages/frontend/src/components/MkReactionTooltip.vue

@@ -1,8 +1,8 @@
 <template>
 <MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
-	<div class="beeadbfb">
-		<MkReactionIcon :reaction="reaction" class="icon" :no-style="true"/>
-		<div class="name">{{ reaction.replace('@.', '') }}</div>
+	<div :class="$style.root">
+		<MkReactionIcon :reaction="reaction" :class="$style.icon" :no-style="true"/>
+		<div :class="$style.name">{{ reaction.replace('@.', '') }}</div>
 	</div>
 </MkTooltip>
 </template>
@@ -23,20 +23,20 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.beeadbfb {
+<style lang="scss" module>
+.root {
 	text-align: center;
+}
 
-	> .icon {
-		display: block;
-		width: 60px;
-		font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
-		margin: 0 auto;
-		object-fit: contain;
-	}
+.icon {
+	display: block;
+	width: 60px;
+	font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
+	margin: 0 auto;
+	object-fit: contain;
+}
 
-	> .name {
-		font-size: 0.9em;
-	}
+.name {
+	font-size: 0.9em;
 }
 </style>

packages/frontend/src/components/MkReactionsViewer.details.vue

@@ -1,16 +1,16 @@
 <template>
 <MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
-	<div class="bqxuuuey">
-		<div class="reaction">
-			<MkReactionIcon :reaction="reaction" class="icon" :no-style="true"/>
-			<div class="name">{{ getReactionName(reaction) }}</div>
+	<div :class="$style.root">
+		<div :class="$style.reaction">
+			<MkReactionIcon :reaction="reaction" :class="$style.reactionIcon" :no-style="true"/>
+			<div :class="$style.reactionName">{{ getReactionName(reaction) }}</div>
 		</div>
-		<div class="users">
-			<div v-for="u in users" :key="u.id" class="user">
-				<MkAvatar class="avatar" :user="u"/>
-				<MkUserName class="name" :user="u" :nowrap="true"/>
+		<div :class="$style.users">
+			<div v-for="u in users" :key="u.id" :class="$style.user">
+				<MkAvatar :class="$style.avatar" :user="u"/>
+				<MkUserName :user="u" :nowrap="true"/>
 			</div>
-			<div v-if="users.length > 10" class="omitted">+{{ count - 10 }}</div>
+			<div v-if="users.length > 10">+{{ count - 10 }}</div>
 		</div>
 	</div>
 </MkTooltip>
@@ -43,53 +43,53 @@ function getReactionName(reaction: string): string {
 }
 </script>
 
-<style lang="scss" scoped>
-.bqxuuuey {
+<style lang="scss" module>
+.root {
 	display: flex;
+}
 
-	> .reaction {
-		max-width: 100px;
-		text-align: center;
+.reaction {
+	max-width: 100px;
+	text-align: center;
+}
 
-		> .icon {
-			display: block;
-			width: 60px;
-			font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
-			object-fit: contain;
-			margin: 0 auto;
-		}
+.reactionIcon {
+	display: block;
+	width: 60px;
+	font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
+	object-fit: contain;
+	margin: 0 auto;
+}
 
-		> .name {
-			font-size: 1em;
-		}
-	}
+.reactionName {
+	font-size: 1em;
+}
 
-	> .users {
-		flex: 1;
-		min-width: 0;
-		font-size: 0.95em;
-		border-left: solid 0.5px var(--divider);
-		padding-left: 10px;
-		margin-left: 10px;
-		margin-right: 14px;
-		text-align: left;
+.users {
+	flex: 1;
+	min-width: 0;
+	font-size: 0.95em;
+	border-left: solid 0.5px var(--divider);
+	padding-left: 10px;
+	margin-left: 10px;
+	margin-right: 14px;
+	text-align: left;
+}
 
-		> .user {
-			line-height: 24px;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
+.user {
+	line-height: 24px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 
-			&:not(:last-child) {
-				margin-bottom: 3px;
-			}
-
-			> .avatar {
-				width: 24px;
-				height: 24px;
-				margin-right: 3px;
-			}
-		}
+	&:not(:last-child) {
+		margin-bottom: 3px;
 	}
 }
+
+.avatar {
+	width: 24px;
+	height: 24px;
+	margin-right: 3px;
+}
 </style>

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -2,12 +2,12 @@
 <button
 	ref="buttonEl"
 	v-ripple="canToggle"
-	class="hkzvhatu _button"
-	:class="{ reacted: note.myReaction == reaction, canToggle }"
+	class="_button"
+	:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle }]"
 	@click="toggleReaction()"
 >
-	<MkReactionIcon class="icon" :reaction="reaction"/>
-	<span class="count">{{ count }}</span>
+	<MkReactionIcon :class="$style.icon" :reaction="reaction"/>
+	<span :class="$style.count">{{ count }}</span>
 </button>
 </template>
 
@@ -92,8 +92,8 @@ useTooltip(buttonEl, async (showing) => {
 }, 100);
 </script>
 
-<style lang="scss" scoped>
-.hkzvhatu {
+<style lang="scss" module>
+.root {
 	display: inline-block;
 	height: 32px;
 	margin: 2px;
@@ -127,11 +127,11 @@ useTooltip(buttonEl, async (showing) => {
 			filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
 		}
 	}
+}
 
-	> .count {
-		font-size: 0.9em;
-		line-height: 32px;
-		margin: 0 0 0 4px;
-	}
+.count {
+	font-size: 0.9em;
+	line-height: 32px;
+	margin: 0 0 0 4px;
 }
 </style>

packages/frontend/src/components/MkReactionsViewer.vue

@@ -1,5 +1,12 @@
 <template>
-<TransitionGroup :name="$store.state.animation ? 'x' : ''" tag="div" class="tdflqwzn" :class="{ isMe }">
+<TransitionGroup
+	:enter-active-class="$store.state.animation ? $style.transition_x_enterActive : ''"
+	:leave-active-class="$store.state.animation ? $style.transition_x_leaveActive : ''"
+	:enter-from-class="$store.state.animation ? $style.transition_x_enterFrom : ''"
+	:leave-to-class="$store.state.animation ? $style.transition_x_leaveTo : ''"
+	:move-class="$store.state.animation ? $style.transition_x_move : ''"
+	tag="div" :class="$style.root"
+>
 	<XReaction v-for="(count, reaction) in note.reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
 </TransitionGroup>
 </template>
@@ -19,29 +26,26 @@ const initialReactions = new Set(Object.keys(props.note.reactions));
 const isMe = computed(() => $i && $i.id === props.note.userId);
 </script>
 
-<style lang="scss" scoped>
-.x-move, .x-enter-active, .x-leave-active {
+<style lang="scss" module>
+.transition_x_move,
+.transition_x_enterActive,
+.transition_x_leaveActive {
 	transition: opacity 0.2s cubic-bezier(0,.5,.5,1), transform 0.2s cubic-bezier(0,.5,.5,1) !important;
 }
-.x-enter-from, .x-leave-to {
+.transition_x_enterFrom,
+.transition_x_leaveTo {
 	opacity: 0;
 	transform: scale(0.7);
 }
-.x-leave-active {
-  position: absolute;
+.transition_x_leaveActive {
+	position: absolute;
 }
 
-.tdflqwzn {
+.root {
 	margin: 4px -2px 0 -2px;
 
 	&:empty {
 		display: none;
 	}
-
-	&.isMe {
-		> span {
-			cursor: default !important;
-		}
-	}
 }
 </style>

packages/frontend/src/components/MkRemoteCaution.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="jmgmzlwq"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
+<div :class="$style.root"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a :class="$style.link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
 </template>
 
 <script lang="ts" setup>
@@ -10,18 +10,18 @@ defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped>
-.jmgmzlwq {
+<style lang="scss" module>
+.root {
 	font-size: 0.8em;
 	padding: 16px;
 	background: var(--infoWarnBg);
 	color: var(--infoWarnFg);
 	border-radius: var(--radius);
 	overflow: clip;
+}
 
-	> .link {
-		margin-left: 4px;
-		color: var(--accent);
-	}
+.link {
+	margin-left: 4px;
+	color: var(--accent);
 }
 </style>

packages/frontend/src/components/MkRolePreview.vue

@@ -1,6 +1,10 @@
 <template>
 <MkA v-adaptive-bg :to="`/admin/roles/${role.id}`" class="_panel" :class="$style.root" tabindex="-1" :style="{ '--color': role.color }">
-	<div :class="$style.title">{{ role.name }}</div>
+	<div :class="$style.title">
+		<span :class="$style.name">{{ role.name }}</span>
+		<span v-if="role.target === 'manual'" :class="$style.users">{{ role.usersCount }} users</span>
+		<span v-else-if="role.target === 'conditional'" :class="$style.users">({{ i18n.ts._role.conditional }})</span>
+	</div>
 	<div :class="$style.description">{{ role.description }}</div>
 </MkA>
 </template>
@@ -9,6 +13,7 @@
 import { } from 'vue';
 import * as misskey from 'misskey-js';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	role: any;
@@ -23,9 +28,18 @@ const props = defineProps<{
 }
 
 .title {
+	display: flex;
+}
+
+.name {
 	font-weight: bold;
 }
 
+.users {
+	margin-left: auto;
+	opacity: 0.7;
+}
+
 .description {
 	opacity: 0.7;
 }