Merge branch 'develop' into feat_ffvisibulity

2024-12-01 00:08:31 +09:00 · 2023-06-06 13:33:06 +09:00 · 2023-06-06 13:33:06 +09:00 · 0c1435496f
commit 0c1435496f
parent 6d68edaee8 8ccf954065
121 changed files with 5064 additions and 881 deletions
--- a/.github/ISSUE_TEMPLATE/01_bug-report.md
+++ b/.github/ISSUE_TEMPLATE/01_bug-report.md
@ -39,8 +39,20 @@ Please include errors from the developer console and/or server log files if you
 <!-- Tell us where on the platform it happens -->
 <!-- DO NOT WRITE "latest". Please provide the specific version. -->

-Misskey version:
-PostgreSQL version:
-Redis version:
-Your OS:
-Your browser:
+### 💻 Frontend
+* Model and OS of the device(s):
+  <!-- Example: MacBook Pro (14inch, 2021), macOS Ventura 13.4 -->
+* Browser:
+  <!-- Example: Chrome 113.0.5672.126 -->
+* Server URL:
+  <!-- Example: misskey.io -->
+
+### 🛰 Backend (for instance admin)
+<!-- If you are using a managed service, put that after the version. -->
+
+* Installation Method or Hosting Service: <!-- Example: docker compose, k8s/docker, systemd, "Misskey install shell script", development environment -->
+* Misskey: 13.x.x
+* Node: 18.x.x
+* PostgreSQL: 15.x.x
+* Redis: 7.x.x
+* OS and Architecture: <!-- Example: Ubuntu 22.04.2 LTS aarch64 -->
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -12,6 +12,14 @@

 -->

+## 13.13.1
+
+### Client
+- Fix: タブがアクティブな間はstreamが切断されないように
+
+### Server
+- Fix: api/metaで`TypeError: JSON5.parse is not a function`エラーが発生する問題を修正
+
 ## 13.13.0

 ### General
@ -40,11 +48,16 @@
 - Fix: ロールタイムラインにて全ての投稿が流れてしまう問題の修正
 - Fix: 「アクセストークンの管理」画面でアプリの情報が表示されない問題の修正
 - Fix: Firefoxにおける絵文字ピッカーのTabキーフォーカス問題の修正
+- Fix: フォローボタンがテーマのカラースキームによって視認性が悪くなる問題を修正
+  - 新しいプロパティ `fgOnWhite` が追加されました

 ### Server
 - bullをbull-mqにアップグレードし、ジョブキューのパフォーマンスを改善
 - ストリーミングのパフォーマンスを改善
+- Fix: 無効化されたアンテナにアクセスがあった際に再度有効化するように
 - Fix: お知らせの画像URLを空にできない問題を修正
+- Fix: i/notificationsのsinceIdが機能しない問題を修正
+- Fix: pageのピン留めを解除することができない問題を修正

 ## 13.12.2

--- a/cypress/e2e/basic.cy.js
+++ b/cypress/e2e/basic.cy.js
@ -169,25 +169,20 @@ describe('After user signed in', () => {
 		cy.get('[data-cy-user-setup-user-description] textarea').type('ほげ');
 		// TODO: アイコン設定テスト

-		cy.get('[data-cy-user-setup-back]').click();
 		cy.get('[data-cy-user-setup-continue]').click();

 		// プライバシー設定

-		cy.get('[data-cy-user-setup-back]').click();
 		cy.get('[data-cy-user-setup-continue]').click();

 		// フォローはスキップ

-		cy.get('[data-cy-user-setup-back]').click();
 		cy.get('[data-cy-user-setup-continue]').click();

 		// プッシュ通知設定はスキップ

-		cy.get('[data-cy-user-setup-back]').click();
 		cy.get('[data-cy-user-setup-continue]').click();

-		cy.get('[data-cy-user-setup-back]').click();
 		cy.get('[data-cy-user-setup-continue]').click();
  });
 });
--- a/cypress/support/e2e.js
+++ b/cypress/support/e2e.js
@ -21,6 +21,8 @@ import './commands'

 Cypress.on('uncaught:exception', (err, runnable) => {
 	if ([
+		'The source image cannot be decoded',
+
 		// Chrome
 		'ResizeObserver loop limit exceeded',

--- a/locales/ar-SA.yml
+++ b/locales/ar-SA.yml
@ -267,8 +267,8 @@ start: "البداية"
 home: "الرئيسي"
 remoteUserCaution: "هذه المعلومات قد لا تكون مكتملة بما أن المستخدم من مثيل بعيد."
 activity: "النشاط"
-images: "الصور"
-image: "الصور"
+images: "صور"
+image: "صور"
 birthday: "تاريخ الميلاد"
 yearsOld: "{age} سنة"
 registeredDate: "انضم في"
@ -1331,7 +1331,7 @@ _pages:
    text: "نص"
    textarea: "حقل نصي"
    section: "قسم"
-    image: "الصور"
+    image: "صور"
    button: "زرّ"
    note: "ملاحظة مضمّنة"
    _note:
--- a/locales/de-DE.yml
+++ b/locales/de-DE.yml
@ -1060,6 +1060,8 @@ cancelReactionConfirm: "Möchtest du deine Reaktion wirklich löschen?"
 changeReactionConfirm: "Möchtest du deine Reaktion wirklich ändern?"
 later: "Später"
 goToMisskey: "Zu Misskey"
+additionalEmojiDictionary: "Zusätzliche Emoji-Wörterbücher"
+installed: "Installiert"
 _initialAccountSetting:
  accountCreated: "Dein Konto wurde erfolgreich erstellt!"
  letsStartAccountSetup: "Lass uns nun dein Konto einrichten."
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@ -1060,6 +1060,8 @@ cancelReactionConfirm: "Really delete your reaction?"
 changeReactionConfirm: "Really change your reaction?"
 later: "Later"
 goToMisskey: "To Misskey"
+additionalEmojiDictionary: "Additional emoji dictionaries"
+installed: "Installed"
 _initialAccountSetting:
  accountCreated: "Your account was successfully created!"
  letsStartAccountSetup: "For starters, let's set up your profile."
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -1063,6 +1063,8 @@ export interface Locale {
    "changeReactionConfirm": string;
    "later": string;
    "goToMisskey": string;
+    "additionalEmojiDictionary": string;
+    "installed": string;
    "_initialAccountSetting": {
        "accountCreated": string;
        "letsStartAccountSetup": string;
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -1060,6 +1060,8 @@ cancelReactionConfirm: "リアクションを取り消しますか？"
 changeReactionConfirm: "リアクションを変更しますか？"
 later: "あとで"
 goToMisskey: "Misskeyへ"
+additionalEmojiDictionary: "絵文字の追加辞書"
+installed: "インストール済み"

 _initialAccountSetting:
  accountCreated: "アカウントの作成が完了しました！"
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@ -792,6 +792,7 @@ noMaintainerInformationWarning: "管理者情報が設定されてへんで"
 noBotProtectionWarning: "Botプロテクションが設定されてへんで。"
 configure: "設定する"
 postToGallery: "ギャラリーへ投稿"
+postToHashtag: "このハッシュタグで投稿"
 gallery: "ギャラリー"
 recentPosts: "最近の投稿"
 popularPosts: "人気の投稿"
@ -825,6 +826,7 @@ translatedFrom: "{x}から翻訳するで"
 accountDeletionInProgress: "アカウント削除しとるで待っとってなー"
 usernameInfo: "サーバー上であんたのアカウントをあんたやと分かるようにするための名前やで。アルファベット(a~z, A~Z)、数字(0~9)、それとアンダーバー(_)が使って考えてな。この名前は後から変更することはできへんからちゃんと考えるんやで。"
 aiChanMode: "藍モードやで"
+devMode: "開発者モード"
 keepCw: "CWを維持するで"
 pubSub: "Pub/Subのアカウント"
 lastCommunication: "直近の通信"
@ -834,6 +836,8 @@ breakFollow: "フォロワーを解除するで"
 breakFollowConfirm: "フォロワー解除してもええか？"
 itsOn: "オンになっとるよ"
 itsOff: "オフになってるで"
+on: "オン"
+off: "オフ"
 emailRequiredForSignup: "アカウント登録にメールアドレスを必須にするで"
 unread: "未読"
 filter: "フィルタ"
@ -988,6 +992,8 @@ cannotBeChangedLater: "後からは変えられへんで。"
 reactionAcceptance: "ツッコミの受け入れ"
 likeOnly: "いいねだけ"
 likeOnlyForRemote: "リモートからはいいねだけな"
+nonSensitiveOnly: "センシティブじゃないやつだけ"
+nonSensitiveOnlyForLocalLikeOnlyForRemote: "センシティブじゃないやつだけ (リモートはいいねだけ)"
 rolesAssignedToMe: "自分に割り当てられたロール"
 resetPasswordConfirm: "パスワード作り直すんでええな？"
 sensitiveWords: "けったいな単語"
@ -1045,10 +1051,17 @@ preventAiLearning: "生成AIの学習に使わんといて"
 preventAiLearningDescription: "他の文章生成AIとか画像生成AIに、投稿したノートとか画像なんかを勝手に使わんように頼むで。具体的にはnoaiフラグをHTMLレスポンスに含めるんやけど、これ聞いてくれるんはAIの気分次第やから、使われる可能性もちょっとはあるな。"
 options: "オプション"
 specifyUser: "ユーザー指定"
+failedToPreviewUrl: "プレビューできへん"
+update: "更新"
 rolesThatCanBeUsedThisEmojiAsReaction: "ツッコミとして使えるロール"
 rolesThatCanBeUsedThisEmojiAsReactionEmptyDescription: "ロールが一個も指定されてへんかったら、誰でもツッコミとして使えるで。"
+rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールじゃないとアカンで。"
 cancelReactionConfirm: "ツッコむんをやっぱやめるか？"
 changeReactionConfirm: "ツッコミを別のに変えるか？"
+later: "あとで"
+goToMisskey: "Misskeyへ"
+additionalEmojiDictionary: "絵文字の追加辞書"
+installed: "インストール済み"
 _initialAccountSetting:
  accountCreated: "アカウント作り終わったで。"
  letsStartAccountSetup: "アカウントの初期設定をしよか。"
@ -1063,6 +1076,7 @@ _initialAccountSetting:
  haveFun: "{name}、楽しんでな～"
  ifYouNeedLearnMore: "{name}(Misskey)の使い方とかをよー知りたいんやったら{link}をみてな。"
  skipAreYouSure: "初期設定飛ばすか？"
+  laterAreYouSure: "初期設定あとでやり直すん？"
 _serverRules:
  description: "新規登録前に見せる、サーバーの簡潔なルールを設定すんで。内容は使うための決め事の要約とすることを推奨するわ。"
 _accountMigration:
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@ -870,7 +870,7 @@ instanceDefaultLightTheme: "서버 기본 라이트 테마"
 instanceDefaultDarkTheme: "서버 기본 다크 테마"
 instanceDefaultThemeDescription: "객체 형식의 테마 코드를 입력해 주세요."
 mutePeriod: "뮤트할 기간"
-period: "투표 기한"
+period: "기간"
 indefinitely: "무기한"
 tenMinutes: "10분"
 oneHour: "1시간"
@ -1060,6 +1060,8 @@ cancelReactionConfirm: "리액션을 취소하시겠습니까?"
 changeReactionConfirm: "리액션을 변경하시겠습니까?"
 later: "나중에"
 goToMisskey: "Misskey로"
+additionalEmojiDictionary: "이모지 추가 사전"
+installed: "설치됨"
 _initialAccountSetting:
  accountCreated: "계정 생성이 완료되었습니다!"
  letsStartAccountSetup: "계정의 초기 설정을 진행합니다."
@ -1080,12 +1082,12 @@ _serverRules:
 _accountMigration:
  moveFrom: "다른 계정에서 이 계정으로 이사"
  moveFromSub: "다른 계정에 대한 별칭을 생성"
-  moveFromLabel: "기존 계정:"
+  moveFromLabel: "기존 계정 #{n}"
  moveFromDescription: "다른 계정에서 이 계정으로 팔로워를 가져오려면, 우선 여기에서 별칭을 지정해야 합니다. 반드시 이사하기 전에 지정해야 합니다! 기존 계정을 다음과 같은 형식으로 입력해 주십시오: @person@instance.com"
  moveTo: "이 계정에서 다른 계정으로 이사"
  moveToLabel: "이사할 계정:"
  moveCannotBeUndone: "한 번 이사하면, 두 번 다시 되돌릴 수 없습니다."
-  moveAccountDescription: "이 작업은 취소할 수 없습니다. 먼저 이사할 계정에서 이 계정에 대한 별칭을 지정하였는지 다시 한 번 확인해 주십시오. 별칭을 지정한 다음, 이사할 계정을 다음과 같은 형식으로 입력해 주십시오: @person@instance.com"
+  moveAccountDescription: "새 계정으로 이전합니다.\n　・팔로워가 새 계정을 자동으로 팔로우 합니다\n　・이 계정에서 팔로우는 모두 해제됩니다\n　・이 계정으로는 노트 작성 등을 할 수 없게 됩니다\n\n팔로워는 자동으로 이전되지만, 팔로우는 수동으로 진행해야 합니다. 이전하기 전에 이 계정에서 팔로우를 내보내고, 이전 후에는 즉시 이전한 계정에서 가져오기를 진행하십시오.\n리스트・뮤트・차단에 대해서도 마찬가지이므로 수동으로 이전해야 합니다.\n\n(이 설명은 이 서버(Misskey v13.12.0 이후)의 사양입니다. Mastodon 등의 다른 ActivityPub 소프트웨어에서는 작동이 다를 수 있습니다.)"
  moveAccountHowTo: "계정을 이사하려면 우선 이사갈 계정에서 이 계정에 대한 별칭을 지정해야 합니다.\n별칭을 작성한 다음, 이사갈 계정을 다음과 같이 입력하십시오:\n@username@server.example.com"
  startMigration: "이사하기"
  migrationConfirm: "정말로 이 계정을 {account} 으로 이전하시겠습니까? 한 번 이전한 다음에는 취소할 수 없으며, 두 번 다시 원래 상태로 복구할 수 없습니다.\n이사할 계정에서 계정 별칭을 지정하였는지 다시 한 번 확인하십시오."
--- a/locales/no-NO.yml
+++ b/locales/no-NO.yml
@ -25,7 +25,7 @@ otherSettings: "Andre innstillinger"
 openInWindow: "Åpne i vindu"
 profile: "Profil"
 timeline: "Tidslinje"
-noAccountDescription: "Denne brukeren har ikke skrevet sin bio ennå."
+noAccountDescription: "Denne brukeren har ikke skrevet sin biografi ennå."
 login: "Logg inn"
 loggingIn: "Logget inn"
 logout: "Logg ut"
@ -81,6 +81,7 @@ pageLoadError: "Kunne ikke hente side."
 serverIsDead: "Denne serveren svarer ikke. Vennligst vent en stund og prøv igjen."
 enterListName: "Skriv inn et navn på listen"
 privacy: "Personvern"
+defaultNoteVisibility: "Standard synlighet"
 follow: "Følg"
 followRequest: "Følgeforespørsel"
 followRequests: "Følgeforespørsel"
@ -92,6 +93,8 @@ renoted: "Renotet."
 cantRenote: "Dette innlegget kan ikke renotes."
 cantReRenote: "En Renote kan ikke renotes."
 quote: "Sitat"
+inChannelRenote: "Renote kun for kanal"
+inChannelQuote: "Sitat kun for kanal"
 pinnedNote: "Festet Note"
 pinned: "Fest til profil"
 you: "Du"
@ -145,14 +148,18 @@ instances: "Servere"
 registeredAt: "Registrerte seg"
 latestRequestReceivedAt: "Siste forespørsel mottatt"
 latestStatus: "Siste status"
+charts: "Diagrammer"
 perHour: "Per time"
 perDay: "Per dag"
 stopActivityDelivery: "Slutt å sende aktiviteter"
 blockThisInstance: "Blokker denne serveren"
+operations: "Operasjoner"
 software: "Programvare"
 version: "Versjon"
+metadata: "Metadata"
 withNFiles: "{n} fil(er)"
 network: "Nettverk"
+instanceInfo: "Serverinformasjon"
 statistics: "Statistikk"
 clearQueue: "Tøm kø"
 clearQueueConfirmTitle: "Er du sikker på at du vil tømme køen?"
@ -167,6 +174,8 @@ noteDeleteConfirm: "Er du sikker på at du vil slette denne Noten?"
 pinLimitExceeded: "Du kan ikke feste flere."
 intro: "Installasjonen av Misskey er ferdig! Vennligst opprett en administratorkonto."
 done: "Ferdig"
+default: "Standard"
+defaultValueIs: "Standard: {value}"
 noCustomEmojis: "Det er ingen emoji"
 noJobs: "Det er ingen jobber"
 blocked: "Blokkert"
@ -175,10 +184,13 @@ all: "Alle"
 notResponding: "Svarer ikke"
 changePassword: "Endre passord"
 security: "Sikkerhet"
+retypedNotMatch: "Inngangene stemmer ikke overens."
+currentPassword: "Nåværende passord"
 newPassword: "Nytt passord"
 newPasswordRetype: "Nytt passord (gjenta)"
 attachFile: "Legg ved filer"
 more: "Mer!"
+noSuchUser: "Bruker ikke funnet"
 announcements: "Kunngjøringer"
 remove: "Slett"
 removed: "Vellykket slettet"
@ -188,9 +200,15 @@ saved: "Lagret"
 upload: "Laste opp"
 keepOriginalUploading: "Behold originalbildet"
 fromUrl: "Fra URL"
+uploadFromUrl: "Last opp fra en URL"
+uploadFromUrlDescription: "URL til filen du vil laste opp"
 explore: "Utforsk"
 messageRead: "Lest"
-agree: "Jeg godtar"
+nUsersRead: "lest av {n}"
+agreeTo: "Jeg godtar {0}"
+agree: "Godta"
+agreeBelow: "Jeg godtar følgende"
+basicNotesBeforeCreateAccount: "Viktige merknader"
 termsOfService: "Vilkår for bruk"
 home: "Hjem"
 activity: "Aktivitet"
@ -198,8 +216,12 @@ images: "Bilder"
 image: "Bilde"
 birthday: "Bursdag"
 yearsOld: "{age} år gammel"
+theme: "Temaer"
 light: "Lys"
 dark: "Mørk"
+lightThemes: "Lyse temaer"
+darkThemes: "Mørke temaer"
+syncDeviceDarkMode: "Synkroniser mørkmodus med enhetens innstillinger"
 fileName: "Filnavn"
 selectFile: "Velg en fil"
 selectFiles: "Velg filer"
@ -213,6 +235,9 @@ deleteFolder: "Slett denne mappen"
 addFile: "Legg til en fil"
 emptyFolder: "Denne mappen er tom"
 unableToDelete: "Kan ikke slette"
+inputNewFileName: "Skriv inn et nytt filnavn"
+inputNewDescription: "Skriv inn ny bildetekst"
+inputNewFolderName: "Skriv inn et nytt mappenavn"
 circularReferenceFolder: "Målmappen er en undermappe til mappen du ønsker å flytte."
 hasChildFilesOrFolders: "Siden denne mappen ikke er tom, kan den ikke slettes."
 copyUrl: "Kopier URL"
@ -251,13 +276,23 @@ turnstile: "Turnstile"
 enableTurnstile: "Aktiver Turnstile"
 antennas: "Antenner"
 name: "Navn"
+antennaSource: "Antennekilde"
+notifyAntenna: "Varsle om nye Notes"
+withFileAntenna: "Bare Notes med filer"
+notesAndReplies: "Notes og svar"
 popularUsers: "Populære brukere"
 exploreUsersCount: "Det finnes {count} brukere"
+exploreFediverse: "Utforsk Fediverse"
 userList: "Lister"
-about: "Infomasjon"
+about: "Informasjon"
 aboutMisskey: "Om Misskey"
+newPasswordIs: "Det nye passordet er \"{password}\"."
 share: "Del"
+notFound: "Ikke funnet"
+markAsReadAllNotifications: "Merk alle varsler som lest"
+markAsReadAllUnreadNotes: "Merk alle Notes som lest"
 help: "Hjelp"
+inputMessageHere: "Skriv inn melding her"
 close: "Lukk"
 invites: "Inviter"
 members: "Medlemmer"
@ -265,6 +300,10 @@ title: "Tittel"
 text: "Tekst"
 next: "Neste"
 retype: "Gjenta"
+quoteAttached: "Sitat"
+noMessagesYet: "Ingen meldinger ennå"
+newMessageExists: "Det er nye meldinger"
+onlyOneFileCanBeAttached: "Du kan bare legge ved én fil i en melding"
 invitations: "Inviter"
 available: "Tilgjengelig"
 unavailable: "Utilgjengelig"
@ -564,6 +603,7 @@ _time:
  day: "Dager"
 _timelineTutorial:
  title: "Hvordan bruke Misskey"
+  step2_2: "Hva med å skrive en selvpresentasjon, eller bare \"Hei {name}!\" hvis du ikke har lyst?"
 _2fa:
  renewTOTPCancel: "Avbryt"
 _weekday:
@ -576,6 +616,7 @@ _weekday:
  saturday: "Lørdag"
 _widgets:
  profile: "Profil"
+  instanceInfo: "Serverinformasjon"
  notifications: "Varsler"
  timeline: "Tidslinje"
  calendar: "Kalender"
@ -611,6 +652,7 @@ _postForm:
 _profile:
  name: "Navn"
  username: "Brukernavn"
+  description: "Biografi"
  metadataContent: "Innhold"
 _exportOrImport:
  followingList: "Følg"
@ -652,12 +694,14 @@ _pages:
    button: "Knapp"
 _notification:
  youWereFollowed: "fulgte deg"
+  unreadAntennaNote: "Antenne {name}"
+  achievementEarned: "Prestasjon låst opp"
  _types:
-    follow: "Følg"
+    follow: "Nye følgere"
    reply: "Svar"
-    renote: "Renote"
-    quote: "Sitat"
-    reaction: "Reaksjon"
+    renote: "Renotes"
+    quote: "Sitater"
+    reaction: "Reaksjoner"
  _actions:
    reply: "Svar"
    renote: "Renote"
--- a/locales/ru-RU.yml
+++ b/locales/ru-RU.yml
@ -2,7 +2,7 @@
 _lang_: "Русский"
 headlineMisskey: "Сеть, сплетённая из заметок"
 introMisskey: "Добро пожаловать! Misskey — это децентрализованный сервис микроблогов с открытым исходным кодом.\nПишите «заметки» — делитесь со всеми происходящим вокруг или рассказывайте о себе 📡\nСтавьте «реакции» — выражайте свои чувства и эмоции от заметок других 👍\nОткройте для себя новый мир 🚀"
-poweredByMisskeyDescription: "{name} – один из инстансов (также называемый экземпляром Misskey), использующий платформу с открытым исходным кодом <b>Misskey</b>."
+poweredByMisskeyDescription: "{name} – сервис на платформе с открытым исходным кодом <b>Misskey</b>, называемый инстансом Misskey."
 monthAndDay: "{day}.{month}"
 search: "Поиск"
 notifications: "Уведомления"
@ -649,8 +649,8 @@ abuseReported: "Жалоба отправлена. Большое спасибо
 reporter: "Сообщивший"
 reporteeOrigin: "О ком сообщено"
 reporterOrigin: "Кто сообщил"
-forwardReport: "Перенаправление отчета на инстант."
-forwardReportIsAnonymous: "Удаленный инстант не сможет увидеть вашу информацию и будет отображаться как анонимная системная учетная запись."
+forwardReport: "Отправить жалобу на инстанс автора."
+forwardReportIsAnonymous: "Жалоба на удалённый инстанс будет отправлена анонимно. Вместо ваших данных у получателя будет отображена системная учётная запись."
 send: "Отправить"
 abuseMarkAsResolved: "Отметить жалобу как решённую"
 openInNewTab: "Открыть в новой вкладке"
@ -823,6 +823,7 @@ translatedFrom: "Перевод. Язык оригинала — {x}"
 accountDeletionInProgress: "В настоящее время выполняется удаление учетной записи"
 usernameInfo: "Имя, которое отличает вашу учетную запись от других на этом сервере. Вы можете использовать алфавит (a~z, A~Z), цифры (0~9) или символы подчеркивания (_). Имена пользователей не могут быть изменены позже."
 aiChanMode: "Режим Ай"
+devMode: "Режим разработчика"
 keepCw: "Сохраняйте Предупреждения о содержимом"
 pubSub: "Учётные записи Pub/Sub"
 lastCommunication: "Последнее сообщение"
@ -914,8 +915,8 @@ cannotUploadBecauseInappropriate: "Файл не может быть загру
 cannotUploadBecauseNoFreeSpace: "Файл не может быть загружен, так как не осталось места на диске"
 cannotUploadBecauseExceedsFileSizeLimit: "Файл не может быть загружен, так как он превышает лимит размера файла."
 beta: "Бета"
-enableAutoSensitive: "Автоматическое определение NSFW"
-enableAutoSensitiveDescription: "Если доступно, используйте машинное обучение для автоматической установки флага NSFW на носителе. Даже если эта функция отключена, она может быть установлена автоматически в зависимости от инстанта."
+enableAutoSensitive: "Автоматическое определение содержимого не для всех"
+enableAutoSensitiveDescription: "Позволяет определять наличие содержимого не для всех при помощи искусственного интеллекта там, где это возможно. Даже если эту опцию отключить, она всё равно может быть включена на весь инстанс."
 activeEmailValidationDescription: "Если включено, будет проводиться более строгая проверка адреса электронной почты, в том числе на то, что он действительный и не временный. Если же отключено, то проверяется только корректность написания адреса."
 navbar: "Панель навигации"
 shuffle: "Перемешать"
@ -1006,6 +1007,7 @@ noteIdOrUrl: "ID или ссылка на заметку"
 video: "Видео"
 videos: "Видео"
 dataSaver: "Экономия трафика"
+renotesList: "Репосты"
 horizontal: "Сбоку"
 youFollowing: "Подписки"
 options: "Настройки ролей"
@ -1180,6 +1182,9 @@ _achievements:
    _client30min:
      title: "Перерыв на обед"
      description: "Прошло 30 минут с момента запуска клиента"
+    _client60min:
+      title: "Не наглядеться на Misskey"
+      description: "Misskey был открыт 60 минут подряд"
    _noteDeletedWithin1min:
      title: "Ой, нет!"
      description: "Заметка удалена через минуту после публикации"
@ -1282,6 +1287,7 @@ _role:
    canInvite: "Может создавать пригласительные коды"
    canManageCustomEmojis: "Управлять пользовательскими эмодзи"
    driveCapacity: "Доступное пространство на «диске»"
+    alwaysMarkNsfw: "Всегда отмечать файлы как «не для всех»"
    pinMax: "Доступное количество закреплённых заметок"
    antennaMax: "Доступное количество антенн"
    wordMuteMax: "Доступное количество знаков в списке скрытия слов"
@ -1309,7 +1315,7 @@ _sensitiveMediaDetection:
  description: "Машинное обучение может быть использовано для автоматического обнаружения чувствительных медиа для модерации. Нагрузка на сервер увеличивается незначительно."
  sensitivity: "Чувствительность обнаружения"
  sensitivityDescription: "Более низкая чувствительность уменьшает количество ложных срабатываний (false positives). Повышение чувствительности уменьшает утечку при обнаружении (ложноотрицательные результаты)."
-  setSensitiveFlagAutomatically: "Установить флаг NSFW"
+  setSensitiveFlagAutomatically: "Обозначить как не для всех"
  setSensitiveFlagAutomaticallyDescription: "Даже если этот параметр отключен, результат оценки сохраняется внутри системы."
  analyzeVideos: "Анализировать видео?"
  analyzeVideosDescription: "Анализируйте видео в дополнение к неподвижным изображениям. Нагрузка на сервер немного увеличивается."
@ -1528,6 +1534,16 @@ _time:
  minute: "мин"
  hour: "ч"
  day: "сут"
+_timelineTutorial:
+  title: "Как пользоваться Misskey"
+  step1_1: "Это лицо Misskey, так называемая лента. Ваш инстанс, {name}, покажет тут все опубликованные на нём заметки в хронологическом порядке."
+  step1_2: "Здесь есть несколько лент. К примеру «персональная» лента отображает заметки тех, на кого вы подписаны. А «местная» — заметки тех, кого приютил {name}."
+  step2_1: "Что ж, теперь самое время опубликовать заметку. Если нажать вверху страницы на изображение карандаша, появится форма для текста."
+  step2_2: "Почему бы не написать немного о себе? Ну, или хотя бы «Привет, {name}»?"
+  step3_1: "Справились с первой заметкой?"
+  step3_2: "Отлично, теперь она должна появиться в вашей ленте."
+  step4_1: "А ещё здесь можно делиться своими реакциями на заметки."
+  step4_2: "Отмечайте реакции, нажимая на символ «+» под заметкой и выбирая значок по душе."
 _2fa:
  alreadyRegistered: "Двухфакторная аутентификация уже настроена."
  registerTOTP: "Начните настраивать приложение-аутентификатор"
@ -1868,6 +1884,9 @@ _deck:
 _dialog:
  charactersExceeded: "Превышено максимальное количество символов! У вас {current} / из   {max}"
  charactersBelow: "Это ниже минимального количества символов! У вас {current} / из {min}"
+_disabledTimeline:
+  title: "Лента отключена"
+  description: "Ваша текущая роль не позволяет пользоваться этой лентой."
 _webhookSettings:
  name: "Название"
  active: "Вкл."
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@ -1060,6 +1060,7 @@ cancelReactionConfirm: "要取消回应吗？"
 changeReactionConfirm: "要更改回应吗？"
 later: "一会再说"
 goToMisskey: "去往Misskey"
+installed: "已安装"
 _initialAccountSetting:
  accountCreated: "账户创建完成了！"
  letsStartAccountSetup: "来进行帐户的初始设置吧。"
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@ -1060,6 +1060,8 @@ cancelReactionConfirm: "要取消做出的反應嗎？"
 changeReactionConfirm: "要變更做出的反應嗎？"
 later: "稍後再說"
 goToMisskey: "往Misskey"
+additionalEmojiDictionary: "表情符號的附加辭典"
+installed: "已安裝"
 _initialAccountSetting:
  accountCreated: "帳戶已建立完成！"
  letsStartAccountSetup: "來進行帳戶的初始設定吧。"
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "13.13.0-beta.6",
+	"version": "13.13.1",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",
@ -51,16 +51,16 @@
 		"gulp-replace": "1.1.4",
 		"gulp-terser": "2.1.0",
 		"js-yaml": "4.1.0",
-		"typescript": "5.0.4"
+		"typescript": "5.1.3"
 	},
 	"devDependencies": {
 		"@types/gulp": "4.0.10",
 		"@types/gulp-rename": "2.0.1",
-		"@typescript-eslint/eslint-plugin": "5.59.5",
-		"@typescript-eslint/parser": "5.59.5",
+		"@typescript-eslint/eslint-plugin": "5.59.8",
+		"@typescript-eslint/parser": "5.59.8",
 		"cross-env": "7.0.3",
 		"cypress": "12.13.0",
-		"eslint": "8.40.0",
+		"eslint": "8.41.0",
 		"start-server-and-test": "2.0.0"
 	},
 	"optionalDependencies": {
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@ -60,27 +60,27 @@
 		"@discordapp/twemoji": "14.1.2",
 		"@fastify/accepts": "4.1.0",
 		"@fastify/cookie": "8.3.0",
-		"@fastify/cors": "8.2.1",
+		"@fastify/cors": "8.3.0",
 		"@fastify/http-proxy": "9.1.0",
 		"@fastify/multipart": "7.6.0",
-		"@fastify/static": "6.10.1",
+		"@fastify/static": "6.10.2",
 		"@fastify/view": "7.4.1",
 		"@nestjs/common": "9.4.2",
 		"@nestjs/core": "9.4.2",
 		"@nestjs/testing": "9.4.2",
 		"@peertube/http-signature": "1.7.0",
-		"@sinonjs/fake-timers": "10.0.2",
+		"@sinonjs/fake-timers": "10.2.0",
 		"@swc/cli": "0.1.62",
-		"@swc/core": "1.3.59",
+		"@swc/core": "1.3.61",
 		"accepts": "1.3.8",
 		"ajv": "8.12.0",
 		"archiver": "5.3.1",
 		"autwh": "0.1.0",
 		"bcryptjs": "2.4.3",
 		"blurhash": "2.0.5",
-		"bullmq": "3.14.1",
+		"bullmq": "3.15.0",
 		"cacheable-lookup": "6.1.0",
-		"cbor": "8.1.0",
+		"cbor": "9.0.0",
 		"chalk": "5.2.0",
 		"chalk-template": "0.4.0",
 		"chokidar": "3.5.3",
@ -96,24 +96,24 @@
 		"fluent-ffmpeg": "2.1.2",
 		"form-data": "4.0.0",
 		"got": "12.6.0",
-		"happy-dom": "9.19.2",
+		"happy-dom": "9.20.3",
 		"hpagent": "1.2.0",
 		"ioredis": "5.3.2",
 		"ip-cidr": "3.1.0",
 		"is-svg": "4.3.2",
 		"js-yaml": "4.1.0",
-		"jsdom": "21.1.1",
+		"jsdom": "22.1.0",
 		"json5": "2.2.3",
-		"jsonld": "8.1.1",
+		"jsonld": "8.2.0",
 		"jsrsasign": "10.8.6",
-		"meilisearch": "0.32.4",
+		"meilisearch": "0.32.5",
 		"mfm-js": "0.23.3",
 		"mime-types": "2.1.35",
 		"misskey-js": "workspace:*",
 		"ms": "3.0.0-canary.1",
 		"nested-property": "4.0.0",
 		"node-fetch": "3.3.1",
-		"nodemailer": "6.9.2",
+		"nodemailer": "6.9.3",
 		"nsfwjs": "2.4.2",
 		"oauth": "0.10.0",
 		"os-utils": "0.0.14",
@ -129,7 +129,7 @@
 		"qrcode": "1.5.3",
 		"random-seed": "0.3.0",
 		"ratelimiter": "3.4.1",
-		"re2": "1.18.0",
+		"re2": "1.19.0",
 		"redis-lock": "0.1.4",
 		"reflect-metadata": "0.1.13",
 		"rename": "1.0.4",
@ -146,16 +146,16 @@
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
 		"summaly": "github:misskey-dev/summaly",
-		"systeminformation": "5.17.12",
+		"systeminformation": "5.17.16",
 		"tinycolor2": "1.6.0",
 		"tmp": "0.2.1",
 		"tsc-alias": "1.8.6",
 		"tsconfig-paths": "4.2.0",
 		"twemoji-parser": "14.0.0",
 		"typeorm": "0.3.16",
-		"typescript": "5.0.4",
+		"typescript": "5.1.3",
 		"ulid": "2.3.0",
-		"unzipper": "0.10.11",
+		"unzipper": "0.10.14",
 		"uuid": "9.0.0",
 		"vary": "1.1.2",
 		"web-push": "3.6.1",
@ -173,13 +173,13 @@
 		"@types/content-disposition": "0.5.5",
 		"@types/escape-regexp": "0.0.1",
 		"@types/fluent-ffmpeg": "2.1.21",
-		"@types/jest": "29.5.1",
+		"@types/jest": "29.5.2",
 		"@types/js-yaml": "4.0.5",
 		"@types/jsdom": "21.1.1",
 		"@types/jsonld": "1.5.8",
 		"@types/jsrsasign": "10.5.8",
 		"@types/mime-types": "2.1.1",
-		"@types/node": "20.2.3",
+		"@types/node": "20.2.5",
 		"@types/node-fetch": "3.0.3",
 		"@types/nodemailer": "6.4.8",
 		"@types/oauth": "0.9.1",
@ -203,11 +203,11 @@
 		"@types/web-push": "3.3.2",
 		"@types/websocket": "1.0.5",
 		"@types/ws": "8.5.4",
-		"@typescript-eslint/eslint-plugin": "5.59.5",
-		"@typescript-eslint/parser": "5.59.5",
+		"@typescript-eslint/eslint-plugin": "5.59.8",
+		"@typescript-eslint/parser": "5.59.8",
 		"aws-sdk-client-mock": "2.1.1",
 		"cross-env": "7.0.3",
-		"eslint": "8.40.0",
+		"eslint": "8.41.0",
 		"eslint-plugin-import": "2.27.5",
 		"execa": "6.1.0",
 		"jest": "29.5.0",
--- a/packages/backend/src/server/api/StreamingApiServerService.ts
+++ b/packages/backend/src/server/api/StreamingApiServerService.ts
@ -19,6 +19,8 @@ import type * as http from 'node:http';
@Injectable()
 export class StreamingApiServerService {
 	#wss: WebSocket.WebSocketServer;
+	#connections = new Map<WebSocket.WebSocket, number>();
+	#cleanConnectionsIntervalId: NodeJS.Timeout | null = null;

 	constructor(
 		@Inject(DI.config)
@ -109,7 +111,9 @@ export class StreamingApiServerService {

 			await stream.listen(ev, connection);

-			const intervalId = user ? setInterval(() => {
+			this.#connections.set(connection, Date.now());
+
+			const userUpdateIntervalId = user ? setInterval(() => {
 				this.usersRepository.update(user.id, {
 					lastActiveDate: new Date(),
 				});
@ -124,19 +128,34 @@ export class StreamingApiServerService {
 				ev.removeAllListeners();
 				stream.dispose();
 				this.redisForSub.off('message', onRedisMessage);
-				if (intervalId) clearInterval(intervalId);
+				if (userUpdateIntervalId) clearInterval(userUpdateIntervalId);
 			});

 			connection.on('message', async (data) => {
+				this.#connections.set(connection, Date.now());
 				if (data.toString() === 'ping') {
 					connection.send('pong');
 				}
 			});
 		});
+
+		this.#cleanConnectionsIntervalId = setInterval(() => {
+			const now = Date.now();
+			for (const [connection, lastActive] of this.#connections.entries()) {
+				if (now - lastActive > 1000 * 60 * 5) {
+					connection.terminate();
+					this.#connections.delete(connection);
+				}
+			}
+		}, 1000 * 60 * 5);
 	}

 	@bindThis
 	public detach(): Promise<void> {
+		if (this.#cleanConnectionsIntervalId) {
+			clearInterval(this.#cleanConnectionsIntervalId);
+			this.#cleanConnectionsIntervalId = null;
+		}
 		return new Promise((resolve) => {
 			this.#wss.close(() => resolve());
 		});
--- a/packages/backend/src/server/api/endpoints/antennas/notes.ts
+++ b/packages/backend/src/server/api/endpoints/antennas/notes.ts
@ -113,6 +113,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			}

 			this.antennasRepository.update(antenna.id, {
+				isActive: true,
 				lastUsedAt: new Date(),
 			});

--- a/packages/backend/src/server/api/endpoints/i/2fa/key-done.ts
+++ b/packages/backend/src/server/api/endpoints/i/2fa/key-done.ts
@ -1,6 +1,6 @@
 import { promisify } from 'node:util';
 import bcrypt from 'bcryptjs';
-import * as cbor from 'cbor';
+import cbor from 'cbor';
 import { Inject, Injectable } from '@nestjs/common';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
--- a/packages/backend/src/server/api/endpoints/i/notifications.ts
+++ b/packages/backend/src/server/api/endpoints/i/notifications.ts
@ -91,18 +91,18 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			const includeTypes = ps.includeTypes && ps.includeTypes.filter(type => !(obsoleteNotificationTypes).includes(type as any)) as typeof notificationTypes[number][];
 			const excludeTypes = ps.excludeTypes && ps.excludeTypes.filter(type => !(obsoleteNotificationTypes).includes(type as any)) as typeof notificationTypes[number][];

-			const limit = ps.limit + (ps.untilId ? 1 : 0); // untilIdに指定したものも含まれるため+1
+			const limit = ps.limit + (ps.untilId ? 1 : 0) + (ps.sinceId ? 1 : 0); // untilIdに指定したものも含まれるため+1
 			const notificationsRes = await this.redisClient.xrevrange(
 				`notificationTimeline:${me.id}`,
 				ps.untilId ? this.idService.parse(ps.untilId).date.getTime() : '+',
-				'-',
+				ps.sinceId ? this.idService.parse(ps.sinceId).date.getTime() : '-',
 				'COUNT', limit);

 			if (notificationsRes.length === 0) {
 				return [];
 			}

-			let notifications = notificationsRes.map(x => JSON.parse(x[1][1])).filter(x => x.id !== ps.untilId) as Notification[];
+			let notifications = notificationsRes.map(x => JSON.parse(x[1][1])).filter(x => x.id !== ps.untilId && x !== ps.sinceId) as Notification[];

 			if (includeTypes && includeTypes.length > 0) {
 				notifications = notifications.filter(notification => includeTypes.includes(notification.type));
--- a/packages/backend/src/server/api/endpoints/i/update.ts
+++ b/packages/backend/src/server/api/endpoints/i/update.ts
@ -146,7 +146,7 @@ export const paramDef = {
 		alwaysMarkNsfw: { type: 'boolean' },
 		autoSensitive: { type: 'boolean' },
 		ffVisibility: { type: 'string', enum: ['public', 'followers', 'private'] },
-		pinnedPageId: { type: 'string', format: 'misskey:id' },
+		pinnedPageId: { type: 'string', format: 'misskey:id', nullable: true },
 		mutedWords: { type: 'array' },
 		mutedInstances: { type: 'array', items: {
 			type: 'string',
--- a/packages/backend/src/server/api/endpoints/meta.ts
+++ b/packages/backend/src/server/api/endpoints/meta.ts
@ -1,6 +1,6 @@
 import { IsNull, LessThanOrEqual, MoreThan } from 'typeorm';
 import { Inject, Injectable } from '@nestjs/common';
-import * as JSON5 from 'json5';
+import JSON5 from 'json5';
 import type { AdsRepository, UsersRepository } from '@/models/index.js';
 import { MAX_NOTE_TEXT_LENGTH } from '@/const.js';
 import { Endpoint } from '@/server/api/endpoint-base.js';
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@ -116,9 +116,9 @@
 			}
 		}
 	}
-	const colorSchema = localStorage.getItem('colorSchema');
-	if (colorSchema) {
-		document.documentElement.style.setProperty('color-schema', colorSchema);
+	const colorScheme = localStorage.getItem('colorScheme');
+	if (colorScheme) {
+		document.documentElement.style.setProperty('color-scheme', colorScheme);
 	}
 	//#endregion

--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@ -35,7 +35,7 @@ html
 		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
 		//- https://github.com/misskey-dev/misskey/issues/9842
-		link(rel='stylesheet' href='/assets/tabler-icons/tabler-icons.min.css?v2.17.0')
+		link(rel='stylesheet' href='/assets/tabler-icons/tabler-icons.min.css?v2.21.0')
 		link(rel='modulepreload' href=`/vite/${clientEntry.file}`)

 		if !config.clientManifestExists
--- a/packages/backend/test/e2e/2fa.ts
+++ b/packages/backend/test/e2e/2fa.ts
@ -2,7 +2,7 @@ process.env.NODE_ENV = 'test';

 import * as assert from 'assert';
 import * as crypto from 'node:crypto';
-import * as cbor from 'cbor';
+import cbor from 'cbor';
 import * as OTPAuth from 'otpauth';
 import { loadConfig } from '../../src/config.js';
 import { signup, api, post, react, startServer, waitFire } from '../utils.js';
--- a/packages/frontend/.storybook/preview-head.html
+++ b/packages/frontend/.storybook/preview-head.html
@ -1,6 +1,6 @@
 <link rel="preload" href="https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true" as="image" type="image/png" crossorigin="anonymous">
 <link rel="preload" href="https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true" as="image" type="image/jpeg" crossorigin="anonymous">
-<link rel="stylesheet" href="https://unpkg.com/@tabler/icons-webfont@2.12.0/tabler-icons.min.css">
+<link rel="stylesheet" href="https://unpkg.com/@tabler/icons-webfont@2.21.0/tabler-icons.min.css">
 <link rel="stylesheet" href="https://unpkg.com/@fontsource/m-plus-rounded-1c/index.css">
 <style>
 	html {
--- a/packages/frontend/lib/rollup-plugin-unwind-css-module-class-name.test.ts
+++ b/packages/frontend/lib/rollup-plugin-unwind-css-module-class-name.test.ts
@ -0,0 +1,597 @@
+import { parse } from 'acorn';
+import { generate } from 'astring';
+import { describe, expect, it } from 'vitest';
+import { normalizeClass, unwindCssModuleClassName } from './rollup-plugin-unwind-css-module-class-name';
+import type * as estree from 'estree';
+
+function parseExpression(code: string): estree.Expression {
+	const program = parse(code, { ecmaVersion: 'latest', sourceType: 'module' }) as unknown as estree.Program;
+	const statement = program.body[0] as estree.ExpressionStatement;
+	return statement.expression;
+}
+
+describe(normalizeClass.name, () => {
+	it('should normalize string', () => {
+		expect(normalizeClass(parseExpression('"a b c"'))).toBe('a b c');
+	});
+	it('should trim redundant spaces', () => {
+		expect(normalizeClass(parseExpression('" a b  c "'))).toBe('a b c');
+	});
+	it('should ignore undefined', () => {
+		expect(normalizeClass(parseExpression('undefined'))).toBe('');
+	});
+	it('should ignore non string literals', () => {
+		expect(normalizeClass(parseExpression('0'))).toBe('');
+		expect(normalizeClass(parseExpression('true'))).toBe('');
+		expect(normalizeClass(parseExpression('null'))).toBe('');
+		expect(normalizeClass(parseExpression('/I.D/'))).toBe('');
+	});
+	it('should not normalize identifiers', () => {
+		expect(normalizeClass(parseExpression('EScape'))).toBeNull();
+	});
+	it('should normalize recursively array', () => {
+		expect(normalizeClass(parseExpression('["from", ...["Utopia"]]'))).toBe('from Utopia');
+		expect(normalizeClass(parseExpression('["from", ...[Utopia]]'))).toBeNull();
+	});
+	it('should normalize recursively template literal', () => {
+		expect(normalizeClass(parseExpression('`name ${"shiho"} code ${33}`'))).toBe('name shiho code');
+		expect(normalizeClass(parseExpression('`name ${shiho.name} code ${33}`'))).toBeNull();
+	});
+	it('should normalize recursively binary expression', () => {
+		expect(normalizeClass(parseExpression('"mirage" + "mirror"'))).toBe('miragemirror');
+		expect(normalizeClass(parseExpression('"mirage" + mirror'))).toBeNull();
+	});
+	it('should normalize recursively object expression', () => {
+		expect(normalizeClass(parseExpression('({ a: true, b: "c" })'))).toBe('a b');
+		expect(normalizeClass(parseExpression('({ a: false, b: "c" })'))).toBe('b');
+		expect(normalizeClass(parseExpression('({ a: true, b: c })'))).toBeNull();
+		expect(normalizeClass(parseExpression('({ a: true, b: "c", ...({ d: true }) })'))).toBe('a b d');
+		expect(normalizeClass(parseExpression('({ a: true, [b]: "c" })'))).toBeNull();
+		expect(normalizeClass(parseExpression('({ a: true, b: false, c: !false, d: !!0 })'))).toBe('a c');
+	});
+});
+
+it('Composition API (standard)', () => {
+	const ast = parse(`
+import { c as api, d as defaultStore, i as i18n, aD as notePage, bN as ImgWithBlurhash, bY as getStaticImageUrl, _ as _export_sfc } from './app-!~{001}~.js';
+import { M as MkContainer } from './MkContainer-!~{03M}~.js';
+import { b as defineComponent, a as ref, e as onMounted, z as resolveComponent, g as openBlock, h as createBlock, i as withCtx, K as createTextVNode, E as toDisplayString, u as unref, l as createBaseVNode, q as normalizeClass, B as createCommentVNode, k as createElementBlock, F as Fragment, C as renderList, A as createVNode } from './vue-!~{002}~.js';
+import './photoswipe-!~{003}~.js';
+
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("i", { class: "ti ti-photo" }, null, -1);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index.photos",
+  props: {
+    user: {}
+  },
+  setup(__props) {
+    const props = __props;
+    let fetching = ref(true);
+    let images = ref([]);
+    function thumbnail(image) {
+      return defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(image.url) : image.thumbnailUrl;
+    }
+    onMounted(() => {
+      const image = [
+        "image/jpeg",
+        "image/webp",
+        "image/avif",
+        "image/png",
+        "image/gif",
+        "image/apng",
+        "image/vnd.mozilla.apng"
+      ];
+      api("users/notes", {
+        userId: props.user.id,
+        fileType: image,
+        excludeNsfw: defaultStore.state.nsfw !== "ignore",
+        limit: 10
+      }).then((notes) => {
+        for (const note of notes) {
+          for (const file of note.files) {
+            images.value.push({
+              note,
+              file
+            });
+          }
+        }
+        fetching.value = false;
+      });
+    });
+    return (_ctx, _cache) => {
+      const _component_MkLoading = resolveComponent("MkLoading");
+      const _component_MkA = resolveComponent("MkA");
+      return openBlock(), createBlock(MkContainer, {
+        "max-height": 300,
+        foldable: true
+      }, {
+        icon: withCtx(() => [
+          _hoisted_1
+        ]),
+        header: withCtx(() => [
+          createTextVNode(toDisplayString(unref(i18n).ts.images), 1)
+        ]),
+        default: withCtx(() => [
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.root)
+          }, [
+            unref(fetching) ? (openBlock(), createBlock(_component_MkLoading, { key: 0 })) : createCommentVNode("", true),
+            !unref(fetching) && unref(images).length > 0 ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(_ctx.$style.stream)
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(images), (image) => {
+                return openBlock(), createBlock(_component_MkA, {
+                  key: image.note.id + image.file.id,
+                  class: normalizeClass(_ctx.$style.img),
+                  to: unref(notePage)(image.note)
+                }, {
+                  default: withCtx(() => [
+                    createVNode(ImgWithBlurhash, {
+                      hash: image.file.blurhash,
+                      src: thumbnail(image.file),
+                      title: image.file.name
+                    }, null, 8, ["hash", "src", "title"])
+                  ]),
+                  _: 2
+                }, 1032, ["class", "to"]);
+              }), 128))
+            ], 2)) : createCommentVNode("", true),
+            !unref(fetching) && unref(images).length == 0 ? (openBlock(), createElementBlock("p", {
+              key: 2,
+              class: normalizeClass(_ctx.$style.empty)
+            }, toDisplayString(unref(i18n).ts.nothing), 3)) : createCommentVNode("", true)
+          ], 2)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+
+const root = "xenMW";
+const stream = "xaZzf";
+const img = "xtA8t";
+const empty = "xhYKj";
+const style0 = {
+        root: root,
+        stream: stream,
+        img: img,
+        empty: empty
+};
+
+const cssModules = {
+  "$style": style0
+};
+const index_photos = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+
+export { index_photos as default };
+`.slice(1), { ecmaVersion: 'latest', sourceType: 'module' });
+	unwindCssModuleClassName(ast);
+	expect(generate(ast)).toBe(`
+import {c as api, d as defaultStore, i as i18n, aD as notePage, bN as ImgWithBlurhash, bY as getStaticImageUrl, _ as _export_sfc} from './app-!~{001}~.js';
+import {M as MkContainer} from './MkContainer-!~{03M}~.js';
+import {b as defineComponent, a as ref, e as onMounted, z as resolveComponent, g as openBlock, h as createBlock, i as withCtx, K as createTextVNode, E as toDisplayString, u as unref, l as createBaseVNode, q as normalizeClass, B as createCommentVNode, k as createElementBlock, F as Fragment, C as renderList, A as createVNode} from './vue-!~{002}~.js';
+import './photoswipe-!~{003}~.js';
+const _hoisted_1 = createBaseVNode("i", {
+  class: "ti ti-photo"
+}, null, -1);
+const _sfc_main = defineComponent({
+  __name: "index.photos",
+  props: {
+    user: {}
+  },
+  setup(__props) {
+    const props = __props;
+    let fetching = ref(true);
+    let images = ref([]);
+    function thumbnail(image) {
+      return defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(image.url) : image.thumbnailUrl;
+    }
+    onMounted(() => {
+      const image = ["image/jpeg", "image/webp", "image/avif", "image/png", "image/gif", "image/apng", "image/vnd.mozilla.apng"];
+      api("users/notes", {
+        userId: props.user.id,
+        fileType: image,
+        excludeNsfw: defaultStore.state.nsfw !== "ignore",
+        limit: 10
+      }).then(notes => {
+        for (const note of notes) {
+          for (const file of note.files) {
+            images.value.push({
+              note,
+              file
+            });
+          }
+        }
+        fetching.value = false;
+      });
+    });
+    return (_ctx, _cache) => {
+      const _component_MkLoading = resolveComponent("MkLoading");
+      const _component_MkA = resolveComponent("MkA");
+      return (openBlock(), createBlock(MkContainer, {
+        "max-height": 300,
+        foldable: true
+      }, {
+        icon: withCtx(() => [_hoisted_1]),
+        header: withCtx(() => [createTextVNode(toDisplayString(unref(i18n).ts.images), 1)]),
+        default: withCtx(() => [createBaseVNode("div", {
+          class: "xenMW"
+        }, [unref(fetching) ? (openBlock(), createBlock(_component_MkLoading, {
+          key: 0
+        })) : createCommentVNode("", true), !unref(fetching) && unref(images).length > 0 ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "xaZzf"
+        }, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(images), image => {
+          return (openBlock(), createBlock(_component_MkA, {
+            key: image.note.id + image.file.id,
+            class: "xtA8t",
+            to: unref(notePage)(image.note)
+          }, {
+            default: withCtx(() => [createVNode(ImgWithBlurhash, {
+              hash: image.file.blurhash,
+              src: thumbnail(image.file),
+              title: image.file.name
+            }, null, 8, ["hash", "src", "title"])]),
+            _: 2
+          }, 1032, ["class", "to"]));
+        }), 128))], 2)) : createCommentVNode("", true), !unref(fetching) && unref(images).length == 0 ? (openBlock(), createElementBlock("p", {
+          key: 2,
+          class: "xhYKj"
+        }, toDisplayString(unref(i18n).ts.nothing), 3)) : createCommentVNode("", true)], 2)]),
+        _: 1
+      }));
+    };
+  }
+});
+const root = "xenMW";
+const stream = "xaZzf";
+const img = "xtA8t";
+const empty = "xhYKj";
+const style0 = {
+  root: root,
+  stream: stream,
+  img: img,
+  empty: empty
+};
+const cssModules = {
+  "$style": style0
+};
+const index_photos = _sfc_main;
+export {index_photos as default};
+`.slice(1));
+});
+
+it('Composition API (with `useCssModule()`)', () => {
+	const ast = parse(`
+import { a7 as getCurrentInstance, b as defineComponent, G as useCssModule, a1 as h, H as TransitionGroup } from './!~{002}~.js';
+import { d as defaultStore, aK as toast, b5 as MkAd, i as i18n, _ as _export_sfc } from './app-!~{001}~.js';
+
+function isDebuggerEnabled(id) {
+  try {
+    return localStorage.getItem(\`DEBUG_\${id}\`) !== null;
+  } catch {
+    return false;
+  }
+}
+function stackTraceInstances() {
+  let instance = getCurrentInstance();
+  const stack = [];
+  while (instance) {
+    stack.push(instance);
+    instance = instance.parent;
+  }
+  return stack;
+}
+
+const _sfc_main = defineComponent({
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    direction: {
+      type: String,
+      required: false,
+      default: "down"
+    },
+    reversed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    noGap: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    ad: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props, { slots, expose }) {
+    const $style = useCssModule();
+    function getDateText(time) {
+      const date = new Date(time).getDate();
+      const month = new Date(time).getMonth() + 1;
+      return i18n.t("monthAndDay", {
+        month: month.toString(),
+        day: date.toString()
+      });
+    }
+    if (props.items.length === 0)
+      return;
+    const renderChildrenImpl = () => props.items.map((item, i) => {
+      if (!slots || !slots.default)
+        return;
+      const el = slots.default({
+        item
+      })[0];
+      if (el.key == null && item.id)
+        el.key = item.id;
+      if (i !== props.items.length - 1 && new Date(item.createdAt).getDate() !== new Date(props.items[i + 1].createdAt).getDate()) {
+        const separator = h("div", {
+          class: $style["separator"],
+          key: item.id + ":separator"
+        }, h("p", {
+          class: $style["date"]
+        }, [
+          h("span", {
+            class: $style["date-1"]
+          }, [
+            h("i", {
+              class: \`ti ti-chevron-up \${$style["date-1-icon"]}\`
+            }),
+            getDateText(item.createdAt)
+          ]),
+          h("span", {
+            class: $style["date-2"]
+          }, [
+            getDateText(props.items[i + 1].createdAt),
+            h("i", {
+              class: \`ti ti-chevron-down \${$style["date-2-icon"]}\`
+            })
+          ])
+        ]));
+        return [el, separator];
+      } else {
+        if (props.ad && item._shouldInsertAd_) {
+          return [h(MkAd, {
+            key: item.id + ":ad",
+            prefer: ["horizontal", "horizontal-big"]
+          }), el];
+        } else {
+          return el;
+        }
+      }
+    });
+    const renderChildren = () => {
+      const children = renderChildrenImpl();
+      if (isDebuggerEnabled(6864)) {
+        const nodes = children.flatMap((node) => node ?? []);
+        const keys = new Set(nodes.map((node) => node.key));
+        if (keys.size !== nodes.length) {
+          const id = crypto.randomUUID();
+          const instances = stackTraceInstances();
+          toast(instances.reduce((a, c) => \`\${a} at \${c.type.name}\`, \`[DEBUG_6864 (\${id})]: \${nodes.length - keys.size} duplicated keys found\`));
+          console.warn({ id, debugId: 6864, stack: instances });
+        }
+      }
+      return children;
+    };
+    function onBeforeLeave(el) {
+      el.style.top = \`\${el.offsetTop}px\`;
+      el.style.left = \`\${el.offsetLeft}px\`;
+    }
+    function onLeaveCanceled(el) {
+      el.style.top = "";
+      el.style.left = "";
+    }
+    return () => h(
+      defaultStore.state.animation ? TransitionGroup : "div",
+      {
+        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 }
+    );
+  }
+});
+
+const reversed = "xxiZh";
+const separator = "xxeDx";
+const date = "xxawD";
+const style0 = {
+        "date-separated-list": "xfKPa",
+        "date-separated-list-nogap": "xf9zr",
+        "direction-up": "x7AeO",
+        "direction-down": "xBIqc",
+        reversed: reversed,
+        separator: separator,
+        date: date,
+        "date-1": "xwtmh",
+        "date-1-icon": "xsNPa",
+        "date-2": "x1xvw",
+        "date-2-icon": "x9ZiG"
+};
+
+const cssModules = {
+  "$style": style0
+};
+const MkDateSeparatedList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+
+export { MkDateSeparatedList as M };
+`.slice(1), { ecmaVersion: 'latest', sourceType: 'module' });
+	unwindCssModuleClassName(ast);
+	expect(generate(ast)).toBe(`
+import {a7 as getCurrentInstance, b as defineComponent, G as useCssModule, a1 as h, H as TransitionGroup} from './!~{002}~.js';
+import {d as defaultStore, aK as toast, b5 as MkAd, i as i18n, _ as _export_sfc} from './app-!~{001}~.js';
+function isDebuggerEnabled(id) {
+  try {
+    return localStorage.getItem(\`DEBUG_\${id}\`) !== null;
+  } catch {
+    return false;
+  }
+}
+function stackTraceInstances() {
+  let instance = getCurrentInstance();
+  const stack = [];
+  while (instance) {
+    stack.push(instance);
+    instance = instance.parent;
+  }
+  return stack;
+}
+const _sfc_main = defineComponent({
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    direction: {
+      type: String,
+      required: false,
+      default: "down"
+    },
+    reversed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    noGap: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    ad: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props, {slots, expose}) {
+    const $style = useCssModule();
+    function getDateText(time) {
+      const date = new Date(time).getDate();
+      const month = new Date(time).getMonth() + 1;
+      return i18n.t("monthAndDay", {
+        month: month.toString(),
+        day: date.toString()
+      });
+    }
+    if (props.items.length === 0) return;
+    const renderChildrenImpl = () => props.items.map((item, i) => {
+      if (!slots || !slots.default) return;
+      const el = slots.default({
+        item
+      })[0];
+      if (el.key == null && item.id) el.key = item.id;
+      if (i !== props.items.length - 1 && new Date(item.createdAt).getDate() !== new Date(props.items[i + 1].createdAt).getDate()) {
+        const separator = h("div", {
+          class: $style["separator"],
+          key: item.id + ":separator"
+        }, h("p", {
+          class: $style["date"]
+        }, [h("span", {
+          class: $style["date-1"]
+        }, [h("i", {
+          class: \`ti ti-chevron-up \${$style["date-1-icon"]}\`
+        }), getDateText(item.createdAt)]), h("span", {
+          class: $style["date-2"]
+        }, [getDateText(props.items[i + 1].createdAt), h("i", {
+          class: \`ti ti-chevron-down \${$style["date-2-icon"]}\`
+        })])]));
+        return [el, separator];
+      } else {
+        if (props.ad && item._shouldInsertAd_) {
+          return [h(MkAd, {
+            key: item.id + ":ad",
+            prefer: ["horizontal", "horizontal-big"]
+          }), el];
+        } else {
+          return el;
+        }
+      }
+    });
+    const renderChildren = () => {
+      const children = renderChildrenImpl();
+      if (isDebuggerEnabled(6864)) {
+        const nodes = children.flatMap(node => node ?? []);
+        const keys = new Set(nodes.map(node => node.key));
+        if (keys.size !== nodes.length) {
+          const id = crypto.randomUUID();
+          const instances = stackTraceInstances();
+          toast(instances.reduce((a, c) => \`\${a} at \${c.type.name}\`, \`[DEBUG_6864 (\${id})]: \${nodes.length - keys.size} duplicated keys found\`));
+          console.warn({
+            id,
+            debugId: 6864,
+            stack: instances
+          });
+        }
+      }
+      return children;
+    };
+    function onBeforeLeave(el) {
+      el.style.top = \`\${el.offsetTop}px\`;
+      el.style.left = \`\${el.offsetLeft}px\`;
+    }
+    function onLeaveCanceled(el) {
+      el.style.top = "";
+      el.style.left = "";
+    }
+    return () => h(defaultStore.state.animation ? TransitionGroup : "div", {
+      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
+    });
+  }
+});
+const reversed = "xxiZh";
+const separator = "xxeDx";
+const date = "xxawD";
+const style0 = {
+  "date-separated-list": "xfKPa",
+  "date-separated-list-nogap": "xf9zr",
+  "direction-up": "x7AeO",
+  "direction-down": "xBIqc",
+  reversed: reversed,
+  separator: separator,
+  date: date,
+  "date-1": "xwtmh",
+  "date-1-icon": "xsNPa",
+  "date-2": "x1xvw",
+  "date-2-icon": "x9ZiG"
+};
+const cssModules = {
+  "$style": style0
+};
+const MkDateSeparatedList = _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {MkDateSeparatedList as M};
+`.slice(1));
+});
--- a/packages/frontend/lib/rollup-plugin-unwind-css-module-class-name.ts
+++ b/packages/frontend/lib/rollup-plugin-unwind-css-module-class-name.ts
@ -0,0 +1,275 @@
+import { generate } from 'astring';
+import * as estree from 'estree';
+import { walk } from '../node_modules/estree-walker/src/index.js';
+import type * as estreeWalker from 'estree-walker';
+import type { Plugin } from 'vite';
+
+function isFalsyIdentifier(identifier: estree.Identifier): boolean {
+	return identifier.name === 'undefined' || identifier.name === 'NaN';
+}
+
+function normalizeClassWalker(tree: estree.Node): string | null {
+	if (tree.type === 'Identifier') return isFalsyIdentifier(tree) ? '' : null;
+	if (tree.type === 'Literal') return typeof tree.value === 'string' ? tree.value : '';
+	if (tree.type === 'BinaryExpression') {
+		if (tree.operator !== '+') return null;
+		const left = normalizeClassWalker(tree.left);
+		const right = normalizeClassWalker(tree.right);
+		if (left === null || right === null) return null;
+		return `${left}${right}`;
+	}
+	if (tree.type === 'TemplateLiteral') {
+		if (tree.expressions.some((x) => x.type !== 'Literal' && (x.type !== 'Identifier' || !isFalsyIdentifier(x)))) return null;
+		return tree.quasis.reduce((a, c, i) => {
+			const v = i === tree.quasis.length - 1 ? '' : (tree.expressions[i] as Partial<estree.Literal>).value;
+			return a + c.value.raw + (typeof v === 'string' ? v : '');
+		}, '');
+	}
+	if (tree.type === 'ArrayExpression') {
+		const values = tree.elements.map((treeNode) => {
+			if (treeNode === null) return '';
+			if (treeNode.type === 'SpreadElement') return normalizeClassWalker(treeNode.argument);
+			return normalizeClassWalker(treeNode);
+		});
+		if (values.some((x) => x === null)) return null;
+		return values.join(' ');
+	}
+	if (tree.type === 'ObjectExpression') {
+		const values = tree.properties.map((treeNode) => {
+			if (treeNode.type === 'SpreadElement') return normalizeClassWalker(treeNode.argument);
+			let x = treeNode.value;
+			let inveted = false;
+			while (x.type === 'UnaryExpression' && x.operator === '!') {
+				x = x.argument;
+				inveted = !inveted;
+			}
+			if (x.type === 'Literal') {
+				if (inveted === !x.value) {
+					return treeNode.key.type === 'Identifier' ? treeNode.computed ? null : treeNode.key.name : treeNode.key.type === 'Literal' ? treeNode.key.value : '';
+				} else {
+					return '';
+				}
+			}
+			if (x.type === 'Identifier') {
+				if (inveted !== isFalsyIdentifier(x)) {
+					return '';
+				} else {
+					return null;
+				}
+			}
+			return null;
+		});
+		if (values.some((x) => x === null)) return null;
+		return values.join(' ');
+	}
+	console.error(`Unexpected node type: ${tree.type}`);
+	return null;
+}
+
+export function normalizeClass(tree: estree.Node): string | null {
+	const walked = normalizeClassWalker(tree);
+	return walked && walked.replace(/^\s+|\s+(?=\s)|\s+$/g, '');
+}
+
+export function unwindCssModuleClassName(ast: estree.Node): void {
+	(walk as typeof estreeWalker.walk)(ast, {
+		enter(node, parent): void {
+			if (parent?.type !== 'Program') return;
+			if (node.type !== 'VariableDeclaration') return;
+			if (node.declarations.length !== 1) return;
+			if (node.declarations[0].id.type !== 'Identifier') return;
+			const name = node.declarations[0].id.name;
+			if (node.declarations[0].init?.type !== 'CallExpression') return;
+			if (node.declarations[0].init.callee.type !== 'Identifier') return;
+			if (node.declarations[0].init.callee.name !== '_export_sfc') return;
+			if (node.declarations[0].init.arguments.length !== 2) return;
+			if (node.declarations[0].init.arguments[0].type !== 'Identifier') return;
+			const ident = node.declarations[0].init.arguments[0].name;
+			if (!ident.startsWith('_sfc_main')) return;
+			if (node.declarations[0].init.arguments[1].type !== 'ArrayExpression') return;
+			if (node.declarations[0].init.arguments[1].elements.length === 0) return;
+			const __cssModulesIndex = node.declarations[0].init.arguments[1].elements.findIndex((x) => {
+				if (x?.type !== 'ArrayExpression') return false;
+				if (x.elements.length !== 2) return false;
+				if (x.elements[0]?.type !== 'Literal') return false;
+				if (x.elements[0].value !== '__cssModules') return false;
+				if (x.elements[1]?.type !== 'Identifier') return false;
+				return true;
+			});
+			if (!~__cssModulesIndex) return;
+			const cssModuleForestName = ((node.declarations[0].init.arguments[1].elements[__cssModulesIndex] as estree.ArrayExpression).elements[1] as estree.Identifier).name;
+			const cssModuleForestNode = parent.body.find((x) => {
+				if (x.type !== 'VariableDeclaration') return false;
+				if (x.declarations.length !== 1) return false;
+				if (x.declarations[0].id.type !== 'Identifier') return false;
+				if (x.declarations[0].id.name !== cssModuleForestName) return false;
+				if (x.declarations[0].init?.type !== 'ObjectExpression') return false;
+				return true;
+			}) as unknown as estree.VariableDeclaration;
+			const moduleForest = new Map((cssModuleForestNode.declarations[0].init as estree.ObjectExpression).properties.flatMap((property) => {
+				if (property.type !== 'Property') return [];
+				if (property.key.type !== 'Literal') return [];
+				if (property.value.type !== 'Identifier') return [];
+				return [[property.key.value as string, property.value.name as string]];
+			}));
+			const sfcMain = parent.body.find((x) => {
+				if (x.type !== 'VariableDeclaration') return false;
+				if (x.declarations.length !== 1) return false;
+				if (x.declarations[0].id.type !== 'Identifier') return false;
+				if (x.declarations[0].id.name !== ident) return false;
+				return true;
+			}) as unknown as estree.VariableDeclaration;
+			if (sfcMain.declarations[0].init?.type !== 'CallExpression') return;
+			if (sfcMain.declarations[0].init.callee.type !== 'Identifier') return;
+			if (sfcMain.declarations[0].init.callee.name !== 'defineComponent') return;
+			if (sfcMain.declarations[0].init.arguments.length !== 1) return;
+			if (sfcMain.declarations[0].init.arguments[0].type !== 'ObjectExpression') return;
+			const setup = sfcMain.declarations[0].init.arguments[0].properties.find((x) => {
+				if (x.type !== 'Property') return false;
+				if (x.key.type !== 'Identifier') return false;
+				if (x.key.name !== 'setup') return false;
+				return true;
+			}) as unknown as estree.Property;
+			if (setup.value.type !== 'FunctionExpression') return;
+			const render = setup.value.body.body.find((x) => {
+				if (x.type !== 'ReturnStatement') return false;
+				return true;
+			}) as unknown as estree.ReturnStatement;
+			if (render.argument?.type !== 'ArrowFunctionExpression') return;
+			if (render.argument.params.length !== 2) return;
+			const ctx = render.argument.params[0];
+			if (ctx.type !== 'Identifier') return;
+			if (ctx.name !== '_ctx') return;
+			if (render.argument.body.type !== 'BlockStatement') return;
+			for (const [key, value] of moduleForest) {
+				const cssModuleTreeNode = parent.body.find((x) => {
+					if (x.type !== 'VariableDeclaration') return false;
+					if (x.declarations.length !== 1) return false;
+					if (x.declarations[0].id.type !== 'Identifier') return false;
+					if (x.declarations[0].id.name !== value) return false;
+					return true;
+				}) as unknown as estree.VariableDeclaration;
+				if (cssModuleTreeNode.declarations[0].init?.type !== 'ObjectExpression') return;
+				const moduleTree = new Map(cssModuleTreeNode.declarations[0].init.properties.flatMap((property) => {
+					if (property.type !== 'Property') return [];
+					const actualKey = property.key.type === 'Identifier' ? property.key.name : property.key.type === 'Literal' ? property.key.value : null;
+					if (typeof actualKey !== 'string') return [];
+					if (property.value.type === 'Literal') return [[actualKey, property.value.value as string]];
+					if (property.value.type !== 'Identifier') return [];
+					const labelledValue = property.value.name;
+					const actualValue = parent.body.find((x) => {
+						if (x.type !== 'VariableDeclaration') return false;
+						if (x.declarations.length !== 1) return false;
+						if (x.declarations[0].id.type !== 'Identifier') return false;
+						if (x.declarations[0].id.name !== labelledValue) return false;
+						return true;
+					}) as unknown as estree.VariableDeclaration;
+					if (actualValue.declarations[0].init?.type !== 'Literal') return [];
+					return [[actualKey, actualValue.declarations[0].init.value as string]];
+				}));
+				(walk as typeof estreeWalker.walk)(render.argument.body, {
+					enter(childNode) {
+						if (childNode.type !== 'MemberExpression') return;
+						if (childNode.object.type !== 'MemberExpression') return;
+						if (childNode.object.object.type !== 'Identifier') return;
+						if (childNode.object.object.name !== ctx.name) return;
+						if (childNode.object.property.type !== 'Identifier') return;
+						if (childNode.object.property.name !== key) return;
+						if (childNode.property.type !== 'Identifier') return;
+						const actualValue = moduleTree.get(childNode.property.name);
+						if (actualValue === undefined) return;
+						this.replace({
+							type: 'Literal',
+							value: actualValue,
+						});
+					},
+				});
+				(walk as typeof estreeWalker.walk)(render.argument.body, {
+					enter(childNode) {
+						if (childNode.type !== 'MemberExpression') return;
+						if (childNode.object.type !== 'MemberExpression') return;
+						if (childNode.object.object.type !== 'Identifier') return;
+						if (childNode.object.object.name !== ctx.name) return;
+						if (childNode.object.property.type !== 'Identifier') return;
+						if (childNode.object.property.name !== key) return;
+						if (childNode.property.type !== 'Identifier') return;
+						console.error(`Undefined style detected: ${key}.${childNode.property.name} (in ${name})`);
+						this.replace({
+							type: 'Identifier',
+							name: 'undefined',
+						});
+					},
+				});
+				(walk as typeof estreeWalker.walk)(render.argument.body, {
+					enter(childNode) {
+						if (childNode.type !== 'CallExpression') return;
+						if (childNode.callee.type !== 'Identifier') return;
+						if (childNode.callee.name !== 'normalizeClass') return;
+						if (childNode.arguments.length !== 1) return;
+						const normalized = normalizeClass(childNode.arguments[0]);
+						if (normalized === null) return;
+						this.replace({
+							type: 'Literal',
+							value: normalized,
+						});
+					},
+				});
+			}
+			if (node.declarations[0].init.arguments[1].elements.length === 1) {
+				this.replace({
+					type: 'VariableDeclaration',
+					declarations: [{
+						type: 'VariableDeclarator',
+						id: {
+							type: 'Identifier',
+							name: node.declarations[0].id.name,
+						},
+						init: {
+							type: 'Identifier',
+							name: ident,
+						},
+					}],
+					kind: 'const',
+				});
+			} else {
+				this.replace({
+					type: 'VariableDeclaration',
+					declarations: [{
+						type: 'VariableDeclarator',
+						id: {
+							type: 'Identifier',
+							name: node.declarations[0].id.name,
+						},
+						init: {
+							type: 'CallExpression',
+							callee: {
+								type: 'Identifier',
+								name: '_export_sfc',
+							},
+							arguments: [{
+								type: 'Identifier',
+								name: ident,
+							}, {
+								type: 'ArrayExpression',
+								elements: node.declarations[0].init.arguments[1].elements.slice(0, __cssModulesIndex).concat(node.declarations[0].init.arguments[1].elements.slice(__cssModulesIndex + 1)),
+							}],
+						},
+					}],
+					kind: 'const',
+				});
+			}
+		},
+	});
+}
+
+// eslint-disable-next-line import/no-default-export
+export default function pluginUnwindCssModuleClassName(): Plugin {
+	return {
+		name: 'UnwindCssModuleClassName',
+		renderChunk(code): { code: string } {
+			const ast = this.parse(code) as unknown as estree.Node;
+			unwindCssModuleClassName(ast);
+			return { code: generate(ast) };
+		},
+	};
+}
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@ -20,12 +20,13 @@
 		"@rollup/plugin-replace": "5.0.2",
 		"@rollup/pluginutils": "5.0.2",
 		"@syuilo/aiscript": "0.13.3",
-		"@tabler/icons-webfont": "2.17.0",
+		"@tabler/icons-webfont": "2.21.0",
 		"@vitejs/plugin-vue": "4.2.3",
-		"@vue-macros/reactivity-transform": "0.3.8",
+		"@vue-macros/reactivity-transform": "0.3.9",
 		"@vue/compiler-sfc": "3.3.4",
+		"astring": "1.8.6",
 		"autosize": "6.0.1",
-		"broadcast-channel": "4.20.2",
+		"broadcast-channel": "5.1.0",
 		"browser-image-resizer": "github:misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
 		"buraha": "github:misskey-dev/buraha",
 		"canvas-confetti": "1.6.0",
@ -34,11 +35,12 @@
 		"chartjs-chart-matrix": "2.0.1",
 		"chartjs-plugin-gradient": "0.6.1",
 		"chartjs-plugin-zoom": "2.0.1",
-		"chromatic": "6.17.4",
+		"chromatic": "6.18.0",
 		"compare-versions": "5.0.3",
 		"cropperjs": "2.0.0-beta.2",
 		"date-fns": "2.30.0",
 		"escape-regexp": "0.0.1",
+		"estree-walker": "^3.0.3",
 		"eventemitter3": "5.0.1",
 		"gsap": "3.11.5",
 		"idb-keyval": "6.2.1",
@ -61,13 +63,13 @@
 		"strict-event-emitter-types": "2.0.0",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
-		"three": "0.151.3",
+		"three": "0.153.0",
 		"throttle-debounce": "5.0.0",
 		"tinycolor2": "1.6.0",
 		"tsc-alias": "1.8.6",
 		"tsconfig-paths": "4.2.0",
 		"twemoji-parser": "14.0.0",
-		"typescript": "5.0.4",
+		"typescript": "5.1.3",
 		"uuid": "9.0.0",
 		"vanilla-tilt": "1.8.0",
 		"vite": "4.3.9",
@ -112,19 +114,19 @@
 		"@types/uuid": "9.0.1",
 		"@types/websocket": "1.0.5",
 		"@types/ws": "8.5.4",
-		"@typescript-eslint/eslint-plugin": "5.59.5",
-		"@typescript-eslint/parser": "5.59.5",
-		"@vitest/coverage-c8": "0.31.1",
+		"@typescript-eslint/eslint-plugin": "5.59.8",
+		"@typescript-eslint/parser": "5.59.8",
+		"@vitest/coverage-c8": "0.31.4",
 		"@vue/runtime-core": "3.3.4",
-		"astring": "1.8.5",
+		"acorn": "^8.8.2",
 		"chokidar-cli": "3.0.0",
 		"cross-env": "7.0.3",
 		"cypress": "12.13.0",
-		"eslint": "8.40.0",
+		"eslint": "8.41.0",
 		"eslint-plugin-import": "2.27.5",
 		"eslint-plugin-vue": "9.14.1",
 		"fast-glob": "3.2.12",
-		"happy-dom": "9.19.2",
+		"happy-dom": "9.20.3",
 		"micromatch": "3.1.10",
 		"msw": "1.2.1",
 		"msw-storybook-addon": "1.8.0",
@ -136,7 +138,7 @@
 		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
 		"summaly": "github:misskey-dev/summaly",
 		"vite-plugin-turbosnap": "1.0.2",
-		"vitest": "0.31.1",
+		"vitest": "0.31.4",
 		"vitest-fetch-mock": "0.2.2",
 		"vue-eslint-parser": "9.3.0",
 		"vue-tsc": "1.6.5"
--- a/packages/frontend/src/components/MkAchievements.vue
+++ b/packages/frontend/src/components/MkAchievements.vue
@ -3,7 +3,14 @@
 	<div v-if="achievements" :class="$style.root">
 		<div v-for="achievement in achievements" :key="achievement" :class="$style.achievement" class="_panel">
 			<div :class="$style.icon">
-				<div :class="[$style.iconFrame, $style['iconFrame_' + ACHIEVEMENT_BADGES[achievement.name].frame]]">
+				<div
+					:class="[$style.iconFrame, {
+						[$style.iconFrame_bronze]: ACHIEVEMENT_BADGES[achievement.name].frame === 'bronze',
+						[$style.iconFrame_silver]: ACHIEVEMENT_BADGES[achievement.name].frame === 'silver',
+						[$style.iconFrame_gold]: ACHIEVEMENT_BADGES[achievement.name].frame === 'gold',
+						[$style.iconFrame_platinum]: ACHIEVEMENT_BADGES[achievement.name].frame === 'platinum',
+					}]"
+				>
 					<div :class="[$style.iconInner]" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg }">
 						<img :class="$style.iconImg" :src="ACHIEVEMENT_BADGES[achievement.name].img">
 					</div>
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@ -10,7 +10,7 @@
 		</li>
 		<li tabindex="-1" :class="$style.item" @click="chooseUser()" @keydown="onKeydown">{{ i18n.ts.selectUser }}</li>
 	</ol>
-	<ol v-else-if="hashtags.length > 0" ref="suggests" :class="[$style.list, $style.hashtags]">
+	<ol v-else-if="hashtags.length > 0" ref="suggests" :class="$style.list">
 		<li v-for="hashtag in hashtags" tabindex="-1" :class="$style.item" @click="complete(type, hashtag)" @keydown="onKeydown">
 			<span class="name">{{ hashtag }}</span>
 		</li>
@ -42,7 +42,7 @@ import { acct } from '@/filters/user';
 import * as os from '@/os';
 import { MFM_TAGS } from '@/scripts/mfm-tags';
 import { defaultStore } from '@/store';
-import { emojilist } from '@/scripts/emojilist';
+import { emojilist, getEmojiName } from '@/scripts/emojilist';
 import { i18n } from '@/i18n';
 import { miLocalStorage } from '@/local-storage';
 import { customEmojis } from '@/custom-emojis';
@ -71,6 +71,19 @@ const emojiDb = computed(() => {
 		url: char2path(x.char),
 	}));

+	for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
+		for (const [emoji, keywords] of Object.entries(index)) {
+			for (const k of keywords) {
+				unicodeEmojiDB.push({
+					emoji: emoji,
+					name: k,
+					aliasOf: getEmojiName(emoji)!,
+					url: char2path(emoji),
+				});
+			}
+		}
+	}
+
 	unicodeEmojiDB.sort((a, b) => a.name.length - b.name.length);
 	//#endregion

--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@ -7,7 +7,7 @@
 	@click="emit('click', $event)"
 	@mousedown="onMousedown"
 >
-	<div ref="ripples" :class="$style.ripples"></div>
+	<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
 	<div :class="$style.content">
 		<slot></slot>
 	</div>
@ -18,7 +18,7 @@
 	:to="to"
 	@mousedown="onMousedown"
 >
-	<div ref="ripples" :class="$style.ripples"></div>
+	<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
 	<div :class="$style.content">
 		<slot></slot>
 	</div>
@ -26,9 +26,7 @@
 </template>

 <script lang="ts" setup>
-import { nextTick, onMounted, useCssModule } from 'vue';
-
-const $style = useCssModule();
+import { nextTick, onMounted } from 'vue';

 const props = defineProps<{
 	type?: 'button' | 'submit' | 'reset';
@ -81,7 +79,7 @@ function onMousedown(evt: MouseEvent): void {
 	const rect = target.getBoundingClientRect();

 	const ripple = document.createElement('div');
-	ripple.classList.add($style.ripple);
+	ripple.classList.add(ripples!.dataset.childrenClass!);
 	ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
 	ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';

--- a/packages/frontend/src/components/MkClickerGame.vue
+++ b/packages/frontend/src/components/MkClickerGame.vue
@ -3,7 +3,7 @@
 	<div v-if="game.ready" :class="$style.game">
 		<div :class="$style.cps" class="">{{ number(cps) }}cps</div>
 		<div :class="$style.count" class=""><i class="ti ti-cookie" style="font-size: 70%;"></i> {{ number(cookies) }}</div>
-		<button v-click-anime class="_button" :class="$style.button" @click="onClick">
+		<button v-click-anime class="_button" @click="onClick">
 			<img src="/client-assets/cookie.png" :class="$style.img">
 		</button>
 	</div>
@ -84,10 +84,6 @@ onUnmounted(() => {
 	margin-bottom: 6px;
 }

-.button {
-
-}
-
 .img {
 	max-width: 90px;
 }
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@ -1,5 +1,5 @@
 <template>
-<div ref="rootEl" class="_panel" :class="[$style.root, { [$style.naked]: naked, [$style.thin]: thin, [$style.hideHeader]: !showHeader, [$style.scrollable]: scrollable, [$style.closed]: !showBody }]">
+<div ref="rootEl" class="_panel" :class="[$style.root, { [$style.naked]: naked, [$style.thin]: thin, [$style.scrollable]: scrollable }]">
 	<header v-if="showHeader" ref="headerEl" :class="$style.header">
 		<div :class="$style.title">
 			<span :class="$style.titleIcon"><slot name="icon"></slot></span>
--- a/packages/frontend/src/components/MkDateSeparatedList.vue
+++ b/packages/frontend/src/components/MkDateSeparatedList.vue
@ -36,7 +36,7 @@ export default defineComponent({
 	},

 	setup(props, { slots, expose }) {
-		const $style = useCssModule();
+		const $style = useCssModule(); // カスタムレンダラなので使っても大丈夫
 		function getDateText(time: string) {
 			const date = new Date(time).getDate();
 			const month = new Date(time).getMonth() + 1;
--- a/packages/frontend/src/components/MkDialog.vue
+++ b/packages/frontend/src/components/MkDialog.vue
@ -4,7 +4,15 @@
 		<div v-if="icon" :class="$style.icon">
 			<i :class="icon"></i>
 		</div>
-		<div v-else-if="!input && !select" :class="[$style.icon, $style['type_' + type]]">
+		<div
+			v-else-if="!input && !select"
+			:class="[$style.icon, {
+				[$style.type_success]: type === 'success',
+				[$style.type_error]: type === 'error',
+				[$style.type_warning]: type === 'warning',
+				[$style.type_info]: type === 'info',
+			}]"
+		>
 			<i v-if="type === 'success'" :class="$style.iconInner" class="ti ti-check"></i>
 			<i v-else-if="type === 'error'" :class="$style.iconInner" class="ti ti-circle-x"></i>
 			<i v-else-if="type === 'warning'" :class="$style.iconInner" class="ti ti-alert-triangle"></i>
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@ -224,7 +224,6 @@ watch(q, () => {
 		if (newQ.includes(' ')) { // AND検索
 			const keywords = newQ.split(' ');

-			// 名前にキーワードが含まれている
 			for (const emoji of emojis) {
 				if (keywords.every(keyword => emoji.name.includes(keyword))) {
 					matches.add(emoji);
@ -233,11 +232,12 @@ watch(q, () => {
 			}
 			if (matches.size >= max) return matches;

-			// 名前にキーワードが含まれている
-			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
+			for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
+				for (const emoji of emojis) {
+					if (keywords.every(keyword => index[emoji.char].some(k => k.includes(keyword)))) {
+						matches.add(emoji);
+						if (matches.size >= max) break;
+					}
 				}
 			}
 		} else {
@ -249,6 +249,15 @@ watch(q, () => {
 			}
 			if (matches.size >= max) return matches;

+			for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
+				for (const emoji of emojis) {
+					if (index[emoji.char].some(k => k.startsWith(newQ))) {
+						matches.add(emoji);
+						if (matches.size >= max) break;
+					}
+				}
+			}
+
 			for (const emoji of emojis) {
 				if (emoji.name.includes(newQ)) {
 					matches.add(emoji);
@ -256,6 +265,15 @@ watch(q, () => {
 				}
 			}
 			if (matches.size >= max) return matches;
+
+			for (const index of Object.values(defaultStore.state.additionalUnicodeEmojiIndexes)) {
+				for (const emoji of emojis) {
+					if (index[emoji.char].some(k => k.includes(newQ))) {
+						matches.add(emoji);
+						if (matches.size >= max) break;
+					}
+				}
+			}
 		}

 		return matches;
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@ -5,7 +5,7 @@
 			<div :class="[$style.header, { [$style.opened]: opened }]" class="_button" role="button" data-cy-folder-header @click="toggle">
 				<div :class="$style.headerIcon"><slot name="icon"></slot></div>
 				<div :class="$style.headerText">
-					<div :class="$style.headerTextMain">
+					<div>
 						<MkCondensedLine :minScale="2 / 3"><slot name="label"></slot></MkCondensedLine>
 					</div>
 					<div :class="$style.headerTextSub">
@ -185,10 +185,6 @@ onMounted(() => {
 	padding-right: 12px;
 }

-.headerTextMain {
-
-}
-
 .headerTextSub {
 	color: var(--fgTransparentWeak);
 	font-size: .85em;
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@ -131,8 +131,7 @@ onBeforeUnmount(() => {
 	position: relative;
 	display: inline-block;
 	font-weight: bold;
-	color: var(--accent);
-	background: transparent;
+	color: var(--fgOnWhite);
 	border: solid 1px var(--accent);
 	padding: 0;
 	height: 31px;
--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@ -1,9 +1,9 @@
 <template>
-<div ref="root" :class="[$style.root, { [$style.cover]: cover }]" :title="title ?? ''">
+<div ref="root" :class="['chromatic-ignore', $style.root, { [$style.cover]: cover }]" :title="title ?? ''">
 	<TransitionGroup
 		:duration="defaultStore.state.animation && props.transition?.duration || undefined"
 		:enterActiveClass="defaultStore.state.animation && props.transition?.enterActiveClass || undefined"
-		:leaveActiveClass="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style['transition_leaveActive']) || undefined"
+		:leaveActiveClass="defaultStore.state.animation && (props.transition?.leaveActiveClass ?? $style.transition_leaveActive) || undefined"
 		:enterFromClass="defaultStore.state.animation && props.transition?.enterFromClass || undefined"
 		:leaveToClass="defaultStore.state.animation && props.transition?.leaveToClass || undefined"
 		:enterToClass="defaultStore.state.animation && props.transition?.enterToClass || undefined"
@ -23,6 +23,11 @@ import { WorkerMultiDispatch } from '@/scripts/worker-multi-dispatch';
 import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';

 const workerPromise = new Promise<WorkerMultiDispatch | null>(resolve => {
+	// テスト環境で Web Worker インスタンスは作成できない
+	if (import.meta.env.MODE === 'test') {
+		resolve(null);
+		return;
+	}
 	const testWorker = new TestWebGL2();
 	testWorker.addEventListener('message', event => {
 		if (event.data.result) {
@ -42,11 +47,10 @@ const workerPromise = new Promise<WorkerMultiDispatch | null>(resolve => {
 </script>

 <script lang="ts" setup>
-import { computed, nextTick, onMounted, onUnmounted, shallowRef, useCssModule, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, shallowRef, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { render } from 'buraha';
 import { defaultStore } from '@/store';
-const $style = useCssModule();

 const props = withDefaults(defineProps<{
 	transition?: {
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@ -32,7 +32,7 @@
 			<div v-if="image.comment" :class="$style.indicator">ALT</div>
 			<div v-if="image.isSensitive" :class="$style.indicator" style="color: var(--warn);">NSFW</div>
 		</div>
-		<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots"></i></button>
+		<button :class="$style.menu" class="_button" @click.stop="showMenu"><i class="ti ti-dots" style="vertical-align: middle;"></i></button>
 	</template>
 </div>
 </template>
@ -131,13 +131,14 @@ function showMenu(ev: MouseEvent) {
 .menu {
 	display: block;
 	position: absolute;
-	border-radius: 6px;
+	border-radius: 999px;
 	background-color: rgba(0, 0, 0, 0.3);
 	-webkit-backdrop-filter: var(--blur, blur(15px));
 	backdrop-filter: var(--blur, blur(15px));
 	color: #fff;
 	font-size: 0.8em;
-	padding: 6px 8px;
+	width: 32px;
+	height: 32px;
 	text-align: center;
 	bottom: 10px;
 	right: 10px;
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@ -6,8 +6,11 @@
 			ref="gallery"
 			:class="[
 				$style.medias,
-				count <= 4 ? $style['n' + count] : $style.nMany,
-				$style[`n1${defaultStore.reactiveState.mediaListWithOneImageAppearance.value}`]
+				count === 1 ? [$style.n1, {
+					[$style.n116_9]: defaultStore.reactiveState.mediaListWithOneImageAppearance.value === '16_9',
+					[$style.n11_1]: defaultStore.reactiveState.mediaListWithOneImageAppearance.value === '1_1',
+					[$style.n12_3]: defaultStore.reactiveState.mediaListWithOneImageAppearance.value === '2_3',
+				}] : count === 2 ? $style.n2 : count === 3 ? $style.n3 : count === 4 ? $style.n4 : $style.nMany,
 			]"
 		>
 			<template v-for="media in mediaList.filter(media => previewable(media))">
@ -20,7 +23,7 @@
 </template>

 <script lang="ts" setup>
-import { onMounted, ref, useCssModule, watch, shallowRef } from 'vue';
+import { onMounted, watch, shallowRef } from 'vue';
 import * as misskey from 'misskey-js';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
@ -37,8 +40,6 @@ const props = defineProps<{
 	raw?: boolean;
 }>();

-const $style = useCssModule();
-
 const gallery = shallowRef<HTMLDivElement>();
 const pswpZIndex = os.claimZIndex('middle');
 document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
@ -96,7 +97,7 @@ onMounted(() => {
 				return item;
 			}),
 		gallery: gallery.value,
-		mainClass: $style.pswp,
+		mainClass: 'pswp',
 		children: '.image',
 		thumbSelector: '.image',
 		loop: false,
@ -268,7 +269,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
 	border-radius: 8px;
 }

-.pswp {
+:global(.pswp) {
 	--pswp-root-z-index: var(--mk-pswp-root-z-index, 2000700) !important;
 	--pswp-bg: var(--modalBg) !important;
 }
--- a/packages/frontend/src/components/MkMention.vue
+++ b/packages/frontend/src/components/MkMention.vue
@ -2,7 +2,7 @@
 <MkA v-user-preview="canonical" :class="[$style.root, { [$style.isMe]: isMe }]" :to="url" :style="{ background: bgCss }">
 	<img :class="$style.icon" :src="`/avatar/@${username}@${host}`" alt="">
 	<span>
-		<span :class="$style.username">@{{ username }}</span>
+		<span>@{{ username }}</span>
 		<span v-if="(host != localHost) || defaultStore.state.showFullAcct" :class="$style.host">@{{ toUnicode(host) }}</span>
 	</span>
 </MkA>
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@ -49,7 +49,7 @@
 			<span>{{ i18n.ts.none }}</span>
 		</span>
 	</div>
-	<div v-if="childMenu" :class="$style.child">
+	<div v-if="childMenu">
 		<XChild ref="child" :items="childMenu" :targetElement="childTarget" :rootElement="itemsEl" showing @actioned="childActioned"/>
 	</div>
 </div>
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@ -1,10 +1,30 @@
 <template>
 <Transition
 	:name="transitionName"
-	:enterActiveClass="$style['transition_' + transitionName + '_enterActive']"
-	:leaveActiveClass="$style['transition_' + transitionName + '_leaveActive']"
-	:enterFromClass="$style['transition_' + transitionName + '_enterFrom']"
-	:leaveToClass="$style['transition_' + transitionName + '_leaveTo']"
+	:enterActiveClass="normalizeClass({
+		[$style.transition_modalDrawer_enterActive]: transitionName === 'modal-drawer',
+		[$style.transition_modalPopup_enterActive]: transitionName === 'modal-popup',
+		[$style.transition_modal_enterActive]: transitionName === 'modal',
+		[$style.transition_send_enterActive]: transitionName === 'send',
+	})"
+	:leaveActiveClass="normalizeClass({
+		[$style.transition_modalDrawer_leaveActive]: transitionName === 'modal-drawer',
+		[$style.transition_modalPopup_leaveActive]: transitionName === 'modal-popup',
+		[$style.transition_modal_leaveActive]: transitionName === 'modal',
+		[$style.transition_send_leaveActive]: transitionName === 'send',
+	})"
+	:enterFromClass="normalizeClass({
+		[$style.transition_modalDrawer_enterFrom]: transitionName === 'modal-drawer',
+		[$style.transition_modalPopup_enterFrom]: transitionName === 'modal-popup',
+		[$style.transition_modal_enterFrom]: transitionName === 'modal',
+		[$style.transition_send_enterFrom]: transitionName === 'send',
+	})"
+	:leaveToClass="normalizeClass({
+		[$style.transition_modalDrawer_leaveTo]: transitionName === 'modal-drawer',
+		[$style.transition_modalPopup_leaveTo]: transitionName === 'modal-popup',
+		[$style.transition_modal_leaveTo]: transitionName === 'modal',
+		[$style.transition_send_leaveTo]: transitionName === 'send',
+	})"
 	:duration="transitionDuration" appear @afterLeave="emit('closed')" @enter="emit('opening')" @afterEnter="onOpened"
 >
 	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" :class="[$style.root, { [$style.drawer]: type === 'drawer', [$style.dialog]: type === 'dialog', [$style.popup]: type === 'popup' }]" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
@ -17,7 +37,7 @@
 </template>

 <script lang="ts" setup>
-import { nextTick, onMounted, watch, provide, onUnmounted } from 'vue';
+import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch } from 'vue';
 import * as os from '@/os';
 import { isTouchUsing } from '@/scripts/touch';
 import { defaultStore } from '@/store';
@ -345,8 +365,8 @@ defineExpose({
 	}
 }

-.transition_modal-popup_enterActive,
-.transition_modal-popup_leaveActive {
+.transition_modalPopup_enterActive,
+.transition_modalPopup_leaveActive {
 	> .bg {
 		transition: opacity 0.1s !important;
 	}
@ -356,8 +376,8 @@ defineExpose({
 		transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1), transform 0.1s cubic-bezier(0, 0, 0.2, 1) !important;
 	}
 }
-.transition_modal-popup_enterFrom,
-.transition_modal-popup_leaveTo {
+.transition_modalPopup_enterFrom,
+.transition_modalPopup_leaveTo {
 	> .bg {
 		opacity: 0;
 	}
@ -370,7 +390,7 @@ defineExpose({
 	}
 }

-.transition_modal-drawer_enterActive {
+.transition_modalDrawer_enterActive {
 	> .bg {
 		transition: opacity 0.2s !important;
 	}
@ -379,7 +399,7 @@ defineExpose({
 		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
 	}
 }
-.transition_modal-drawer_leaveActive {
+.transition_modalDrawer_leaveActive {
 	> .bg {
 		transition: opacity 0.2s !important;
 	}
@ -388,8 +408,8 @@ defineExpose({
 		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
 	}
 }
-.transition_modal-drawer_enterFrom,
-.transition_modal-drawer_leaveTo {
+.transition_modalDrawer_enterFrom,
+.transition_modalDrawer_leaveTo {
 	> .bg {
 		opacity: 0;
 	}
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@ -44,8 +44,8 @@
 		<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
 		<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
 		<div :class="$style.main">
-			<MkNoteHeader :class="$style.header" :note="appearNote" :mini="true"/>
-			<MkInstanceTicker v-if="showTicker" :class="$style.ticker" :instance="appearNote.user.instance"/>
+			<MkNoteHeader :note="appearNote" :mini="true"/>
+			<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
 			<div style="container-type: inline-size;">
 				<p v-if="appearNote.cw != null" :class="$style.cw">
 					<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :i="$i"/>
@ -58,13 +58,13 @@
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
 						<div v-if="translating || translation" :class="$style.translation">
 							<MkLoading v-if="translating" mini/>
-							<div v-else :class="$style.translated">
+							<div v-else>
 								<b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b>
 								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
 							</div>
 						</div>
 					</div>
-					<div v-if="appearNote.files.length > 0" :class="$style.files">
+					<div v-if="appearNote.files.length > 0">
 						<MkMediaList :mediaList="appearNote.files"/>
 					</div>
 					<MkPoll v-if="appearNote.poll" :note="appearNote" :class="$style.poll"/>
@ -382,6 +382,8 @@ function undoReact(note): void {
 function onContextmenu(ev: MouseEvent): void {
 	const isLink = (el: HTMLElement) => {
 		if (el.tagName === 'A') return true;
+		// 再生速度の選択などのために、Audio要素のコンテキストメニューはブラウザデフォルトとする。
+		if (el.tagName === 'AUDIO') return true;
 		if (el.parentElement) {
 			return isLink(el.parentElement);
 		}
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@ -52,7 +52,7 @@
 					</div>
 				</div>
 				<div :class="$style.noteHeaderUsername"><MkAcct :user="appearNote.user"/></div>
-				<MkInstanceTicker v-if="showTicker" :class="$style.ticker" :instance="appearNote.user.instance"/>
+				<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
 			</div>
 		</header>
 		<div :class="$style.noteContent">
@ -72,7 +72,7 @@
 						<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emojiUrls="appearNote.emojis"/>
 					</div>
 				</div>
-				<div v-if="appearNote.files.length > 0" :class="$style.files">
+				<div v-if="appearNote.files.length > 0">
 					<MkMediaList :mediaList="appearNote.files"/>
 				</div>
 				<MkPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" :class="$style.poll"/>
--- a/packages/frontend/src/components/MkNotePreview.vue
+++ b/packages/frontend/src/components/MkNotePreview.vue
@ -6,7 +6,7 @@
 			<MkUserName :user="$i" :nowrap="true"/>
 		</div>
 		<div>
-			<div :class="$style.content">
+			<div>
 				<Mfm :text="text.trim()" :author="$i" :i="$i"/>
 			</div>
 		</div>
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@ -5,7 +5,19 @@
 		<MkAvatar v-else-if="notification.type === 'achievementEarned'" :class="$style.icon" :user="$i" link preview/>
 		<MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user" link preview/>
 		<img v-else-if="notification.icon" :class="$style.icon" :src="notification.icon" alt=""/>
-		<div :class="[$style.subIcon, $style['t_' + notification.type]]">
+		<div
+			:class="[$style.subIcon, {
+				[$style.t_follow]: notification.type === 'follow',
+				[$style.t_followRequestAccepted]: notification.type === 'followRequestAccepted',
+				[$style.t_receiveFollowRequest]: notification.type === 'receiveFollowRequest',
+				[$style.t_renote]: notification.type === 'renote',
+				[$style.t_reply]: notification.type === 'reply',
+				[$style.t_mention]: notification.type === 'mention',
+				[$style.t_quote]: notification.type === 'quote',
+				[$style.t_pollEnded]: notification.type === 'pollEnded',
+				[$style.t_achievementEarned]: notification.type === 'achievementEarned',
+			}]"
+		>
 			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
 			<i v-else-if="notification.type === 'receiveFollowRequest'" class="ti ti-clock"></i>
 			<i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i>
@ -34,7 +46,7 @@
 			<span v-else>{{ notification.header }}</span>
 			<MkTime v-if="withTime" :time="notification.createdAt" :class="$style.headerTime"/>
 		</header>
-		<div :class="$style.content">
+		<div>
 			<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="true" :author="notification.note.user"/>
@ -243,9 +255,6 @@ useTooltip(reactionRef, (showing) => {
 	font-size: 0.9em;
 }

-.content {
-}
-
 .text {
 	display: flex;
 	width: 100%;
--- a/packages/frontend/src/components/MkPoll.vue
+++ b/packages/frontend/src/components/MkPoll.vue
@ -1,7 +1,7 @@
 <template>
 <div :class="{ [$style.done]: closed || isVoted }">
 	<ul :class="$style.choices">
-		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="[$style.choice, { [$style.voted]: choice.voted }]" @click="vote(i)">
+		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="$style.choice" @click="vote(i)">
 			<div :class="$style.bg" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span :class="$style.fg">
 				<template v-if="choice.isVoted"><i class="ti ti-check" style="margin-right: 4px; color: var(--accent);"></i></template>
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@ -27,16 +27,16 @@
 					<span :class="$style.headerRightButtonText">{{ channel.name }}</span>
 				</button>
 			</template>
-			<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="[$style.headerRightItem, $style.localOnly, { [$style.danger]: localOnly }]" :disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly">
+			<button v-click-anime v-tooltip="i18n.ts._visibility.disableFederation" class="_button" :class="[$style.headerRightItem, { [$style.danger]: localOnly }]" :disabled="channel != null || visibility === 'specified'" @click="toggleLocalOnly">
 				<span v-if="!localOnly"><i class="ti ti-rocket"></i></span>
 				<span v-else><i class="ti ti-rocket-off"></i></span>
 			</button>
-			<button v-click-anime v-tooltip="i18n.ts.reactionAcceptance" class="_button" :class="[$style.headerRightItem, $style.reactionAcceptance, { [$style.danger]: reactionAcceptance === 'likeOnly' }]" @click="toggleReactionAcceptance">
+			<button v-click-anime v-tooltip="i18n.ts.reactionAcceptance" class="_button" :class="[$style.headerRightItem, { [$style.danger]: reactionAcceptance === 'likeOnly' }]" @click="toggleReactionAcceptance">
 				<span v-if="reactionAcceptance === 'likeOnly'"><i class="ti ti-heart"></i></span>
 				<span v-else-if="reactionAcceptance === 'likeOnlyForRemote'"><i class="ti ti-heart-plus"></i></span>
 				<span v-else><i class="ti ti-icons"></i></span>
 			</button>
-			<button v-click-anime class="_button" :class="[$style.submit, { [$style.submitPosting]: posting }]" :disabled="!canPost" data-cy-open-post-form-submit @click="post">
+			<button v-click-anime class="_button" :class="$style.submit" :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>
@ -66,7 +66,7 @@
 		<div v-if="maxTextLength - textLength < 100" :class="['_acrylic', $style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</div>
 	</div>
 	<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" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
+	<XPostFormAttaches v-model="files" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 	<MkPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
 	<MkNotePreview v-if="showPreview" :class="$style.preview" :text="text"/>
 	<div v-if="showingOptions" style="padding: 8px 16px;">
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@ -1,6 +1,6 @@
 <template>
 <div :class="[$style.root, { [$style.collapsed]: collapsed }]">
-	<div :class="$style.body">
+	<div>
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
 		<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
@ -76,10 +76,6 @@ const collapsed = $ref(
 	}
 }

-.body {
-
-}
-
 .reply {
 	margin-right: 6px;
 	color: var(--accent);
--- a/packages/frontend/src/components/MkTextarea.vue
+++ b/packages/frontend/src/components/MkTextarea.vue
@ -6,7 +6,7 @@
 			ref="inputEl"
 			v-model="v"
 			v-adaptive-border
-			:class="[$style.textarea, { [$style.code]: code, _monospace: code }]"
+			:class="[$style.textarea, { _monospace: code }]"
 			:disabled="disabled"
 			:required="required"
 			:readonly="readonly"
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@ -22,7 +22,7 @@
 	</div>
 </template>
 <template v-else-if="tweetId && tweetExpanded">
-	<div ref="twitter" :class="$style.twitter">
+	<div ref="twitter">
 		<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
 	</div>
 	<div :class="$style.action">
@ -31,7 +31,7 @@
 		</MkButton>
 	</div>
 </template>
-<div v-else :class="$style.urlPreview">
+<div v-else>
 	<component :is="self ? 'MkA' : 'a'" :class="[$style.link, { [$style.compact]: compact }]" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 		<div v-if="thumbnail" :class="$style.thumbnail" :style="`background-image: url('${thumbnail}')`">
 		</div>
@ -210,13 +210,6 @@ onUnmounted(() => {
 	width: 100%;
 }

-.twitter {
-
-}
-
-.urlPreview {
-}
-
 .link {
 	position: relative;
 	display: block;
--- a/packages/frontend/src/components/MkUserInfo.vue
+++ b/packages/frontend/src/components/MkUserInfo.vue
@ -8,7 +8,7 @@
 	</div>
 	<span v-if="$i && $i.id !== user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span>
 	<div :class="$style.description">
-		<div v-if="user.description" class="mfm">
+		<div v-if="user.description" :class="$style.mfm">
 			<Mfm :text="user.description" :author="user" :i="$i"/>
 		</div>
 		<span v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</span>
--- a/packages/frontend/src/components/MkUserOnlineIndicator.vue
+++ b/packages/frontend/src/components/MkUserOnlineIndicator.vue
@ -1,5 +1,13 @@
 <template>
-<div v-tooltip="text" :class="[$style.root, $style['status_' + user.onlineStatus]]"></div>
+<div
+	v-tooltip="text"
+	:class="[$style.root, {
+		[$style.status_online]: user.onlineStatus === 'online',
+		[$style.status_active]: user.onlineStatus === 'active',
+		[$style.status_offline]: user.onlineStatus === 'offline',
+		[$style.status_unknown]: user.onlineStatus === 'unknown',
+	}]"
+></div>
 </template>

 <script lang="ts" setup>
--- a/packages/frontend/src/components/MkUserPopup.vue
+++ b/packages/frontend/src/components/MkUserPopup.vue
@ -22,7 +22,7 @@
 				<div :class="$style.username"><MkAcct :user="user"/></div>
 			</div>
 			<div :class="$style.description">
-				<Mfm v-if="user.description" :text="user.description" :author="user" :i="$i"/>
+				<Mfm v-if="user.description" :class="$style.mfm" :text="user.description" :author="user" :i="$i"/>
 				<div v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</div>
 			</div>
 			<div :class="$style.status">
@ -208,6 +208,13 @@ onMounted(() => {
 	border-bottom: solid 1px var(--divider);
 }

+.mfm {
+	display: -webkit-box;
+	-webkit-line-clamp: 5;
+	-webkit-box-orient: vertical;  
+	overflow: hidden;
+}
+
 .status {
 	padding: 16px 26px 16px 26px;
 }
--- a/packages/frontend/src/components/MkUserSelectDialog.vue
+++ b/packages/frontend/src/components/MkUserSelectDialog.vue
@ -9,7 +9,7 @@
 	@closed="$emit('closed')"
 >
 	<template #header>{{ i18n.ts.selectUser }}</template>
-	<div :class="$style.root">
+	<div>
 		<div :class="$style.form">
 			<FormSplit :minWidth="170">
 				<MkInput v-model="username" :autofocus="true" @update:modelValue="search">
@ -126,8 +126,6 @@ onMounted(() => {
 </script>

 <style lang="scss" module>
-.root {
-}

 .form {
 	padding: 0 var(--root-margin);
--- a/packages/frontend/src/components/MkUsersTooltip.vue
+++ b/packages/frontend/src/components/MkUsersTooltip.vue
@ -3,9 +3,9 @@
 	<div :class="$style.root">
 		<div v-for="u in users" :key="u.id" :class="$style.user">
 			<MkAvatar :class="$style.avatar" :user="u"/>
-			<MkUserName :class="$style.name" :user="u" :nowrap="true"/>
+			<MkUserName :user="u" :nowrap="true"/>
 		</div>
-		<div v-if="users.length < count" :class="$style.omitted">+{{ count - users.length }}</div>
+		<div v-if="users.length < count">+{{ count - users.length }}</div>
 	</div>
 </MkTooltip>
 </template>
@ -43,14 +43,6 @@ const emit = defineEmits<{
 	}
 }

-.name {
-
-}
-
-.omitted {
-	
-}
-
 .avatar {
 	width: 24px;
 	height: 24px;
--- a/packages/frontend/src/components/MkVisitorDashboard.vue
+++ b/packages/frontend/src/components/MkVisitorDashboard.vue
@ -39,7 +39,7 @@
 			<MkTimeline src="local"/>
 		</div>
 	</div>
-	<div :class="[$style.activeUsersChart, $style.panel]">
+	<div :class="$style.panel">
 		<XActiveUsersChart/>
 	</div>
 </div>
@ -220,8 +220,4 @@ function exploreOtherServers() {
 	height: 350px;
 	overflow: auto;
 }
-
-.activeUsersChart {
-
-}
 </style>
--- a/packages/frontend/src/components/MkWidgets.vue
+++ b/packages/frontend/src/components/MkWidgets.vue
@ -1,7 +1,7 @@
 <template>
 <div :class="$style.root">
 	<template v-if="edit">
-		<header :class="$style['edit-header']">
+		<header :class="$style.editHeader">
 			<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" data-cy-widget-select>
 				<template #label>{{ i18n.ts.selectWidget }}</template>
 				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
@ -15,15 +15,15 @@
 			handle=".handle"
 			:animation="150"
 			:group="{ name: 'SortableMkWidgets' }"
-			:class="$style['edit-editing']"
+			:class="$style.editEditing"
 			@update:modelValue="v => emit('updateWidgets', v)"
 		>
 			<template #item="{element}">
-				<div :class="[$style.widget, $style['customize-container']]" data-cy-customize-container>
-					<button :class="$style['customize-container-config']" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
-					<button :class="$style['customize-container-remove']" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
+				<div :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
+					<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
+					<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
 					<div class="handle">
-						<component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style['customize-container-handle-widget']" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
+						<component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
 					</div>
 				</div>
 			</template>
@ -130,7 +130,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 }

 .edit {
-	&-header {
+	&Header {
 		margin: 16px 0;

 		> * {
@ -139,17 +139,17 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		}
 	}

-	&-editing {
+	&Editing {
 		min-height: 100px;
 	}
 }

-.customize-container {
+.customizeContainer {
 	position: relative;
 	cursor: move;

-	&-config,
-	&-remove {
+	&Config,
+	&Remove {
 		position: absolute;
 		z-index: 10000;
 		top: 8px;
@ -160,17 +160,17 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		border-radius: 4px;
 	}

-	&-config {
+	&Config {
 		right: 8px + 8px + 32px;
 	}

-	&-remove {
+	&Remove {
 		right: 8px;
 	}

-	&-handle {
+	&Handle {

-		&-widget {
+		&Widget {
 			pointer-events: none;
 		}
 	}
--- a/packages/frontend/src/components/form/link.vue
+++ b/packages/frontend/src/components/form/link.vue
@ -5,7 +5,7 @@
 		<span :class="$style.text"><slot></slot></span>
 		<span :class="$style.suffix">
 			<span :class="$style.suffixText"><slot name="suffix"></slot></span>
-			<i class="ti ti-external-link" :class="$style.suffixIcon"></i>
+			<i class="ti ti-external-link"></i>
 		</span>
 	</a>
 	<MkA v-else :class="[$style.main, { [$style.active]: active }]" class="_button" :to="to" :behavior="behavior">
@ -13,7 +13,7 @@
 		<span :class="$style.text"><slot></slot></span>
 		<span :class="$style.suffix">
 			<span :class="$style.suffixText"><slot name="suffix"></slot></span>
-			<i class="ti ti-chevron-right" :class="$style.suffixIcon"></i>
+			<i class="ti ti-chevron-right"></i>
 		</span>
 	</MkA>
 </div>
--- a/packages/frontend/src/components/form/slot.vue
+++ b/packages/frontend/src/components/form/slot.vue
@ -1,7 +1,7 @@
 <template>
 <div>
 	<div :class="$style.label" @click="focus"><slot name="label"></slot></div>
-	<div :class="$style.content">
+	<div>
 		<slot></slot>
 	</div>
 	<div :class="$style.caption"><slot name="caption"></slot></div>
--- a/packages/frontend/src/components/global/MkAd.vue
+++ b/packages/frontend/src/components/global/MkAd.vue
@ -1,6 +1,14 @@
 <template>
 <div v-if="chosen && !shouldHide" :class="$style.root">
-	<div v-if="!showMenu" :class="[$style.main, $style['form_' + chosen.place]]">
+	<div
+		v-if="!showMenu"
+		:class="[$style.main, {
+			[$style.form_square]: chosen.place === 'square',
+			[$style.form_horizontal]: chosen.place === 'horizontal',
+			[$style.form_horizontalBig]: chosen.place === 'horizontal-big',
+			[$style.form_vertical]: chosen.place === 'vertical',
+		}]"
+	>
 		<a :href="chosen.url" target="_blank" :class="$style.link">
 			<img :src="chosen.imageUrl" :class="$style.img">
 			<button class="_button" :class="$style.i" @click.prevent.stop="toggleMenu"><i :class="$style.iIcon" class="ti ti-info-circle"></i></button>
@ -122,7 +130,7 @@ function reduceFrequency(): void {
 		}
 	}

-	&.form_horizontal-big {
+	&.form_horizontalBig {
 		padding: 8px;

 		> .link,
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@ -1,6 +1,6 @@
 <template>
 <component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="[$style.root, { [$style.animation]: animation, [$style.cat]: user.isCat, [$style.square]: squareAvatars }]" :style="{ color }" :title="acct(user)" @click="onClick">
-	<MkImgWithBlurhash :class="$style.inner" :src="url" :hash="user?.avatarBlurhash" :cover="true"/>
+	<img :class="$style.inner" :src="url" :hash="user?.avatarBlurhash" :cover="true"/>
 	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/>
 	<div v-if="user.isCat" :class="[$style.ears]">
 		<div :class="$style.earLeft">
@ -24,7 +24,6 @@
 <script lang="ts" setup>
 import { watch } from 'vue';
 import * as misskey from 'misskey-js';
-import MkImgWithBlurhash from '../MkImgWithBlurhash.vue';
 import MkA from './MkA.vue';
 import { getStaticImageUrl } from '@/scripts/media-proxy';
 import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
--- a/packages/frontend/src/components/global/MkCondensedLine.vue
+++ b/packages/frontend/src/components/global/MkCondensedLine.vue
@ -13,13 +13,20 @@ interface Props {

 const contentSymbol = Symbol();
 const observer = new ResizeObserver((entries) => {
+  const results: {
+    container: HTMLSpanElement;
+    transform: string;
+  }[] = [];
 	for (const entry of entries) {
 		const content = (entry.target[contentSymbol] ? entry.target : entry.target.firstElementChild) as HTMLSpanElement;
 		const props: Required<Props> = content[contentSymbol];
 		const container = content.parentElement as HTMLSpanElement;
 		const contentWidth = content.getBoundingClientRect().width;
 		const containerWidth = container.getBoundingClientRect().width;
-		container.style.transform = `scaleX(${Math.max(props.minScale, Math.min(1, containerWidth / contentWidth))})`;
+		results.push({ container, transform: `scaleX(${Math.max(props.minScale, Math.min(1, containerWidth / contentWidth))})` });
+	}
+	for (const result of results) {
+		result.container.style.transform = result.transform;
 	}
 });
 </script>
--- a/packages/frontend/src/components/global/MkUrl.vue
+++ b/packages/frontend/src/components/global/MkUrl.vue
@ -6,7 +6,7 @@
 	<template v-if="!self">
 		<span :class="$style.schema">{{ schema }}//</span>
 		<span :class="$style.hostname">{{ hostname }}</span>
-		<span v-if="port != ''" :class="$style.port">:{{ port }}</span>
+		<span v-if="port != ''">:{{ port }}</span>
 	</template>
 	<template v-if="pathname === '/' && self">
 		<span :class="$style.self">{{ hostname }}</span>
--- a/packages/frontend/src/components/page/page.section.vue
+++ b/packages/frontend/src/components/page/page.section.vue
@ -1,6 +1,15 @@
 <template>
 <section>
-	<component :is="'h' + h" :class="h < 5 ? $style['h' + h] : null">{{ block.title }}</component>
+	<component
+		:is="'h' + h"
+		:class="{
+			'h2': h === 2,
+			'h3': h === 3,
+			'h4': h === 4,
+		}"
+	>
+		{{ block.title }}
+	</component>

 	<div class="_gaps">
 		<XBlock v-for="child in block.children" :key="child.id" :page="page" :block="child" :h="h + 1"/>
--- a/packages/frontend/src/local-storage.ts
+++ b/packages/frontend/src/local-storage.ts
@ -13,7 +13,7 @@ type Keys =
 	'hashtags' |
 	'wallpaper' |
 	'theme' |
-	'colorSchema' |
+	'colorScheme' |
 	'useSystemFont' | 
 	'fontSize' |
 	'ui' |
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@ -149,6 +149,12 @@ const patronsWithIcon = [{
 }, {
 	name: 'かみらえっと',
 	icon: 'https://misskey-hub.net/patrons/be1326bda7d940a482f3758ffd9ffaf6.jpg',
+}, {
+	name: 'へてて',
+	icon: 'https://misskey-hub.net/patrons/0431eacd7c6843d09de8ea9984307e86.jpg',
+}, {
+	name: 'spinlock',
+	icon: 'https://misskey-hub.net/patrons/6a1cebc819d540a78bf20e9e3115baa8.jpg',
 }];

 const patrons = [
--- a/packages/frontend/src/pages/admin/RolesEditorFormula.vue
+++ b/packages/frontend/src/pages/admin/RolesEditorFormula.vue
@ -1,5 +1,5 @@
 <template>
-<div :class="$style.root" class="_gaps">
+<div class="_gaps">
 	<div :class="$style.header">
 		<MkSelect v-model="type" :class="$style.typeSelect">
 			<option value="isLocal">{{ i18n.ts._role._condition.isLocal }}</option>
@ -24,7 +24,7 @@
 		</button>
 	</div>

-	<div v-if="type === 'and' || type === 'or'" :class="$style.values" class="_gaps">
+	<div v-if="type === 'and' || type === 'or'" class="_gaps">
 		<Sortable v-model="v.values" tag="div" class="_gaps" itemKey="id" handle=".drag-handle" :group="{ name: 'roleFormula' }" :animation="150" :swapThreshold="0.5">
 			<template #item="{element}">
 				<div :class="$style.item">
@ -118,10 +118,6 @@ function removeSelf() {
 </script>

 <style lang="scss" module>
-.root {
-
-}
-
 .header {
 	display: flex;
 }
@ -148,8 +144,4 @@ function removeSelf() {
 		border-color: var(--accent);
 	}
 }
-
-.values {
-
-}
 </style>
--- a/packages/frontend/src/pages/admin/queue.chart.vue
+++ b/packages/frontend/src/pages/admin/queue.chart.vue
@ -28,8 +28,8 @@
 		<template #icon><i class="ti ti-alert-triangle"></i></template>
 		<template #label>Errored instances</template>
 		<template #suffix>({{ number(jobs.reduce((a, b) => a + b[1], 0)) }} jobs)</template>
-		
-		<div :class="$style.jobs">
+
+		<div>
 			<div v-if="jobs.length > 0">
 				<div v-for="job in jobs" :key="job[0]">
 					<MkA :to="`/instance-info/${job[0]}`" behavior="window">{{ job[0] }}</MkA>
@ -150,7 +150,4 @@ onUnmounted(() => {
 	font-size: 80%;
 	opacity: 0.6;
 }
-
-.jobs {
-}
 </style>
--- a/packages/frontend/src/pages/admin/server-rules.vue
+++ b/packages/frontend/src/pages/admin/server-rules.vue
@ -27,7 +27,7 @@
 				</Sortable>
 				<div :class="$style.commands">
 					<MkButton rounded @click="serverRules.push('')"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
-					<MkButton primary rounded :class="$style.buttonSave" @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+					<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
 				</div>
 			</div>
 		</MkSpacer>
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@ -24,6 +24,7 @@
 		<div class="_gaps_s">
 			<MkSwitch v-model="showFixedPostForm">{{ i18n.ts.showFixedPostForm }}</MkSwitch>
 			<MkSwitch v-model="showFixedPostFormInChannel">{{ i18n.ts.showFixedPostFormInChannel }}</MkSwitch>
+			<MkSwitch v-model="showTimelineReplies">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></MkSwitch>
 		</div>
 	</FormSection>

@ -147,7 +148,13 @@
 		<template #label>{{ i18n.ts.other }}</template>

 		<div class="_gaps">
-			<MkSwitch v-model="showTimelineReplies">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></MkSwitch>
+			<MkFolder>
+				<template #label>{{ i18n.ts.additionalEmojiDictionary }}</template>
+				<div v-for="lang in emojiIndexLangs" class="_buttons">
+					<MkButton @click="downloadEmojiIndex(lang)"><i class="ti ti-download"></i> {{ lang }}{{ defaultStore.reactiveState.additionalUnicodeEmojiIndexes.value[lang] ? ` (${ i18n.ts.installed })` : '' }}</MkButton>
+					<MkButton v-if="defaultStore.reactiveState.additionalUnicodeEmojiIndexes.value[lang]" danger @click="removeEmojiIndex(lang)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+				</div>
+			</MkFolder>
 			<FormLink to="/settings/deck">{{ i18n.ts.deck }}</FormLink>
 			<FormLink to="/settings/custom-css"><template #icon><i class="ti ti-code"></i></template>{{ i18n.ts.customCss }}</FormLink>
 		</div>
@ -161,6 +168,8 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkRange from '@/components/MkRange.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkButton from '@/components/MkButton.vue';
 import FormSection from '@/components/form/section.vue';
 import FormLink from '@/components/form/link.vue';
 import MkLink from '@/components/MkLink.vue';
@ -253,6 +262,34 @@ watch([
 	await reloadAsk();
 });

+const emojiIndexLangs = ['en-US'];
+
+function downloadEmojiIndex(lang: string) {
+	async function main() {
+		const currentIndexes = defaultStore.state.additionalUnicodeEmojiIndexes;
+		function download() {
+			switch (lang) {
+				case 'en-US': return import('../../unicode-emoji-indexes/en-US.json').then(x => x.default);
+				default: throw new Error('unrecognized lang: ' + lang);
+			}
+		}
+		currentIndexes[lang] = await download();
+		await defaultStore.set('additionalUnicodeEmojiIndexes', currentIndexes);
+	}
+
+	os.promiseDialog(main());
+}
+
+function removeEmojiIndex(lang: string) {
+	async function main() {
+		const currentIndexes = defaultStore.state.additionalUnicodeEmojiIndexes;
+		delete currentIndexes[lang];
+		await defaultStore.set('additionalUnicodeEmojiIndexes', currentIndexes);
+	}
+
+	os.promiseDialog(main());
+}
+
 const headerActions = $computed(() => []);

 const headerTabs = $computed(() => []);
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@ -32,7 +32,7 @@
 </template>

 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, useCssModule } from 'vue';
+import { computed, onMounted, onUnmounted } from 'vue';
 import { v4 as uuid } from 'uuid';
 import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/MkButton.vue';
@ -48,8 +48,6 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { miLocalStorage } from '@/local-storage';
 const { t, ts } = i18n;

-useCssModule();
-
 const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'menu',
 	'visibility',
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@ -3,7 +3,7 @@
 	<div :class="$style.avatarAndBanner" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
 		<div :class="$style.avatarContainer">
 			<MkAvatar :class="$style.avatar" :user="$i" @click="changeAvatar"/>
-			<MkButton primary rounded :class="$style.avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
+			<MkButton primary rounded @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
 		</div>
 		<MkButton primary rounded :class="$style.bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
 	</div>
@ -271,10 +271,6 @@ definePageMetadata({
 	margin: 0 auto 16px auto;
 }

-.avatarEdit {
-	
-}
-
 .bannerEdit {
 	position: absolute;
 	top: 16px;
--- a/packages/frontend/src/pages/signup-complete.vue
+++ b/packages/frontend/src/pages/signup-complete.vue
@ -1,5 +1,5 @@
 <template>
-<div :class="$style.root">
+<div>
 	<MkAnimBg style="position: fixed; top: 0;"/>
 	<div :class="$style.formContainer">
 		<form :class="$style.form" class="_panel" @submit.prevent="submit()">
@ -53,9 +53,6 @@ function submit() {
 </script>

 <style lang="scss" module>
-.root {
-}
-
 .formContainer {
 	min-height: 100svh;
 	padding: 32px 32px 64px 32px;
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@ -1,5 +1,5 @@
 <template>
-<div :class="$style.root">
+<div>
 	<MkAnimBg style="position: fixed; top: 0;"/>
 	<div :class="$style.formContainer">
 		<form :class="$style.form" class="_panel" @submit.prevent="submit()">
@ -64,9 +64,6 @@ function submit() {
 </script>

 <style lang="scss" module>
-.root {
-}
-
 .formContainer {
 	min-height: 100svh;
 	padding: 32px 32px 64px 32px;
--- a/packages/frontend/src/pages/welcome.timeline.vue
+++ b/packages/frontend/src/pages/welcome.timeline.vue
@ -3,7 +3,7 @@
 	<div ref="scrollEl" :class="[$style.scrollbox, { [$style.scroll]: isScrolling }]">
 		<div v-for="note in notes" :key="note.id" :class="$style.note">
 			<div class="_panel" :class="$style.content">
-				<div :class="$style.body">
+				<div>
 					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i"/>
 					<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
--- a/packages/frontend/src/scripts/emojilist.ts
+++ b/packages/frontend/src/scripts/emojilist.ts
@ -30,10 +30,10 @@ for (let i = 0; i < emojilist.length; i++) {

 export const emojiCharByCategory = _charGroupByCategory;

-export function getEmojiName(char: string): string | undefined {
+export function getEmojiName(char: string): string | null {
 	const idx = _indexByChar.get(char);
-	if (typeof idx === 'undefined') {
-		return undefined;
+	if (idx == null) {
+		return null;
 	} else {
 		return emojilist[idx].name;
 	}
--- a/packages/frontend/src/scripts/theme.ts
+++ b/packages/frontend/src/scripts/theme.ts
@ -60,7 +60,7 @@ export function applyTheme(theme: Theme, persist = true) {
 		document.documentElement.classList.remove('_themeChanging_');
 	}, 1000);

-	const colorSchema = theme.base === 'dark' ? 'dark' : 'light';
+	const colorScheme = theme.base === 'dark' ? 'dark' : 'light';

 	// Deep copy
 	const _theme = deepClone(theme);
@ -83,11 +83,11 @@ export function applyTheme(theme: Theme, persist = true) {
 		document.documentElement.style.setProperty(`--${k}`, v.toString());
 	}

-	document.documentElement.style.setProperty('color-schema', colorSchema);
+	document.documentElement.style.setProperty('color-scheme', colorScheme);

 	if (persist) {
 		miLocalStorage.setItem('theme', JSON.stringify(props));
-		miLocalStorage.setItem('colorSchema', colorSchema);
+		miLocalStorage.setItem('colorScheme', colorScheme);
 	}

 	// 色計算など再度行えるようにクライアント全体に通知
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@ -336,7 +336,11 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	enableCondensedLineForAcct: {
 		where: 'device',
-		default: true,
+		default: false,
+	},
+	additionalUnicodeEmojiIndexes: {
+		where: 'device',
+		default: {} as Record<string, Record<string, string[]>>,
 	},
 }));

--- a/packages/frontend/src/stream.ts
+++ b/packages/frontend/src/stream.ts
@ -12,5 +12,14 @@ export function useStream(): Misskey.Stream {
 		token: $i.token,
 	} : null));

+	window.setTimeout(heartbeat, 1000 * 60);
+
 	return stream;
 }
+
+function heartbeat(): void {
+	if (stream != null && document.visibilityState === 'visible') {
+		stream.heartbeat();
+	}
+	window.setTimeout(heartbeat, 1000 * 60);
+}
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@ -34,7 +34,7 @@ html {
 	tab-size: 2;

 	&, * {
-		scrollbar-color: var(--scrollbarHandle) inherit;
+		scrollbar-color: var(--scrollbarHandle) transparent;
 		scrollbar-width: thin;

 		&::-webkit-scrollbar {
--- a/packages/frontend/src/themes/_dark.json5
+++ b/packages/frontend/src/themes/_dark.json5
@ -21,6 +21,7 @@
 		fgTransparent: ':alpha<0.5<@fg',
 		fgHighlighted: ':lighten<3<@fg',
 		fgOnAccent: '#fff',
+		fgOnWhite: '#333',
 		divider: 'rgba(255, 255, 255, 0.1)',
 		indicator: '@accent',
 		panel: ':lighten<3<@bg',
--- a/packages/frontend/src/themes/_light.json5
+++ b/packages/frontend/src/themes/_light.json5
@ -21,6 +21,7 @@
 		fgTransparent: ':alpha<0.5<@fg',
 		fgHighlighted: ':darken<3<@fg',
 		fgOnAccent: '#fff',
+		fgOnWhite: '#333',
 		divider: 'rgba(0, 0, 0, 0.1)',
 		indicator: '@accent',
 		panel: ':lighten<3<@bg',
--- a/packages/frontend/src/themes/d-astro.json5
+++ b/packages/frontend/src/themes/d-astro.json5
@ -53,6 +53,7 @@
 		panelHeaderBg: ':lighten<3<@panel',
 		panelHeaderFg: '@fg',
 		htmlThemeColor: '@bg',
+		fgOnWhite: '@accent',
 		panelHighlight: ':lighten<3<@panel',
 		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
 		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
--- a/packages/frontend/src/themes/d-botanical.json5
+++ b/packages/frontend/src/themes/d-botanical.json5
@ -11,6 +11,7 @@
 		bg: 'rgb(37, 38, 36)',
 		fg: 'rgb(216, 212, 199)',
 		fgHighlighted: '#fff',
+		fgOnWhite: '@accent',
 		divider: 'rgba(255, 255, 255, 0.14)',
 		panel: 'rgb(47, 47, 44)',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
--- a/packages/frontend/src/themes/d-cherry.json5
+++ b/packages/frontend/src/themes/d-cherry.json5
@ -10,6 +10,7 @@
 		accent: 'rgb(255, 89, 117)',
 		bg: 'rgb(28, 28, 37)',
 		fg: 'rgb(236, 239, 244)',
+		fgOnWhite: '@accent',
 		panel: 'rgb(35, 35, 47)',
 		renote: '@accent',
 		link: '@accent',
--- a/packages/frontend/src/themes/d-dark.json5
+++ b/packages/frontend/src/themes/d-dark.json5
@ -11,6 +11,7 @@
 		bg: '#232323',
 		fg: 'rgb(199, 209, 216)',
 		fgHighlighted: '#fff',
+		fgOnWhite: '@accent',
 		divider: 'rgba(255, 255, 255, 0.14)',
 		panel: '#2d2d2d',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
--- a/packages/frontend/src/themes/d-future.json5
+++ b/packages/frontend/src/themes/d-future.json5
@ -12,6 +12,7 @@
 		fg: '#D5D5D6',
 		fgHighlighted: '#fff',
 		fgOnAccent: '#000',
+		fgOnWhite: '@accent',
 		divider: 'rgba(255, 255, 255, 0.1)',
 		panel: '#18181c',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
--- a/packages/frontend/src/themes/d-green-lime.json5
+++ b/packages/frontend/src/themes/d-green-lime.json5
@ -12,6 +12,7 @@
 		fg: '#dee7e4',
 		fgHighlighted: '#fff',
 		fgOnAccent: '#192320',
+		fgOnWhite: '@accent',
 		divider: '#e7fffb24',
 		panel: '#192320',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
--- a/packages/frontend/src/themes/d-green-orange.json5
+++ b/packages/frontend/src/themes/d-green-orange.json5
@ -12,6 +12,7 @@
 		fg: '#dee7e4',
 		fgHighlighted: '#fff',
 		fgOnAccent: '#192320',
+		fgOnWhite: '@accent',
 		divider: '#e7fffb24',
 		panel: '#192320',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
--- a/packages/frontend/src/themes/d-ice.json5
+++ b/packages/frontend/src/themes/d-ice.json5
@ -8,6 +8,7 @@

 	props: {
 		accent: '#47BFE8',
+		fgOnWhite: '@accent',
 		bg: '#212526',
 	},
 }
--- a/packages/frontend/src/themes/d-persimmon.json5
+++ b/packages/frontend/src/themes/d-persimmon.json5
@ -11,6 +11,7 @@
 		bg: 'rgb(31, 33, 31)',
 		fg: '#cdd8c7',
 		fgHighlighted: '#fff',
+		fgOnWhite: '@accent',
 		divider: 'rgba(255, 255, 255, 0.14)',
 		panel: 'rgb(41, 43, 41)',
 		infoFg: '@fg',
--- a/packages/frontend/src/themes/d-u0.json5
+++ b/packages/frontend/src/themes/d-u0.json5
@ -55,6 +55,7 @@
 		codeNumber: '#cfff9e',
 		codeString: '#ffb675',
 		fgOnAccent: '#fff',
+		fgOnWhite: '@accent',
 		infoWarnBg: '#42321c',
 		infoWarnFg: '#ffbd3e',
 		navHoverFg: ':lighten<17<@fg',
--- a/packages/frontend/src/themes/l-apricot.json5
+++ b/packages/frontend/src/themes/l-apricot.json5
@ -10,6 +10,7 @@
 		accent: 'rgb(234, 154, 82)',
 		bg: '#e6e5e2',
 		fg: 'rgb(149, 143, 139)',
+		fgOnWhite: '@accent',
 		panel: '#EEECE8',
 		renote: '@accent',
 		link: '@accent',
--- a/packages/frontend/src/themes/l-botanical.json5
+++ b/packages/frontend/src/themes/l-botanical.json5
@ -11,6 +11,7 @@
 		bg: 'e2deda',
 		fg: '#3d3d3d',
 		fgHighlighted: '#6bc9a0',
+		fgOnWhite: '@accent',
 		divider: '#cfcfcf',
 		panel: '@X14',
 		panelHeaderBg: '@panel',
--- a/packages/frontend/src/themes/l-cherry.json5
+++ b/packages/frontend/src/themes/l-cherry.json5
@ -10,6 +10,7 @@
 		accent: 'rgb(219, 96, 114)',
 		bg: 'rgb(254, 248, 249)',
 		fg: 'rgb(152, 13, 26)',
+		fgOnWhite: '@accent',
 		panel: 'rgb(255, 255, 255)',
 		renote: '@accent',
 		link: 'rgb(156, 187, 5)',
--- a/Show More
+++ b/Show More