Merge remote-tracking branch 'msky/develop' into enh-15290

2025-03-20 15:45:00 +09:00 · 2025-03-20 15:45:00 +09:00 · 25f719a5ec
parent 22895030d7 fd3e28812e
commit 25f719a5ec
284 changed files with 2171 additions and 2249 deletions
--- a/.github/workflows/storybook.yml
+++ b/.github/workflows/storybook.yml
@ -50,8 +50,8 @@ jobs:
    - run: pnpm i --frozen-lockfile
    - name: Check pnpm-lock.yaml
      run: git diff --exit-code pnpm-lock.yaml
-    - name: Build misskey-js
-      run: pnpm --filter misskey-js build
+    - name: Build dependent packages
+      run: pnpm -F misskey-js -F misskey-bubble-game -F misskey-reversi build
    - name: Build storybook
      run: pnpm --filter frontend build-storybook
    - name: Publish to Chromatic
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -8,6 +8,7 @@
 - Feat: 設定の管理が強化されました
  - 自動でバックアップされるように
  - 任意の設定項目をデバイス間で同期できるように
+- Feat: 画面を重ねて表示するオプションを実装(実験的)
 - Enhance: プラグインの管理が強化されました
  - インストール/アンインストール/設定の変更時にリロード不要になりました
 - Enhance: ログアウト時、ブラウザに保存されたWebクライアントのデータを全て消去するように
@ -17,6 +18,7 @@
 - Enhance: 投稿フォームの設定メニューを改良
  - 投稿フォームをリセットできるように
  - 文字数カウントを復活
+- Enhance: 2段階認証時のリカバリーコードのファイル名にサーバーURLを含めるように
 - Enhance: 投稿フォームの絵文字ピッカーに独立したウィンドウを使用できるように
  - リアクションピッカーと絵文字ピッカーで表示スタイルの設定が分離しました。絵文字ピッカーでのみウィンドウスタイルを使用可能です。
 - Fix: テーマ切り替え時に一部の色が変わらない問題を修正
@ -24,6 +26,8 @@
 ### Server
 - Fix: プロフィール追加情報で無効なURLに入力された場合に照会エラーを出るのを修正
 - Fix: ActivityPubリクエストURLチェック実装は仕様に従っていないのを修正
+- Fix: 連合無しモードでも外部から照会可能だった問題を修正
+- Fix: テスト用WebHookのペイロードの`emojis`パラメータが実際のものと異なる問題を修正

 ## 2025.3.1

--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -273,7 +273,6 @@ niraxは、Misskeyで使用しているオリジナルのフロントエンド
 	query?: Record<string, string>;
 	loginRequired?: boolean;
 	hash?: string;
-	globalCacheKey?: string;
 	children?: RouteDef[];
 }
 ```
--- a/locales/ar-SA.yml
+++ b/locales/ar-SA.yml
@ -1013,6 +1013,7 @@ flip: "اقلب"
 lastNDays: "آخر {n} أيام"
 surrender: "ألغِ"
 postForm: "أنشئ ملاحظة"
+information: "عن"
 _delivery:
  stop: "مُعلّق"
 _initialAccountSetting:
--- a/locales/bn-BD.yml
+++ b/locales/bn-BD.yml
@ -853,6 +853,7 @@ renotes: "রিনোট"
 sourceCode: "সোর্স কোড"
 flip: "উল্টান"
 postForm: "নোট লিখুন"
+information: "আপনার সম্পর্কে"
 _delivery:
  stop: "স্থগিত করা হয়েছে"
  _type:
--- a/locales/ca-ES.yml
+++ b/locales/ca-ES.yml
@ -698,6 +698,7 @@ userSaysSomethingAbout: "{name} està parlant sobre \"{word}\""
 makeActive: "Activar"
 display: "Veure"
 copy: "Copiar"
+copiedToClipboard: "Copiat al porta papers"
 metrics: "Mètriques"
 overview: "Visió General"
 logs: "Registres"
@ -1139,7 +1140,7 @@ channelArchiveConfirmDescription: "Un Canal arxivat no apareixerà a la llista d
 thisChannelArchived: "Aquest Canal ha sigut arxivat."
 displayOfNote: "Mostrar notes"
 initialAccountSetting: "Configuració del perfil"
-youFollowing: "Seguint"
+youFollowing: "Segueixes "
 preventAiLearning: "Descartar l'ús d'aprenentatge automàtic (IA Generativa)"
 preventAiLearningDescription: "Demanar els indexadors no fer servir els texts, imatges, etc. en cap conjunt de dades per alimentar l'aprenentatge automàtic (IA Predictiva/ Generativa). Això s'aconsegueix afegint la etiqueta \"noai\" com a resposta HTML al contingut corresponent. Prevenir aquest ús totalment pot ser que no sigui aconseguit, ja que molts indexadors poden obviar aquesta etiqueta."
 options: "Opcions"
@ -1332,6 +1333,8 @@ preferenceSyncConflictChoiceCancel: "Cancel·lar l'activació de la sincronitzac
 paste: "Pegar"
 emojiPalette: "Calaix d'emojis"
 postForm: "Formulari de publicació"
+textCount: "Nombre de caràcters "
+information: "Informació"
 _emojiPalette:
  palettes: "Calaixos d'emojis"
  enableSyncBetweenDevicesForPalettes: "Activa la sincronització dels calaixos d'emojis entre dispositius"
@ -1355,6 +1358,8 @@ _settings:
  appearanceBanner: "Pots configurar les preferències relacionades amb la visualització i l'aspecte del client segons el teu parer."
  soundsBanner: "Configuració dels sons que reproduirà el client."
  timelineAndNote: "Línia de temps i nota"
+  makeEveryTextElementsSelectable: "Fes que tots els elements del text siguin seleccionables"
+  makeEveryTextElementsSelectable_description: "L'activació pot reduir la usabilitat en determinades ocasions."
 _preferencesProfile:
  profileName: "Nom del perfil"
  profileNameDescription: "Estableix un nom que identifiqui aquest dispositiu."
@ -2519,6 +2524,7 @@ _notification:
    achievementEarned: "Assoliment desbloquejat"
    exportCompleted: "Exportació completada"
    login: "Iniciar sessió"
+    createToken: "Creació de tokens d'accés "
    test: "Prova la notificació"
    app: "Notificacions d'aplicacions"
  _actions:
@ -2668,10 +2674,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "Assegura't que qui distribueix aquest recurs és fiable abans d'instal·lar-ho."
  _plugin:
    title: "Vols instal·lar aquest afegit?"
-    metaTitle: "Informació de l'afegit "
  _theme:
    title: "Vols instal·lar aquest tema?"
-    metaTitle: "Informació del tema"
  _meta:
    base: "Paleta de colors base"
  _vendorInfo:
--- a/locales/cs-CZ.yml
+++ b/locales/cs-CZ.yml
@ -169,6 +169,9 @@ addAccount: "Přidat účet"
 reloadAccountsList: "Obnovit list účtů"
 loginFailed: "Přihlášení se nezdařilo."
 showOnRemote: "Více na původním profilu"
+continueOnRemote: "Pokračujte na původní profil"
+chooseServerOnMisskeyHub: "Vyberete si server z Misskey Hubu"
+inputHostName: "Zadejte doménu"
 general: "Obecně"
 wallpaper: "Obrázek na pozadí"
 setWallpaper: "Nastavení obrázku na pozadí"
@ -193,6 +196,7 @@ perHour: "za hodinu"
 perDay: "za den"
 stopActivityDelivery: "Přestat zasílat aktivitu"
 blockThisInstance: "Blokovat tuto instanci"
+silenceThisInstance: "Utišit tuto instanci"
 operations: "Operace"
 software: "Software"
 version: "Verze"
@ -1099,6 +1103,7 @@ flip: "Otočit"
 lastNDays: "Posledních {n} dnů"
 surrender: "Zrušit"
 postForm: "Formulář pro odeslání"
+information: "Informace"
 _delivery:
  stop: "Suspendováno"
  _type:
--- a/locales/de-DE.yml
+++ b/locales/de-DE.yml
@ -1309,6 +1309,7 @@ availableRoles: "Verfügbare Rollen"
 federationSpecified: "Dieser Server arbeitet mit Whitelist-Föderation. Er kann nicht mit anderen als den vom Administrator angegebenen Servern interagieren."
 federationDisabled: "Föderation ist auf diesem Server deaktiviert. Es ist nicht möglich, mit Benutzern auf anderen Servern zu interagieren."
 postForm: "Notizfenster"
+information: "Über"
 _settings:
  webhook: "Webhook"
 _accountSettings:
@ -2524,10 +2525,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "Überprüfe vor Installation die Vertrauenswürdigkeit des Vertreibers."
  _plugin:
    title: "Möchtest du dieses Plugin installieren?"
-    metaTitle: "Plugininformation"
  _theme:
    title: "Möchten du dieses Farbschema installieren?"
-    metaTitle: "Farbschemainfo"
  _meta:
    base: "Farbschemavorlage"
  _vendorInfo:
--- a/locales/el-GR.yml
+++ b/locales/el-GR.yml
@ -289,6 +289,7 @@ icon: "Εικονίδιο"
 replies: "Απάντηση"
 renotes: "Κοινοποίηση σημειώματος"
 postForm: "Φόρμα δημοσίευσης"
+information: "Πληροφορίες"
 _email:
  _follow:
    title: "Έχετε ένα νέο ακόλουθο"
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@ -698,6 +698,7 @@ userSaysSomethingAbout: "{name} said something about \"{word}\""
 makeActive: "Activate"
 display: "Display"
 copy: "Copy"
+copiedToClipboard: "Copied to clipboard"
 metrics: "Metrics"
 overview: "Overview"
 logs: "Logs"
@ -1316,14 +1317,29 @@ unmarkAsSensitiveConfirm: "Do you want to remove the sensitive designation for t
 preferences: "Preferences"
 accessibility: "Accessibility"
 preferencesProfile: "Preferences profile"
-copyPreferenceId: "Copy the proference ID"
+copyPreferenceId: "Copy the preference ID"
 resetToDefaultValue: "Revert to default"
 overrideByAccount: "Override by the account"
 untitled: "Untitled"
 noName: "No name"
 skip: "Skip"
 restore: "Restore"
+syncBetweenDevices: "Sync between devices"
+preferenceSyncConflictTitle: "The configured value exists on the server."
+preferenceSyncConflictText: "The sync enabled settings will save their values to the server. However, there are existing values on the server. Which set of values would you like to overwrite?"
+preferenceSyncConflictChoiceServer: "Configured value on server"
+preferenceSyncConflictChoiceDevice: "Configured value on device"
+preferenceSyncConflictChoiceCancel: "Cancel enabling sync"
+paste: "Paste"
+emojiPalette: "Emoji palette"
 postForm: "Posting form"
+textCount: "Character count"
+information: "About"
+_emojiPalette:
+  palettes: "Palette"
+  enableSyncBetweenDevicesForPalettes: "Enable palette sync between devices"
+  paletteForMain: "Main palette"
+  paletteForReaction: "Reaction palette"
 _settings:
  driveBanner: "You can manage and configure the drive, check usage, and configure file upload settings."
  pluginBanner: "You can extend client features with plugins. You can install plugins, configure and manage individually."
@ -1341,6 +1357,9 @@ _settings:
  preferencesBanner: "You can configure the overall behavior of the client according to your preferences."
  appearanceBanner: "You can configure the appearance and display settings for the client according to your preferences."
  soundsBanner: "You can configure the sound settings for playback in the client."
+  timelineAndNote: "Timeline and note"
+  makeEveryTextElementsSelectable: "Make all text elements selectable"
+  makeEveryTextElementsSelectable_description: "Enabling this may reduce usability in some situations."
 _preferencesProfile:
  profileName: "Profile name"
  profileNameDescription: "Set a name that identifies this device."
@ -2505,6 +2524,7 @@ _notification:
    achievementEarned: "Achievement unlocked"
    exportCompleted: "The export has been completed"
    login: "Sign In"
+    createToken: "Create access token"
    test: "Notification test"
    app: "Notifications from linked apps"
  _actions:
@ -2532,6 +2552,7 @@ _deck:
  useSimpleUiForNonRootPages: "Use simple UI for navigated pages"
  usedAsMinWidthWhenFlexible: "Minimum width will be used for this when the \"Auto-adjust width\" option is enabled"
  flexible: "Auto-adjust width"
+  enableSyncBetweenDevicesForProfiles: "Enable profile information sync between devices"
  _columns:
    main: "Main"
    widgets: "Widgets"
@ -2653,10 +2674,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "Make sure the distributor of this resource is trustworthy before installation."
  _plugin:
    title: "Do you want to install this plugin?"
-    metaTitle: "Plugin information"
  _theme:
    title: "Do you want to install this theme?"
-    metaTitle: "Theme information"
  _meta:
    base: "Base color scheme"
  _vendorInfo:
@ -2857,8 +2876,8 @@ _selfXssPrevention:
  description2: "If you do not understand exactly what you are trying to paste, %cstop working right now and close this window."
  description3: "For more information, please refer to this. {link}"
 _followRequest:
-  recieved: "Received application"
-  sent: "Sent application"
+  recieved: "Received request"
+  sent: "Sent request"
 _remoteLookupErrors:
  _federationNotAllowed:
    title: "Unable to communicate with this server"
--- a/locales/es-ES.yml
+++ b/locales/es-ES.yml
@ -1300,6 +1300,7 @@ target: "Para"
 federationSpecified: "Este servidor opera en una federación de listas blancas. No puede interactuar con otros servidores que no sean los especificados por el administrador."
 federationDisabled: "La federación está desactivada en este servidor. No puede interactuar con usuarios de otros servidores"
 postForm: "Formulario"
+information: "Información"
 _settings:
  webhook: "Webhook"
 _accountSettings:
@ -2521,10 +2522,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "Asegúrate de que el distribuidor de este recurso es de confianza antes de proceder a la instalación."
  _plugin:
    title: "¿Quieres instalar este plugin?"
-    metaTitle: "Información del plugin"
  _theme:
    title: "¿Quieres instalar este tema?"
-    metaTitle: "Información del tema"
  _meta:
    base: "Esquema de color base"
  _vendorInfo:
--- a/locales/fr-FR.yml
+++ b/locales/fr-FR.yml
@ -1278,6 +1278,7 @@ lockdown: "Verrouiller"
 pleaseSelectAccount: "Sélectionner un compte"
 availableRoles: "Rôles disponibles"
 postForm: "Formulaire de publication"
+information: "Informations"
 _abuseUserReport:
  forward: "Transférer"
  forwardDescription: "Transférer le signalement vers une instance distante en tant qu'anonyme."
@ -2295,10 +2296,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "Veuillez confirmer que le distributeur est fiable avant l'installation."
  _plugin:
    title: "Voulez-vous installer cette extension ?"
-    metaTitle: "Informations sur l'extension"
  _theme:
    title: "Voulez-vous installer ce thème ?"
-    metaTitle: "Informations sur le thème"
  _meta:
    base: "Palette de couleurs de base"
  _vendorInfo:
--- a/locales/id-ID.yml
+++ b/locales/id-ID.yml
@ -1262,6 +1262,7 @@ modified: "Diubah"
 thereAreNChanges: "Ada {n} perubahan"
 prohibitedWordsForNameOfUser: "Kata yang dilarang untuk nama pengguna"
 postForm: "Buat catatan"
+information: "Informasi"
 _settings:
  webhook: "Webhook"
 _abuseUserReport:
@ -2492,10 +2493,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "Pastikan sumber dari sumber daya ini terpercaya sebelum melakukan pemasangan."
  _plugin:
    title: "Apakah kamu ingin memasang plugin ini?"
-    metaTitle: "Informasi plugin"
  _theme:
    title: "Apakah kamu ingin memasang tema ini?"
-    metaTitle: "Informasi tema"
  _meta:
    base: "Skema warna dasar"
  _vendorInfo:
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -2818,6 +2818,10 @@ export interface Locale extends ILocale {
     * コピー
     */
    "copy": string;
+    /**
+     * クリップボードにコピーされました
+     */
+    "copiedToClipboard": string;
    /**
     * メトリクス
     */
@ -5354,6 +5358,10 @@ export interface Locale extends ILocale {
     * 文字数
     */
    "textCount": string;
+    /**
+     * 情報
+     */
+    "information": string;
    "_emojiPalette": {
        /**
         * パレット
@ -10359,20 +10367,12 @@ export interface Locale extends ILocale {
             * このプラグインをインストールしますか？
             */
            "title": string;
-            /**
-             * プラグイン情報
-             */
-            "metaTitle": string;
        };
        "_theme": {
            /**
             * このテーマをインストールしますか？
             */
            "title": string;
-            /**
-             * テーマ情報
-             */
-            "metaTitle": string;
        };
        "_meta": {
            /**
--- a/locales/it-IT.yml
+++ b/locales/it-IT.yml
@ -698,6 +698,7 @@ userSaysSomethingAbout: "{name} ha Notato a riguardo di \"{word}\""
 makeActive: "Attiva"
 display: "Visualizza"
 copy: "Copia"
+copiedToClipboard: "Copiato negli appunti"
 metrics: "Statistiche"
 overview: "Anteprima"
 logs: "Log"
@ -973,7 +974,7 @@ check: "Verifica"
 driveCapOverrideLabel: "Modificare la capienza del Drive per questo profilo"
 driveCapOverrideCaption: "Se viene specificato meno di 0, viene annullato."
 requireAdminForView: "Per visualizzarli, è necessario aver effettuato l'accesso con un profilo amministratore."
-isSystemAccount: "Questi profili vengono creati e gestiti automaticamente dal sistema"
+isSystemAccount: "Si tratta di un profilo creato e gestito automaticamente dal sistema."
 typeToConfirm: "Digita {x} per continuare"
 deleteAccount: "Eliminazione profilo"
 document: "Documentazione"
@ -1323,7 +1324,22 @@ untitled: "Senza titolo"
 noName: "Senza nome"
 skip: "Salta"
 restore: "Ripristina"
+syncBetweenDevices: "Sincronizzazione tra i dispositivi"
+preferenceSyncConflictTitle: "Sul server esiste già il valore impostato"
+preferenceSyncConflictText: "Le impostazione sincronizzata salverà il valore sul server. Però, bada che esiste già un valore sul server. Quale vorresti sovrascrivere?"
+preferenceSyncConflictChoiceServer: "Valore del server"
+preferenceSyncConflictChoiceDevice: "Valore del dispositivo"
+preferenceSyncConflictChoiceCancel: "Annulla la sincronizzazione"
+paste: "Incolla"
+emojiPalette: "Tavolozza emoji"
 postForm: "Finestra di pubblicazione"
+textCount: "Il numero di caratteri"
+information: "Informazioni"
+_emojiPalette:
+  palettes: "Tavolozza"
+  enableSyncBetweenDevicesForPalettes: "Attiva la sincronizzazione tra dispositivi"
+  paletteForMain: "Tavolozza principale"
+  paletteForReaction: "Tavolozza per reazioni"
 _settings:
  driveBanner: "Permette di gestire e configurare il Drive, controllare il consumo di spazio e configurare il caricamento dei file."
  pluginBanner: "Consentono di migliorare le funzionalità. Le estensioni si possono configurare e gestire singolarmente."
@ -1341,6 +1357,9 @@ _settings:
  preferencesBanner: "Puoi personalizzare il comportamento del tuo dispositivo."
  appearanceBanner: "Puoi personalizzare l'aspetto nel dispositivo, in base alle tue preferenze."
  soundsBanner: "Puoi personalizzare i suoni emessi dagli eventi sul tuo dispositivo."
+  timelineAndNote: "Note e Timeline"
+  makeEveryTextElementsSelectable: "Imposta ogni elemento come selezionabile"
+  makeEveryTextElementsSelectable_description: "Potrebbe ridurre l'usabilità in alcune situazioni."
 _preferencesProfile:
  profileName: "Nome del profilo"
  profileNameDescription: "Impostare il nome che indentifica questo dispositivo."
@ -2505,6 +2524,7 @@ _notification:
    achievementEarned: "Risultato raggiunto"
    exportCompleted: "Esportazione completata"
    login: "Accessi"
+    createToken: "Creare un token di accesso"
    test: "Notifiche di test"
    app: "Notifiche da applicazioni"
  _actions:
@ -2532,6 +2552,7 @@ _deck:
  useSimpleUiForNonRootPages: "Visualizza sotto pagine con interfaccia web semplice"
  usedAsMinWidthWhenFlexible: "Se \"larghezza flessibile\" è abilitato, questa diventa la larghezza minima"
  flexible: "Larghezza flessibile"
+  enableSyncBetweenDevicesForProfiles: "Abilita la sincronizzazione delle informazioni profilo tra dispositivi"
  _columns:
    main: "Principale"
    widgets: "Riquadri"
@ -2653,10 +2674,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "Prima di installare, assicurati che la fonte sia affidabile."
  _plugin:
    title: "Vuoi davvero installare questo componente aggiuntivo?"
-    metaTitle: "Informazioni sul componente aggiuntivo"
  _theme:
    title: "Vuoi davvero installare questa variazione grafica?"
-    metaTitle: "Informazioni sulla variazione grafica"
  _meta:
    base: "Combinazione base di colori"
  _vendorInfo:
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -700,6 +700,7 @@ userSaysSomethingAbout: "{name}が「{word}」について何かを言いまし
 makeActive: "アクティブにする"
 display: "表示"
 copy: "コピー"
+copiedToClipboard: "クリップボードにコピーされました"
 metrics: "メトリクス"
 overview: "概要"
 logs: "ログ"
@ -1334,6 +1335,7 @@ paste: "ペースト"
 emojiPalette: "絵文字パレット"
 postForm: "投稿フォーム"
 textCount: "文字数"
+information: "情報"

 _emojiPalette:
  palettes: "パレット"
@ -2749,10 +2751,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "配布元が信頼できるかを確認した上でインストールしてください。"
  _plugin:
    title: "このプラグインをインストールしますか？"
-    metaTitle: "プラグイン情報"
  _theme:
    title: "このテーマをインストールしますか？"
-    metaTitle: "テーマ情報"
  _meta:
    base: "基本のカラースキーム"
  _vendorInfo:
--- a/locales/ja-KS.yml
+++ b/locales/ja-KS.yml
@ -1312,6 +1312,7 @@ federationDisabled: "このサーバーは連合が無効化されてるで。
 confirmOnReact: "ツッコむときに確認とる"
 reactAreYouSure: "\" {emoji} \" でツッコむ？"
 postForm: "投稿フォーム"
+information: "情報"
 _settings:
  webhook: "Webhook"
 _accountSettings:
@ -2610,10 +2611,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "配ってるとこが信頼できるか確認した上でインストールしてな。"
  _plugin:
    title: "このプラグイン、インストールする？"
-    metaTitle: "プラグイン情報"
  _theme:
    title: "このテーマインストールする？"
-    metaTitle: "テーマ情報"
  _meta:
    base: ""
  _vendorInfo:
--- a/locales/ko-GS.yml
+++ b/locales/ko-GS.yml
@ -655,6 +655,7 @@ replies: "답하기"
 renotes: "리노트"
 attach: "옇기"
 surrender: "아이예"
+information: "정보"
 _delivery:
  stop: "고만 보내예"
  _type:
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@ -1330,6 +1330,7 @@ preferenceSyncConflictChoiceDevice: "장치 설정값"
 paste: "붙여넣기"
 emojiPalette: "이모지 팔레트"
 postForm: "글 입력란"
+information: "정보"
 _emojiPalette:
  palettes: "팔레트"
  paletteForMain: "메인으로 사용할 팔레트"
@ -2650,10 +2651,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "제공자를 신뢰할 수 있는 경우에만 설치하십시오."
  _plugin:
    title: "이 플러그인을 설치하시겠습니까?"
-    metaTitle: "플러그인 정보"
  _theme:
    title: "이 테마를 설치하시겠습니까?"
-    metaTitle: "테마 정보"
  _meta:
    base: "기본 컬러 스키마"
  _vendorInfo:
--- a/locales/lo-LA.yml
+++ b/locales/lo-LA.yml
@ -394,6 +394,7 @@ searchByGoogle: "ຄົ້ນຫາ"
 file: "ໄຟລ໌"
 replies: "ຕອບກັບ"
 renotes: "Renote"
+information: "ກ່ຽວກັບ"
 _delivery:
  stop: "ໂຈະ"
  _type:
--- a/locales/nl-NL.yml
+++ b/locales/nl-NL.yml
@ -462,6 +462,7 @@ loggedInAsBot: "Momenteel als bot ingelogd"
 icon: "Avatar"
 replies: "Antwoord"
 renotes: "Herdelen"
+information: "Over"
 _delivery:
  stop: "Opgeschort"
  _type:
--- a/locales/no-NO.yml
+++ b/locales/no-NO.yml
@ -463,6 +463,7 @@ icon: "Avatar"
 replies: "Svar"
 renotes: "Renote"
 surrender: "Avbryt"
+information: "Informasjon"
 _delivery:
  stop: "Suspendert"
 _initialAccountSetting:
--- a/locales/pl-PL.yml
+++ b/locales/pl-PL.yml
@ -1045,6 +1045,7 @@ lastNDays: "W ciągu ostatnich {n} dni"
 surrender: "Odrzuć"
 gameRetry: "Spróbuj ponownie"
 postForm: "Formularz tworzenia wpisu"
+information: "Informacje"
 _delivery:
  stop: "Zawieszono"
  _type:
--- a/locales/pt-PT.yml
+++ b/locales/pt-PT.yml
@ -1302,6 +1302,7 @@ pleaseSelectAccount: "Selecione uma conta"
 availableRoles: "Cargos disponíveis"
 acknowledgeNotesAndEnable: "Ative após compreender as precauções."
 postForm: "Campo de postagem"
+information: "Informações"
 _settings:
  webhook: "Webhook"
 _accountSettings:
@ -2598,10 +2599,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "Tenha certeza de que o distribuidor desse recurso é confiável antes da instalação."
  _plugin:
    title: "Deseja instalar esse plugin?"
-    metaTitle: "Informações do plugin"
  _theme:
    title: "Deseja instalar esse tema?"
-    metaTitle: "Informações do tema"
  _meta:
    base: "Paleta de cores base"
  _vendorInfo:
--- a/locales/ro-RO.yml
+++ b/locales/ro-RO.yml
@ -646,6 +646,7 @@ show: "Arată"
 icon: "Avatar"
 replies: "Răspunde"
 renotes: "Re-notează"
+information: "Despre"
 _delivery:
  stop: "Suspendat"
  _type:
--- a/locales/ru-RU.yml
+++ b/locales/ru-RU.yml
@ -1182,6 +1182,7 @@ alwaysConfirmFollow: "Всегда подтверждать подписку"
 inquiry: "Связаться"
 messageToFollower: "Сообщение подписчикам"
 postForm: "Форма отправки"
+information: "Описание"
 _settings:
  webhook: "Вебхук"
 _delivery:
--- a/locales/sk-SK.yml
+++ b/locales/sk-SK.yml
@ -918,6 +918,7 @@ sourceCode: "Zdrojový kód"
 flip: "Preklopiť"
 lastNDays: "Posledných {n} dní"
 postForm: "Napísať poznámku"
+information: "Informácie"
 _delivery:
  stop: "Zmrazené"
  _type:
--- a/locales/sv-SE.yml
+++ b/locales/sv-SE.yml
@ -562,6 +562,7 @@ inquiry: "Kontakt"
 tryAgain: "Försök igen senare"
 signinWithPasskey: "Logga in med nyckel"
 unknownWebAuthnKey: "Okänd nyckel"
+information: "Om"
 _delivery:
  stop: "Suspenderad"
  _type:
--- a/locales/th-TH.yml
+++ b/locales/th-TH.yml
@ -1293,6 +1293,7 @@ prohibitedWordsForNameOfUserDescription: "หากมีสตริงใด
 yourNameContainsProhibitedWords: "ชื่อของคุณนั้นมีคำที่ต้องห้าม"
 yourNameContainsProhibitedWordsDescription: "ถ้าหากคุณต้องการใช้ชื่อนี้ กรุณาติดต่อผู้ดูแลระบบของเซิร์ฟเวอร์นะค่ะ"
 postForm: "แบบฟอร์มการโพสต์"
+information: "เกี่ยวกับ"
 _settings:
  webhook: "Webhook"
 _abuseUserReport:
@ -2572,10 +2573,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "โปรดตรวจสอบให้แน่ใจว่าแหล่งแจกหน่ายมีความน่าเชื่อถือก่อนทำการติดตั้ง"
  _plugin:
    title: "ต้องการติดตั้งปลั๊กอินนี้ใช่ไหม?"
-    metaTitle: "ข้อมูลส่วนเสริม"
  _theme:
    title: "ต้องการติดตั้งธีมนี้ใช่ไหม?"
-    metaTitle: "ข้อมูลธีม"
  _meta:
    base: "โทนสีพื้นฐาน"
  _vendorInfo:
--- a/locales/uk-UA.yml
+++ b/locales/uk-UA.yml
@ -910,6 +910,7 @@ sourceCode: "Вихідний код"
 flip: "Перевернути"
 lastNDays: "Останні {n} днів"
 postForm: "Створення нотатки"
+information: "Інформація"
 _delivery:
  stop: "Призупинено"
  _type:
--- a/locales/uz-UZ.yml
+++ b/locales/uz-UZ.yml
@ -841,6 +841,7 @@ icon: "Avatar"
 replies: "Javob berish"
 renotes: "Qayta qayd etish"
 flip: "Teskari"
+information: "Haqida"
 _delivery:
  stop: "To'xtatilgan"
  _type:
--- a/locales/vi-VN.yml
+++ b/locales/vi-VN.yml
@ -1120,6 +1120,7 @@ cwNotationRequired: "Nếu \"Ẩn nội dung\" được bật thì cần phải
 lastNDays: "{n} ngày trước"
 surrender: "Từ chối"
 postForm: "Mẫu đăng"
+information: "Giới thiệu"
 _delivery:
  stop: "Đã vô hiệu hóa"
  _type:
--- a/locales/zh-CN.yml
+++ b/locales/zh-CN.yml
@ -698,6 +698,7 @@ userSaysSomethingAbout: "{name} 说了关于「{word}」的什么"
 makeActive: "启用"
 display: "显示"
 copy: "复制"
+copiedToClipboard: "已复制到剪贴板"
 metrics: "指标"
 overview: "概览"
 logs: "日志"
@ -1332,6 +1333,8 @@ preferenceSyncConflictChoiceCancel: "取消同步"
 paste: "粘贴"
 emojiPalette: "表情符号调色板"
 postForm: "投稿窗口"
+textCount: "字数"
+information: "关于"
 _emojiPalette:
  palettes: "调色板"
  enableSyncBetweenDevicesForPalettes: "启用调色板的设备间同步"
@ -2671,10 +2674,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "请在安装前确保来源可靠"
  _plugin:
    title: "要安装此插件吗？"
-    metaTitle: "插件信息"
  _theme:
    title: "要安装此主题吗？"
-    metaTitle: "主题信息"
  _meta:
    base: "基本配色方案"
  _vendorInfo:
--- a/locales/zh-TW.yml
+++ b/locales/zh-TW.yml
@ -698,6 +698,7 @@ userSaysSomethingAbout: "{name} 說了一些關於「{word}」的話"
 makeActive: "啟用"
 display: "檢視"
 copy: "複製"
+copiedToClipboard: "已複製到剪貼簿"
 metrics: "指標"
 overview: "概覽"
 logs: "日誌"
@ -1332,6 +1333,8 @@ preferenceSyncConflictChoiceCancel: "取消啟用同步"
 paste: "貼上"
 emojiPalette: "表情符號調色盤"
 postForm: "發文視窗"
+textCount: "字數"
+information: "關於"
 _emojiPalette:
  palettes: "調色盤"
  enableSyncBetweenDevicesForPalettes: "啟用裝置與裝置之間的調色盤同步化"
@ -1355,6 +1358,8 @@ _settings:
  appearanceBanner: "您可以根據喜好設定與用戶端外觀和顯示方式相關的設定。"
  soundsBanner: "您可以調整用戶端播放的聲音設定。"
  timelineAndNote: "時間軸及貼文"
+  makeEveryTextElementsSelectable: "允許選取所有文字"
+  makeEveryTextElementsSelectable_description: "啟用此功能後，可能會在某些情境下降低可用性。"
 _preferencesProfile:
  profileName: "設定檔案名稱"
  profileNameDescription: "設定一個名稱來識別此裝置。"
@ -2519,6 +2524,7 @@ _notification:
    achievementEarned: "獲得成就"
    exportCompleted: "已完成匯出。"
    login: "登入"
+    createToken: "建立存取權杖"
    test: "通知測試"
    app: "應用程式通知"
  _actions:
@ -2668,10 +2674,8 @@ _externalResourceInstaller:
  checkVendorBeforeInstall: "安裝前請確認提供者是可信賴的。"
  _plugin:
    title: "要安裝此外掛嘛？"
-    metaTitle: "外掛資訊"
  _theme:
    title: "要安裝此佈景主題嗎？"
-    metaTitle: "佈景主題資訊"
  _meta:
    base: "基本配色方案"
  _vendorInfo:
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2025.3.2-beta.1",
+	"version": "2025.3.2-beta.6",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",
--- a/packages/backend/src/core/WebhookTestService.ts
+++ b/packages/backend/src/core/WebhookTestService.ts
@ -7,42 +7,16 @@ import { Injectable } from '@nestjs/common';
 import { MiAbuseUserReport, MiNote, MiUser, MiWebhook } from '@/models/_.js';
 import { bindThis } from '@/decorators.js';
 import { MiSystemWebhook, type SystemWebhookEventType } from '@/models/SystemWebhook.js';
-import { AbuseReportPayload, SystemWebhookPayload, SystemWebhookService } from '@/core/SystemWebhookService.js';
-import { Packed } from '@/misc/json-schema.js';
+import { type AbuseReportPayload, SystemWebhookPayload, SystemWebhookService } from '@/core/SystemWebhookService.js';
+import { type Packed } from '@/misc/json-schema.js';
 import { type WebhookEventTypes } from '@/models/Webhook.js';
+import { CustomEmojiService } from '@/core/CustomEmojiService.js';
 import { type UserWebhookPayload, UserWebhookService } from '@/core/UserWebhookService.js';
 import { QueueService } from '@/core/QueueService.js';
 import { ModeratorInactivityRemainingTime } from '@/queue/processors/CheckModeratorsActivityProcessorService.js';

 const oneDayMillis = 24 * 60 * 60 * 1000;

-function generateAbuseReport(override?: Partial<MiAbuseUserReport>): AbuseReportPayload {
-	const result: MiAbuseUserReport = {
-		id: 'dummy-abuse-report1',
-		targetUserId: 'dummy-target-user',
-		targetUser: null,
-		reporterId: 'dummy-reporter-user',
-		reporter: null,
-		assigneeId: null,
-		assignee: null,
-		resolved: false,
-		forwarded: false,
-		comment: 'This is a dummy report for testing purposes.',
-		targetUserHost: null,
-		reporterHost: null,
-		resolvedAs: null,
-		moderationNote: 'foo',
-		...override,
-	};
-
-	return {
-		...result,
-		targetUser: result.targetUser ? toPackedUserLite(result.targetUser) : null,
-		reporter: result.reporter ? toPackedUserLite(result.reporter) : null,
-		assignee: result.assignee ? toPackedUserLite(result.assignee) : null,
-	};
-}
-
 function generateDummyUser(override?: Partial<MiUser>): MiUser {
 	return {
 		id: 'dummy-user-1',
@ -134,124 +108,6 @@ function generateDummyNote(override?: Partial<MiNote>): MiNote {
 	};
 }

-function toPackedNote(note: MiNote, detail = true, override?: Packed<'Note'>): Packed<'Note'> {
-	return {
-		id: note.id,
-		createdAt: new Date().toISOString(),
-		deletedAt: null,
-		text: note.text,
-		cw: note.cw,
-		userId: note.userId,
-		user: toPackedUserLite(note.user ?? generateDummyUser()),
-		replyId: note.replyId,
-		renoteId: note.renoteId,
-		isHidden: false,
-		visibility: note.visibility,
-		mentions: note.mentions,
-		visibleUserIds: note.visibleUserIds,
-		fileIds: note.fileIds,
-		files: [],
-		tags: note.tags,
-		poll: null,
-		emojis: note.emojis,
-		channelId: note.channelId,
-		channel: note.channel,
-		localOnly: note.localOnly,
-		reactionAcceptance: note.reactionAcceptance,
-		reactionEmojis: {},
-		reactions: {},
-		reactionCount: 0,
-		renoteCount: note.renoteCount,
-		repliesCount: note.repliesCount,
-		uri: note.uri ?? undefined,
-		url: note.url ?? undefined,
-		reactionAndUserPairCache: note.reactionAndUserPairCache,
-		...(detail ? {
-			clippedCount: note.clippedCount,
-			reply: note.reply ? toPackedNote(note.reply, false) : null,
-			renote: note.renote ? toPackedNote(note.renote, true) : null,
-			myReaction: null,
-		} : {}),
-		...override,
-	};
-}
-
-function toPackedUserLite(user: MiUser, override?: Packed<'UserLite'>): Packed<'UserLite'> {
-	return {
-		id: user.id,
-		name: user.name,
-		username: user.username,
-		host: user.host,
-		avatarUrl: user.avatarUrl,
-		avatarBlurhash: user.avatarBlurhash,
-		avatarDecorations: user.avatarDecorations.map(it => ({
-			id: it.id,
-			angle: it.angle,
-			flipH: it.flipH,
-			url: 'https://example.com/dummy-image001.png',
-			offsetX: it.offsetX,
-			offsetY: it.offsetY,
-		})),
-		isBot: user.isBot,
-		isCat: user.isCat,
-		emojis: user.emojis,
-		onlineStatus: 'active',
-		badgeRoles: [],
-		...override,
-	};
-}
-
-function toPackedUserDetailedNotMe(user: MiUser, override?: Packed<'UserDetailedNotMe'>): Packed<'UserDetailedNotMe'> {
-	return {
-		...toPackedUserLite(user),
-		url: null,
-		uri: null,
-		movedTo: null,
-		alsoKnownAs: [],
-		createdAt: new Date().toISOString(),
-		updatedAt: user.updatedAt?.toISOString() ?? null,
-		lastFetchedAt: user.lastFetchedAt?.toISOString() ?? null,
-		bannerUrl: user.bannerUrl,
-		bannerBlurhash: user.bannerBlurhash,
-		isLocked: user.isLocked,
-		isSilenced: false,
-		isSuspended: user.isSuspended,
-		description: null,
-		location: null,
-		birthday: null,
-		lang: null,
-		fields: [],
-		verifiedLinks: [],
-		followersCount: user.followersCount,
-		followingCount: user.followingCount,
-		notesCount: user.notesCount,
-		pinnedNoteIds: [],
-		pinnedNotes: [],
-		pinnedPageId: null,
-		pinnedPage: null,
-		publicReactions: true,
-		followersVisibility: 'public',
-		followingVisibility: 'public',
-		twoFactorEnabled: false,
-		usePasswordLessLogin: false,
-		securityKeys: false,
-		roles: [],
-		memo: null,
-		moderationNote: undefined,
-		isFollowing: false,
-		isFollowed: false,
-		hasPendingFollowRequestFromYou: false,
-		hasPendingFollowRequestToYou: false,
-		isBlocking: false,
-		isBlocked: false,
-		isMuted: false,
-		isRenoteMuted: false,
-		notify: 'none',
-		withReplies: true,
-		...override,
-	};
-}
-
 const dummyUser1 = generateDummyUser();
 const dummyUser2 = generateDummyUser({
 	id: 'dummy-user-2',
@ -284,6 +140,7 @@ export class WebhookTestService {
 	};

 	constructor(
+		private customEmojiService: CustomEmojiService,
 		private userWebhookService: UserWebhookService,
 		private systemWebhookService: SystemWebhookService,
 		private queueService: QueueService,
@ -354,31 +211,31 @@ export class WebhookTestService {

 		switch (params.type) {
 			case 'note': {
-				send('note', { note: toPackedNote(dummyNote1) });
+				send('note', { note: await this.toPackedNote(dummyNote1) });
 				break;
 			}
 			case 'reply': {
-				send('reply', { note: toPackedNote(dummyReply1) });
+				send('reply', { note: await this.toPackedNote(dummyReply1) });
 				break;
 			}
 			case 'renote': {
-				send('renote', { note: toPackedNote(dummyRenote1) });
+				send('renote', { note: await this.toPackedNote(dummyRenote1) });
 				break;
 			}
 			case 'mention': {
-				send('mention', { note: toPackedNote(dummyMention1) });
+				send('mention', { note: await this.toPackedNote(dummyMention1) });
 				break;
 			}
 			case 'follow': {
-				send('follow', { user: toPackedUserDetailedNotMe(dummyUser1) });
+				send('follow', { user: await this.toPackedUserDetailedNotMe(dummyUser1) });
 				break;
 			}
 			case 'followed': {
-				send('followed', { user: toPackedUserLite(dummyUser2) });
+				send('followed', { user: await this.toPackedUserLite(dummyUser2) });
 				break;
 			}
 			case 'unfollow': {
-				send('unfollow', { user: toPackedUserDetailedNotMe(dummyUser3) });
+				send('unfollow', { user: await this.toPackedUserDetailedNotMe(dummyUser3) });
 				break;
 			}
 			// まだ実装されていない (#9485)
@ -427,7 +284,7 @@ export class WebhookTestService {

 		switch (params.type) {
 			case 'abuseReport': {
-				send('abuseReport', generateAbuseReport({
+				send('abuseReport', await this.generateAbuseReport({
 					targetUserId: dummyUser1.id,
 					targetUser: dummyUser1,
 					reporterId: dummyUser2.id,
@ -436,7 +293,7 @@ export class WebhookTestService {
 				break;
 			}
 			case 'abuseReportResolved': {
-				send('abuseReportResolved', generateAbuseReport({
+				send('abuseReportResolved', await this.generateAbuseReport({
 					targetUserId: dummyUser1.id,
 					targetUser: dummyUser1,
 					reporterId: dummyUser2.id,
@ -448,7 +305,7 @@ export class WebhookTestService {
 				break;
 			}
 			case 'userCreated': {
-				send('userCreated', toPackedUserLite(dummyUser1));
+				send('userCreated', await this.toPackedUserLite(dummyUser1));
 				break;
 			}
 			case 'inactiveModeratorsWarning': {
@ -474,4 +331,153 @@ export class WebhookTestService {
 			}
 		}
 	}
+
+	@bindThis
+	private async generateAbuseReport(override?: Partial<MiAbuseUserReport>): Promise<AbuseReportPayload> {
+		const result: MiAbuseUserReport = {
+			id: 'dummy-abuse-report1',
+			targetUserId: 'dummy-target-user',
+			targetUser: null,
+			reporterId: 'dummy-reporter-user',
+			reporter: null,
+			assigneeId: null,
+			assignee: null,
+			resolved: false,
+			forwarded: false,
+			comment: 'This is a dummy report for testing purposes.',
+			targetUserHost: null,
+			reporterHost: null,
+			resolvedAs: null,
+			moderationNote: 'foo',
+			...override,
+		};
+
+		return {
+			...result,
+			targetUser: result.targetUser ? await this.toPackedUserLite(result.targetUser) : null,
+			reporter: result.reporter ? await this.toPackedUserLite(result.reporter) : null,
+			assignee: result.assignee ? await this.toPackedUserLite(result.assignee) : null,
+		};
+	}
+
+	@bindThis
+	private async toPackedNote(note: MiNote, detail = true, override?: Packed<'Note'>): Promise<Packed<'Note'>> {
+		return {
+			id: note.id,
+			createdAt: new Date().toISOString(),
+			deletedAt: null,
+			text: note.text,
+			cw: note.cw,
+			userId: note.userId,
+			user: await this.toPackedUserLite(note.user ?? generateDummyUser()),
+			replyId: note.replyId,
+			renoteId: note.renoteId,
+			isHidden: false,
+			visibility: note.visibility,
+			mentions: note.mentions,
+			visibleUserIds: note.visibleUserIds,
+			fileIds: note.fileIds,
+			files: [],
+			tags: note.tags,
+			poll: null,
+			emojis: await this.customEmojiService.populateEmojis(note.emojis, note.userHost),
+			channelId: note.channelId,
+			channel: note.channel,
+			localOnly: note.localOnly,
+			reactionAcceptance: note.reactionAcceptance,
+			reactionEmojis: {},
+			reactions: {},
+			reactionCount: 0,
+			renoteCount: note.renoteCount,
+			repliesCount: note.repliesCount,
+			uri: note.uri ?? undefined,
+			url: note.url ?? undefined,
+			reactionAndUserPairCache: note.reactionAndUserPairCache,
+			...(detail ? {
+				clippedCount: note.clippedCount,
+				reply: note.reply ? await this.toPackedNote(note.reply, false) : null,
+				renote: note.renote ? await this.toPackedNote(note.renote, true) : null,
+				myReaction: null,
+			} : {}),
+			...override,
+		};
+	}
+
+	@bindThis
+	private async toPackedUserLite(user: MiUser, override?: Packed<'UserLite'>): Promise<Packed<'UserLite'>> {
+		return {
+			id: user.id,
+			name: user.name,
+			username: user.username,
+			host: user.host,
+			avatarUrl: user.avatarUrl,
+			avatarBlurhash: user.avatarBlurhash,
+			avatarDecorations: user.avatarDecorations.map(it => ({
+				id: it.id,
+				angle: it.angle,
+				flipH: it.flipH,
+				url: 'https://example.com/dummy-image001.png',
+				offsetX: it.offsetX,
+				offsetY: it.offsetY,
+			})),
+			isBot: user.isBot,
+			isCat: user.isCat,
+			emojis: await this.customEmojiService.populateEmojis(user.emojis, user.host),
+			onlineStatus: 'active',
+			badgeRoles: [],
+			...override,
+		};
+	}
+
+	@bindThis
+	private async toPackedUserDetailedNotMe(user: MiUser, override?: Packed<'UserDetailedNotMe'>): Promise<Packed<'UserDetailedNotMe'>> {
+		return {
+			...await this.toPackedUserLite(user),
+			url: null,
+			uri: null,
+			movedTo: null,
+			alsoKnownAs: [],
+			createdAt: new Date().toISOString(),
+			updatedAt: user.updatedAt?.toISOString() ?? null,
+			lastFetchedAt: user.lastFetchedAt?.toISOString() ?? null,
+			bannerUrl: user.bannerUrl,
+			bannerBlurhash: user.bannerBlurhash,
+			isLocked: user.isLocked,
+			isSilenced: false,
+			isSuspended: user.isSuspended,
+			description: null,
+			location: null,
+			birthday: null,
+			lang: null,
+			fields: [],
+			verifiedLinks: [],
+			followersCount: user.followersCount,
+			followingCount: user.followingCount,
+			notesCount: user.notesCount,
+			pinnedNoteIds: [],
+			pinnedNotes: [],
+			pinnedPageId: null,
+			pinnedPage: null,
+			publicReactions: true,
+			followersVisibility: 'public',
+			followingVisibility: 'public',
+			twoFactorEnabled: false,
+			usePasswordLessLogin: false,
+			securityKeys: false,
+			roles: [],
+			memo: null,
+			moderationNote: undefined,
+			isFollowing: false,
+			isFollowed: false,
+			hasPendingFollowRequestFromYou: false,
+			hasPendingFollowRequestToYou: false,
+			isBlocking: false,
+			isBlocked: false,
+			isMuted: false,
+			isRenoteMuted: false,
+			notify: 'none',
+			withReplies: true,
+			...override,
+		};
+	}
 }
--- a/packages/backend/src/misc/json-schema.ts
+++ b/packages/backend/src/misc/json-schema.ts
@ -166,6 +166,7 @@ export interface Schema extends OfSchema {
 	readonly maximum?: number;
 	readonly minimum?: number;
 	readonly pattern?: string;
+	readonly additionalProperties?: Schema | boolean;
 }

 type RequiredPropertyNames<s extends Obj> = {
@ -217,6 +218,13 @@ type ObjectSchemaTypeDef<p extends Schema> =
 	:
 	p['anyOf'] extends ReadonlyArray<Schema> ? never : // see CONTRIBUTING.md
 	p['allOf'] extends ReadonlyArray<Schema> ? UnionToIntersection<UnionSchemaType<p['allOf']>> :
+	p['additionalProperties'] extends true ? Record<string, any> :
+	p['additionalProperties'] extends Schema ?
+		p['additionalProperties'] extends infer AdditionalProperties ?
+			AdditionalProperties extends Schema ?
+				Record<string, SchemaType<AdditionalProperties>> :
+				never :
+			never :
 	any;

 type ObjectSchemaType<p extends Schema> = NullOrUndefined<p, ObjectSchemaTypeDef<p>>;
--- a/packages/backend/src/queue/processors/ImportCustomEmojisProcessorService.ts
+++ b/packages/backend/src/queue/processors/ImportCustomEmojisProcessorService.ts
@ -6,6 +6,7 @@
 import * as fs from 'node:fs';
 import { Inject, Injectable } from '@nestjs/common';
 import { ZipReader } from 'slacc';
+import { IsNull } from 'typeorm';
 import { DI } from '@/di-symbols.js';
 import type { EmojisRepository, DriveFilesRepository } from '@/models/_.js';
 import type Logger from '@/logger.js';
@ -86,6 +87,7 @@ export class ImportCustomEmojisProcessorService {
 				const emojiPath = outputPath + '/' + record.fileName;
 				await this.emojisRepository.delete({
 					name: emojiInfo.name,
+					host: IsNull(),
 				});

 				try {
--- a/packages/backend/src/server/ActivityPubServerService.ts
+++ b/packages/backend/src/server/ActivityPubServerService.ts
@ -13,7 +13,7 @@ import accepts from 'accepts';
 import vary from 'vary';
 import secureJson from 'secure-json-parse';
 import { DI } from '@/di-symbols.js';
-import type { FollowingsRepository, NotesRepository, EmojisRepository, NoteReactionsRepository, UserProfilesRepository, UserNotePiningsRepository, UsersRepository, FollowRequestsRepository } from '@/models/_.js';
+import type { FollowingsRepository, NotesRepository, EmojisRepository, NoteReactionsRepository, UserProfilesRepository, UserNotePiningsRepository, UsersRepository, FollowRequestsRepository, MiMeta } from '@/models/_.js';
 import * as url from '@/misc/prelude/url.js';
 import type { Config } from '@/config.js';
 import { ApRendererService } from '@/core/activitypub/ApRendererService.js';
@ -42,6 +42,9 @@ export class ActivityPubServerService {
 		@Inject(DI.config)
 		private config: Config,

+		@Inject(DI.meta)
+		private meta: MiMeta,
+
 		@Inject(DI.usersRepository)
 		private usersRepository: UsersRepository,

@ -102,6 +105,11 @@ export class ActivityPubServerService {

 	@bindThis
 	private inbox(request: FastifyRequest, reply: FastifyReply) {
+		if (this.meta.federation === 'none') {
+			reply.code(403);
+			return;
+		}
+
 		let signature;

 		try {
@ -173,6 +181,11 @@ export class ActivityPubServerService {
 		request: FastifyRequest<{ Params: { user: string; }; Querystring: { cursor?: string; page?: string; }; }>,
 		reply: FastifyReply,
 	) {
+		if (this.meta.federation === 'none') {
+			reply.code(403);
+			return;
+		}
+
 		const userId = request.params.user;

 		const cursor = request.query.cursor;
@ -265,6 +278,11 @@ export class ActivityPubServerService {
 		request: FastifyRequest<{ Params: { user: string; }; Querystring: { cursor?: string; page?: string; }; }>,
 		reply: FastifyReply,
 	) {
+		if (this.meta.federation === 'none') {
+			reply.code(403);
+			return;
+		}
+
 		const userId = request.params.user;

 		const cursor = request.query.cursor;
@ -354,6 +372,11 @@ export class ActivityPubServerService {

 	@bindThis
 	private async featured(request: FastifyRequest<{ Params: { user: string; }; }>, reply: FastifyReply) {
+		if (this.meta.federation === 'none') {
+			reply.code(403);
+			return;
+		}
+
 		const userId = request.params.user;

 		const user = await this.usersRepository.findOneBy({
@ -398,6 +421,11 @@ export class ActivityPubServerService {
 		}>,
 		reply: FastifyReply,
 	) {
+		if (this.meta.federation === 'none') {
+			reply.code(403);
+			return;
+		}
+
 		const userId = request.params.user;

 		const sinceId = request.query.since_id;
@ -482,6 +510,11 @@ export class ActivityPubServerService {

 	@bindThis
 	private async userInfo(request: FastifyRequest, reply: FastifyReply, user: MiUser | null) {
+		if (this.meta.federation === 'none') {
+			reply.code(403);
+			return;
+		}
+
 		if (user == null) {
 			reply.code(404);
 			return;
@ -564,6 +597,11 @@ export class ActivityPubServerService {
 		fastify.get<{ Params: { note: string; } }>('/notes/:note', { constraints: { apOrHtml: 'ap' } }, async (request, reply) => {
 			vary(reply.raw, 'Accept');

+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			const note = await this.notesRepository.findOneBy({
 				id: request.params.note,
 				visibility: In(['public', 'home']),
@ -594,6 +632,11 @@ export class ActivityPubServerService {
 		fastify.get<{ Params: { note: string; } }>('/notes/:note/activity', async (request, reply) => {
 			vary(reply.raw, 'Accept');

+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			const note = await this.notesRepository.findOneBy({
 				id: request.params.note,
 				userHost: IsNull(),
@ -634,6 +677,11 @@ export class ActivityPubServerService {

 		// publickey
 		fastify.get<{ Params: { user: string; } }>('/users/:user/publickey', async (request, reply) => {
+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			const userId = request.params.user;

 			const user = await this.usersRepository.findOneBy({
@ -661,6 +709,11 @@ export class ActivityPubServerService {
 		fastify.get<{ Params: { user: string; } }>('/users/:user', { constraints: { apOrHtml: 'ap' } }, async (request, reply) => {
 			vary(reply.raw, 'Accept');

+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			const userId = request.params.user;

 			const user = await this.usersRepository.findOneBy({
@ -674,6 +727,11 @@ export class ActivityPubServerService {
 		fastify.get<{ Params: { acct: string; } }>('/@:acct', { constraints: { apOrHtml: 'ap' } }, async (request, reply) => {
 			vary(reply.raw, 'Accept');

+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			const acct = Acct.parse(request.params.acct);

 			const user = await this.usersRepository.findOneBy({
@ -688,6 +746,11 @@ export class ActivityPubServerService {

 		// emoji
 		fastify.get<{ Params: { emoji: string; } }>('/emojis/:emoji', async (request, reply) => {
+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			const emoji = await this.emojisRepository.findOneBy({
 				host: IsNull(),
 				name: request.params.emoji,
@ -705,6 +768,11 @@ export class ActivityPubServerService {

 		// like
 		fastify.get<{ Params: { like: string; } }>('/likes/:like', async (request, reply) => {
+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			const reaction = await this.noteReactionsRepository.findOneBy({ id: request.params.like });

 			if (reaction == null) {
@ -726,6 +794,11 @@ export class ActivityPubServerService {

 		// follow
 		fastify.get<{ Params: { follower: string; followee: string; } }>('/follows/:follower/:followee', async (request, reply) => {
+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			// This may be used before the follow is completed, so we do not
 			// check if the following exists.

@ -752,6 +825,11 @@ export class ActivityPubServerService {

 		// follow
 		fastify.get<{ Params: { followRequestId: string; } }>('/follows/:followRequestId', async (request, reply) => {
+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			// This may be used before the follow is completed, so we do not
 			// check if the following exists and only check if the follow request exists.

--- a/packages/backend/src/server/WellKnownServerService.ts
+++ b/packages/backend/src/server/WellKnownServerService.ts
@ -8,7 +8,7 @@ import { IsNull } from 'typeorm';
 import vary from 'vary';
 import fastifyAccepts from '@fastify/accepts';
 import { DI } from '@/di-symbols.js';
-import type { UsersRepository } from '@/models/_.js';
+import type { MiMeta, UsersRepository } from '@/models/_.js';
 import type { Config } from '@/config.js';
 import { escapeAttribute, escapeValue } from '@/misc/prelude/xml.js';
 import type { MiUser } from '@/models/User.js';
@ -26,6 +26,9 @@ export class WellKnownServerService {
 		@Inject(DI.config)
 		private config: Config,

+		@Inject(DI.meta)
+		private meta: MiMeta,
+
 		@Inject(DI.usersRepository)
 		private usersRepository: UsersRepository,

@ -66,6 +69,11 @@ export class WellKnownServerService {
 		});

 		fastify.get('/.well-known/host-meta', async (request, reply) => {
+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			reply.header('Content-Type', xrd);
 			return XRD({ element: 'Link', attributes: {
 				rel: 'lrdd',
@ -75,6 +83,11 @@ export class WellKnownServerService {
 		});

 		fastify.get('/.well-known/host-meta.json', async (request, reply) => {
+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			reply.header('Content-Type', 'application/json');
 			return {
 				links: [{
@ -86,6 +99,11 @@ export class WellKnownServerService {
 		});

 		fastify.get('/.well-known/nodeinfo', async (request, reply) => {
+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			return { links: this.nodeinfoServerService.getLinks() };
 		});

@ -99,6 +117,11 @@ fastify.get('/.well-known/change-password', async (request, reply) => {
 */

 		fastify.get<{ Querystring: { resource: string } }>(webFingerPath, async (request, reply) => {
+			if (this.meta.federation === 'none') {
+				reply.code(403);
+				return;
+			}
+
 			const fromId = (id: MiUser['id']): FindOptionsWhere<MiUser> => ({
 				id,
 				host: IsNull(),
--- a/packages/backend/test/unit/WebhookTestService.ts
+++ b/packages/backend/test/unit/WebhookTestService.ts
@ -14,6 +14,7 @@ import { MiSystemWebhook, MiUser, MiWebhook, UserProfilesRepository, UsersReposi
 import { IdService } from '@/core/IdService.js';
 import { DI } from '@/di-symbols.js';
 import { QueueService } from '@/core/QueueService.js';
+import { CustomEmojiService } from '@/core/CustomEmojiService.js';

 describe('WebhookTestService', () => {
 	let app: TestingModule;
@ -56,6 +57,11 @@ describe('WebhookTestService', () => {
 			providers: [
 				WebhookTestService,
 				IdService,
+				{
+					provide: CustomEmojiService, useFactory: () => ({
+						populateEmojis: jest.fn(),
+					}),
+				},
 				{
 					provide: QueueService, useFactory: () => ({
 						systemWebhookDeliver: jest.fn(),
--- a/packages/frontend-embed/src/components/EmImgWithBlurhash.vue
+++ b/packages/frontend-embed/src/components/EmImgWithBlurhash.vue
@ -33,13 +33,11 @@ const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resol
 				Math.min(navigator.hardwareConcurrency - 1, 4),
 			);
 			resolve(workers);
-			if (_DEV_) console.log('WebGL2 in worker is supported!');
 		} else {
 			const canvas = document.createElement('canvas');
 			canvas.width = 64;
 			canvas.height = 64;
 			resolve(canvas);
-			if (_DEV_) console.log('WebGL2 in worker is not supported...');
 		}
 		testWorker.terminate();
 	});
--- a/packages/frontend-shared/js/config.ts
+++ b/packages/frontend-shared/js/config.ts
@ -12,6 +12,7 @@ const siteName = document.querySelector<HTMLMetaElement>('meta[property="og:site
 export const host = address.host;
 export const hostname = address.hostname;
 export const url = address.origin;
+export const port = address.port;
 export const apiUrl = location.origin + '/api';
 export const wsOrigin = location.origin;
 export const lang = localStorage.getItem('lang') ?? 'en-US';
--- a/packages/frontend/.storybook/preview.ts
+++ b/packages/frontend/.storybook/preview.ts
@ -64,12 +64,12 @@ initialize({
 initLocalStorage();
 queueMicrotask(() => {
 	Promise.all([
-		import('../src/components'),
-		import('../src/directives'),
-		import('../src/widgets'),
-		import('../src/theme'),
-		import('../src/preferences'),
-		import('../src/os'),
+		import('../src/components/index.js'),
+		import('../src/directives/index.js'),
+		import('../src/widgets/index.js'),
+		import('../src/theme.js'),
+		import('../src/preferences.js'),
+		import('../src/os.js'),
 	]).then(([{ default: components }, { default: directives }, { default: widgets }, { applyTheme }, { prefer }, os]) => {
 		setup((app) => {
 			moduleInitialized = true;
--- a/packages/frontend/eslint.config.js
+++ b/packages/frontend/eslint.config.js
@ -52,7 +52,11 @@ export default [
 			'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
 			// window の禁止理由: グローバルスコープと衝突し、予期せぬ結果を招くため
 			// e の禁止理由: error や event など、複数のキーワードの頭文字であり分かりにくいため
-			'id-denylist': ['error', 'window', 'e'],
+			// close ... window.closeと衝突 or 紛らわしい
+			// open ... window.openと衝突 or 紛らわしい
+			// fetch ... window.fetchと衝突 or 紛らわしい
+			// location ... window.locationと衝突 or 紛らわしい
+			'id-denylist': ['error', 'window', 'e', 'close', 'open', 'fetch', 'location'],
 			'no-shadow': ['warn'],
 			'vue/attributes-order': ['error', {
 				alphabetical: false,
--- a/packages/frontend/src/_boot_.ts
+++ b/packages/frontend/src/_boot_.ts
@ -12,7 +12,7 @@ import '@/style.scss';
 import { mainBoot } from '@/boot/main-boot.js';
 import { subBoot } from '@/boot/sub-boot.js';

-const subBootPaths = ['/share', '/auth', '/miauth', '/oauth', '/signup-complete'];
+const subBootPaths = ['/share', '/auth', '/miauth', '/oauth', '/signup-complete', '/install-extensions'];

 if (subBootPaths.some(i => location.pathname === i || location.pathname.startsWith(i + '/'))) {
 	subBoot();
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@ -26,8 +26,6 @@ import { deckStore } from '@/ui/deck/deck-store.js';
 import { analytics, initAnalytics } from '@/analytics.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { fetchCustomEmojis } from '@/custom-emojis.js';
-import { setupRouter } from '@/router/main.js';
-import { createMainRouter } from '@/router/definition.js';
 import { prefer } from '@/preferences.js';
 import { $i } from '@/i.js';

@ -267,8 +265,6 @@ export async function common(createVue: () => App<Element>) {

 	const app = createVue();

-	setupRouter(app, createMainRouter);
-
 	if (_DEV_) {
 		app.config.performance = true;
 	}
@ -304,24 +300,26 @@ export async function common(createVue: () => App<Element>) {
 	removeSplash();

 	//#region Self-XSS 対策メッセージ
-	console.log(
-		`%c${i18n.ts._selfXssPrevention.warning}`,
-		'color: #f00; background-color: #ff0; font-size: 36px; padding: 4px;',
-	);
-	console.log(
-		`%c${i18n.ts._selfXssPrevention.title}`,
-		'color: #f00; font-weight: 900; font-family: "Hiragino Sans W9", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 24px;',
-	);
-	console.log(
-		`%c${i18n.ts._selfXssPrevention.description1}`,
-		'font-size: 16px; font-weight: 700;',
-	);
-	console.log(
-		`%c${i18n.ts._selfXssPrevention.description2}`,
-		'font-size: 16px;',
-		'font-size: 20px; font-weight: 700; color: #f00;',
-	);
-	console.log(i18n.tsx._selfXssPrevention.description3({ link: 'https://misskey-hub.net/docs/for-users/resources/self-xss/' }));
+	if (!_DEV_) {
+		console.log(
+			`%c${i18n.ts._selfXssPrevention.warning}`,
+			'color: #f00; background-color: #ff0; font-size: 36px; padding: 4px;',
+		);
+		console.log(
+			`%c${i18n.ts._selfXssPrevention.title}`,
+			'color: #f00; font-weight: 900; font-family: "Hiragino Sans W9", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 24px;',
+		);
+		console.log(
+			`%c${i18n.ts._selfXssPrevention.description1}`,
+			'font-size: 16px; font-weight: 700;',
+		);
+		console.log(
+			`%c${i18n.ts._selfXssPrevention.description2}`,
+			'font-size: 16px;',
+			'font-size: 20px; font-weight: 700; color: #f00;',
+		);
+		console.log(i18n.tsx._selfXssPrevention.description3({ link: 'https://misskey-hub.net/docs/for-users/resources/self-xss/' }));
+	}
 	//#endregion

 	return {
--- a/packages/frontend/src/boot/main-boot.ts
+++ b/packages/frontend/src/boot/main-boot.ts
@ -24,7 +24,7 @@ import { miLocalStorage } from '@/local-storage.js';
 import { claimAchievement, claimedAchievements } from '@/utility/achievements.js';
 import { initializeSw } from '@/utility/initialize-sw.js';
 import { emojiPicker } from '@/utility/emoji-picker.js';
-import { mainRouter } from '@/router/main.js';
+import { mainRouter } from '@/router.js';
 import { makeHotkey } from '@/utility/hotkey.js';
 import { addCustomEmoji, removeCustomEmojis, updateCustomEmojis } from '@/custom-emojis.js';
 import { prefer } from '@/preferences.js';
@ -201,6 +201,8 @@ export async function mainBoot() {
 				prefer.commit('sound.on.noteMy', store.s.sound_noteMy as any);
 				prefer.commit('sound.on.notification', store.s.sound_notification as any);
 				prefer.commit('sound.on.reaction', store.s.sound_reaction as any);
+				prefer.commit('defaultNoteVisibility', store.s.defaultNoteVisibility);
+				prefer.commit('defaultNoteLocalOnly', store.s.defaultNoteLocalOnly);

 				window.setTimeout(() => {
 					unisonReload();
--- a/packages/frontend/src/components/MkAbuseReport.vue
+++ b/packages/frontend/src/components/MkAbuseReport.vue
@ -88,9 +88,9 @@ import { i18n } from '@/i18n.js';
 import { dateString } from '@/filters/date.js';
 import MkFolder from '@/components/MkFolder.vue';
 import RouterView from '@/components/global/RouterView.vue';
-import { useRouterFactory } from '@/router/supplier';
 import MkTextarea from '@/components/MkTextarea.vue';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
+import { createRouter } from '@/router.js';

 const props = defineProps<{
 	report: Misskey.entities.AdminAbuseUserReportsResponse[number];
@ -100,10 +100,9 @@ const emit = defineEmits<{
 	(ev: 'resolved', reportId: string): void;
 }>();

-const routerFactory = useRouterFactory();
-const targetRouter = routerFactory(`/admin/user/${props.report.targetUserId}`);
+const targetRouter = createRouter(`/admin/user/${props.report.targetUserId}`);
 targetRouter.init();
-const reporterRouter = routerFactory(`/admin/user/${props.report.reporterId}`);
+const reporterRouter = createRouter(`/admin/user/${props.report.reporterId}`);
 reporterRouter.init();

 const moderationNote = ref(props.report.moderationNote ?? '');
@ -135,7 +134,7 @@ function forward() {

 function showMenu(ev: MouseEvent) {
 	os.popupMenu([{
-		icon: 'ti ti-id',
+		icon: 'ti ti-hash',
 		text: 'Copy ID',
 		action: () => {
 			copyToClipboard(props.report.id);
--- a/packages/frontend/src/components/MkAbuseReportWindow.vue
+++ b/packages/frontend/src/components/MkAbuseReportWindow.vue
@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script setup lang="ts">
-import { ref, shallowRef } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkWindow from '@/components/MkWindow.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
@ -47,7 +47,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();

-const uiWindow = shallowRef<InstanceType<typeof MkWindow>>();
+const uiWindow = useTemplateRef('uiWindow');
 const comment = ref(props.initialComment ?? '');

 function send() {
--- a/packages/frontend/src/components/MkAnimBg.vue
+++ b/packages/frontend/src/components/MkAnimBg.vue
@ -4,14 +4,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<canvas ref="canvasEl" style="width: 100%; height: 100%; pointer-events: none;"></canvas>
+<canvas ref="canvasEl" style="display: block; width: 100%; height: 100%; pointer-events: none;"></canvas>
 </template>

 <script lang="ts" setup>
-import { onMounted, onUnmounted, shallowRef } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef } from 'vue';
 import isChromatic from 'chromatic/isChromatic';

-const canvasEl = shallowRef<HTMLCanvasElement>();
+const canvasEl = useTemplateRef('canvasEl');

 const props = withDefaults(defineProps<{
 	scale?: number;
--- a/packages/frontend/src/components/MkAnnouncementDialog.vue
+++ b/packages/frontend/src/components/MkAnnouncementDialog.vue
@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { onMounted, shallowRef } from 'vue';
+import { onMounted, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@ -37,8 +37,8 @@ const props = withDefaults(defineProps<{
 }>(), {
 });

-const rootEl = shallowRef<HTMLDivElement>();
-const modal = shallowRef<InstanceType<typeof MkModal>>();
+const rootEl = useTemplateRef('rootEl');
+const modal = useTemplateRef('modal');

 async function ok() {
 	if (props.announcement.needConfirmationToRead) {
--- a/packages/frontend/src/components/MkAntennaEditorDialog.vue
+++ b/packages/frontend/src/components/MkAntennaEditorDialog.vue
@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { shallowRef } from 'vue';
+import { useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import XAntennaEditor from '@/components/MkAntennaEditor.vue';
@ -40,7 +40,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void,
 }>();

-const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
+const dialog = useTemplateRef('dialog');

 function onAntennaCreated(newAntenna: Misskey.entities.Antenna) {
 	emit('created', newAntenna);
--- a/packages/frontend/src/components/MkAutocomplete.vue
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts">
-import { markRaw, ref, shallowRef, computed, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import { markRaw, ref, useTemplateRef, computed, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
 import sanitizeHtml from 'sanitize-html';
 import { emojilist, getEmojiName } from '@@/js/emojilist.js';
 import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@@/js/emoji-base.js';
@ -139,7 +139,7 @@ const emit = defineEmits<{
 }>();

 const suggests = ref<Element>();
-const rootEl = shallowRef<HTMLDivElement>();
+const rootEl = useTemplateRef('rootEl');

 const fetching = ref(true);
 const users = ref<any[]>([]);
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { nextTick, onMounted, shallowRef } from 'vue';
+import { nextTick, onMounted, useTemplateRef } from 'vue';

 const props = defineProps<{
 	type?: 'button' | 'submit' | 'reset';
@ -64,8 +64,8 @@ const emit = defineEmits<{
 	(ev: 'click', payload: MouseEvent): void;
 }>();

-const el = shallowRef<HTMLElement | null>(null);
-const ripples = shallowRef<HTMLElement | null>(null);
+const el = useTemplateRef('el');
+const ripples = useTemplateRef('ripples');

 onMounted(() => {
 	if (props.autofocus) {
--- a/packages/frontend/src/components/MkCaptcha.vue
+++ b/packages/frontend/src/components/MkCaptcha.vue
@ -26,7 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { ref, shallowRef, computed, onMounted, onBeforeUnmount, watch, onUnmounted } from 'vue';
+import { ref, useTemplateRef, computed, onMounted, onBeforeUnmount, watch, onUnmounted } from 'vue';
 import { store } from '@/store.js';

 // APIs provided by Captcha services
@ -69,7 +69,7 @@ const emit = defineEmits<{

 const available = ref(false);

-const captchaEl = shallowRef<HTMLDivElement | undefined>();
+const captchaEl = useTemplateRef('captchaEl');
 const captchaWidgetId = ref<string | undefined>(undefined);
 const testcaptchaInput = ref('');
 const testcaptchaPassed = ref(false);
--- a/packages/frontend/src/components/MkChart.vue
+++ b/packages/frontend/src/components/MkChart.vue
@ -45,12 +45,8 @@ export type ChartSrc =
 </script>

 <script lang="ts" setup>
-/* eslint-disable id-denylist --
-  Chart.js has a `data` attribute in most chart definitions, which triggers the
-  id-denylist violation when setting it. This is causing about 60+ lint issues.
-  As this is part of Chart.js's API it makes sense to disable the check here.
-*/
-import { onMounted, ref, shallowRef, watch } from 'vue';
+
+import { onMounted, ref, useTemplateRef, watch } from 'vue';
 import { Chart } from 'chart.js';
 import * as Misskey from 'misskey-js';
 import { misskeyApiGet } from '@/utility/misskey-api.js';
@ -96,7 +92,7 @@ const props = withDefaults(defineProps<{
 	nowForChromatic: undefined,
 });

-const legendEl = shallowRef<InstanceType<typeof MkChartLegend>>();
+const legendEl = useTemplateRef('legendEl');

 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
 const negate = arr => arr.map(x => -x);
@ -134,7 +130,7 @@ let chartData: {
 	bytes?: boolean;
 } | null = null;

-const chartEl = shallowRef<HTMLCanvasElement | null>(null);
+const chartEl = useTemplateRef('chartEl');
 const fetching = ref(true);

 const getDate = (ago: number) => {
@ -849,7 +845,7 @@ watch(() => [props.src, props.span], fetchAndRender);
 onMounted(() => {
 	fetchAndRender();
 });
-/* eslint-enable id-denylist */
+
 </script>

 <style lang="scss" module>
--- a/packages/frontend/src/components/MkCode.vue
+++ b/packages/frontend/src/components/MkCode.vue
@ -48,7 +48,6 @@ const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'))

 function copy() {
 	copyToClipboard(props.code);
-	os.success();
 }
 </script>

--- a/packages/frontend/src/components/MkCodeEditor.vue
+++ b/packages/frontend/src/components/MkCodeEditor.vue
@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { ref, watch, toRefs, shallowRef, nextTick } from 'vue';
+import { ref, watch, toRefs, useTemplateRef, nextTick } from 'vue';
 import { debounce } from 'throttle-debounce';
 import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n.js';
@ -61,7 +61,7 @@ const { modelValue } = toRefs(props);
 const v = ref<string>(modelValue.value ?? '');
 const focused = ref(false);
 const changed = ref(false);
-const inputEl = shallowRef<HTMLTextAreaElement>();
+const inputEl = useTemplateRef('inputEl');

 const focus = () => inputEl.value?.focus();

--- a/packages/frontend/src/components/MkColorInput.vue
+++ b/packages/frontend/src/components/MkColorInput.vue
@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { ref, shallowRef, toRefs } from 'vue';
+import { ref, useTemplateRef, toRefs } from 'vue';

 const props = defineProps<{
 	modelValue: string | null;
@ -39,7 +39,7 @@ const emit = defineEmits<{

 const { modelValue } = toRefs(props);
 const v = ref(modelValue.value);
-const inputEl = shallowRef<HTMLElement>();
+const inputEl = useTemplateRef('inputEl');

 const onInput = () => {
 	emit('update:modelValue', v.value ?? '');
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
+import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 import { prefer } from '@/preferences.js';
 import { i18n } from '@/i18n.js';

@ -58,9 +58,9 @@ const props = withDefaults(defineProps<{
 	maxHeight: null,
 });

-const rootEl = shallowRef<HTMLElement>();
-const contentEl = shallowRef<HTMLElement>();
-const headerEl = shallowRef<HTMLElement>();
+const rootEl = useTemplateRef('rootEl');
+const contentEl = useTemplateRef('contentEl');
+const headerEl = useTemplateRef('headerEl');
 const showBody = ref(props.expanded);
 const ignoreOmit = ref(false);
 const omitted = ref(false);
--- a/packages/frontend/src/components/MkContextMenu.vue
+++ b/packages/frontend/src/components/MkContextMenu.vue
@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { onMounted, onBeforeUnmount, shallowRef, ref } from 'vue';
+import { onMounted, onBeforeUnmount, useTemplateRef, ref } from 'vue';
 import MkMenu from './MkMenu.vue';
 import type { MenuItem } from '@/types/menu.js';
 import contains from '@/utility/contains.js';
@ -34,7 +34,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();

-const rootEl = shallowRef<HTMLDivElement>();
+const rootEl = useTemplateRef('rootEl');

 const zIndex = ref<number>(os.claimZIndex('high'));

--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { onMounted, shallowRef, ref } from 'vue';
+import { onMounted, useTemplateRef, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import Cropper from 'cropperjs';
 import tinycolor from 'tinycolor2';
@ -56,8 +56,8 @@ const props = defineProps<{
 }>();

 const imgUrl = getProxiedImageUrl(props.file.url, undefined, true);
-const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
-const imgEl = shallowRef<HTMLImageElement>();
+const dialogEl = useTemplateRef('dialogEl');
+const imgEl = useTemplateRef('imgEl');
 let cropper: Cropper | null = null;
 const loading = ref(true);

--- a/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
+++ b/packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
@ -57,14 +57,14 @@ SPDX-License-Identifier: AGPL-3.0-only

 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import { shallowRef } from 'vue';
+import { useTemplateRef } from 'vue';
 import MkLink from '@/components/MkLink.vue';
 import { i18n } from '@/i18n.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';

 const props = defineProps<{
-  emoji: Misskey.entities.EmojiDetailed,
+	emoji: Misskey.entities.EmojiDetailed,
 }>();

 const emit = defineEmits<{
@ -73,7 +73,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();

-const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
+const dialogEl = useTemplateRef('dialogEl');

 function cancel() {
 	emit('cancel');
--- a/packages/frontend/src/components/MkDialog.vue
+++ b/packages/frontend/src/components/MkDialog.vue
@ -56,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { ref, shallowRef, computed } from 'vue';
+import { ref, useTemplateRef, computed } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
@ -117,7 +117,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();

-const modal = shallowRef<InstanceType<typeof MkModal>>();
+const modal = useTemplateRef('modal');

 const inputValue = ref<string | number | null>(props.input?.default ?? null);
 const selectedValue = ref(props.select?.default ?? null);
--- a/packages/frontend/src/components/MkDrive.file.vue
+++ b/packages/frontend/src/components/MkDrive.file.vue
@ -47,7 +47,7 @@ import { i18n } from '@/i18n.js';
 import { $i } from '@/i.js';
 import { getDriveFileMenu } from '@/utility/get-drive-file-menu.js';
 import { deviceKind } from '@/utility/device-kind.js';
-import { useRouter } from '@/router/supplier.js';
+import { useRouter } from '@/router.js';

 const router = useRouter();

--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@ -297,7 +297,7 @@ function onContextmenu(ev: MouseEvent) {
 	}];
 	if (prefer.s.devMode) {
 		menu = menu.concat([{ type: 'divider' }, {
-			icon: 'ti ti-id',
+			icon: 'ti ti-hash',
 			text: i18n.ts.copyFolderId,
 			action: () => {
 				copyToClipboard(props.folder.id);
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@ -96,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
+import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from './MkButton.vue';
 import type { MenuItem } from '@/types/menu.js';
@ -129,8 +129,8 @@ const emit = defineEmits<{
 	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
 }>();

-const loadMoreFiles = shallowRef<InstanceType<typeof MkButton>>();
-const fileInput = shallowRef<HTMLInputElement>();
+const loadMoreFiles = useTemplateRef('loadMoreFiles');
+const fileInput = useTemplateRef('fileInput');

 const folder = ref<Misskey.entities.DriveFolder | null>(null);
 const files = ref<Misskey.entities.DriveFile[]>([]);
--- a/packages/frontend/src/components/MkDriveSelectDialog.vue
+++ b/packages/frontend/src/components/MkDriveSelectDialog.vue
@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { ref, shallowRef } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import XDrive from '@/components/MkDrive.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
@ -43,7 +43,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();

-const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
+const dialog = useTemplateRef('dialog');

 const selected = ref<Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]>([]);

--- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
+++ b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
@ -89,7 +89,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script setup lang="ts">
-import { shallowRef, ref, computed, nextTick, onMounted, onDeactivated, onUnmounted } from 'vue';
+import { useTemplateRef, ref, computed, nextTick, onMounted, onDeactivated, onUnmounted } from 'vue';
 import { url } from '@@/js/config.js';
 import { embedRouteWithScrollbar } from '@@/js/embed-page.js';
 import type { EmbeddableEntity, EmbedParams } from '@@/js/embed-page.js';
@ -121,7 +121,7 @@ const props = defineProps<{
 }>();

 //#region Modalの制御
-const dialogEl = shallowRef<InstanceType<typeof MkModalWindow>>();
+const dialogEl = useTemplateRef('dialogEl');

 function cancel() {
 	emit('cancel');
@ -194,14 +194,13 @@ function generate() {

 function doCopy() {
 	copyToClipboard(result.value);
-	os.success();
 }
 //#endregion

 //#region プレビューのリサイズ
-const resizerRootEl = shallowRef<HTMLDivElement>();
+const resizerRootEl = useTemplateRef('resizerRootEl');
 const iframeLoading = ref(true);
-const iframeEl = shallowRef<HTMLIFrameElement>();
+const iframeEl = useTemplateRef('iframeEl');
 const iframeHeight = ref(0);
 const iframeScale = ref(1);
 const iframeStyle = computed(() => {
--- a/packages/frontend/src/components/MkEmojiPicker.vue
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@ -115,7 +115,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { ref, shallowRef, computed, watch, onMounted } from 'vue';
+import { ref, useTemplateRef, computed, watch, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import {
 	emojilist,
@ -157,8 +157,8 @@ const emit = defineEmits<{
 	(ev: 'esc'): void;
 }>();

-const searchEl = shallowRef<HTMLInputElement>();
-const emojisEl = shallowRef<HTMLDivElement>();
+const searchEl = useTemplateRef('searchEl');
+const emojisEl = useTemplateRef('emojisEl');

 const {
 	emojiPickerScale,
--- a/packages/frontend/src/components/MkEmojiPickerDialog.vue
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only

 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
-import { shallowRef } from 'vue';
+import { useTemplateRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
 import { prefer } from '@/preferences.js';
@ -64,8 +64,8 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();

-const modal = shallowRef<InstanceType<typeof MkModal>>();
-const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
+const modal = useTemplateRef('modal');
+const picker = useTemplateRef('picker');

 function chosen(emoji: string) {
 	emit('done', emoji);
--- a/packages/frontend/src/components/MkExtensionInstaller.vue
+++ b/packages/frontend/src/components/MkExtensionInstaller.vue
@ -11,54 +11,91 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<!-- 拡張用？ -->
 		<i v-else class="ti ti-download"></i>
 	</div>
-	<h2 :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].title }}</h2>
-	<div :class="$style.extInstallerNormDesc">{{ i18n.ts._externalResourceInstaller.checkVendorBeforeInstall }}</div>
-	<MkInfo v-if="isPlugin" :warn="true">{{ i18n.ts._plugin.installWarn }}</MkInfo>
-	<FormSection>
-		<template #label>{{ i18n.ts._externalResourceInstaller[`_${extension.type}`].metaTitle }}</template>
-		<div class="_gaps_s">
-			<FormSplit>
-				<MkKeyValue>
-					<template #key>{{ i18n.ts.name }}</template>
-					<template #value>{{ extension.meta.name }}</template>
-				</MkKeyValue>
-				<MkKeyValue>
-					<template #key>{{ i18n.ts.author }}</template>
-					<template #value>{{ extension.meta.author }}</template>
-				</MkKeyValue>
-			</FormSplit>
-			<MkKeyValue v-if="isPlugin">
-				<template #key>{{ i18n.ts.description }}</template>
-				<template #value>{{ extension.meta.description ?? i18n.ts.none }}</template>
-			</MkKeyValue>
-			<MkKeyValue v-if="isPlugin">
-				<template #key>{{ i18n.ts.version }}</template>
-				<template #value>{{ extension.meta.version }}</template>
-			</MkKeyValue>
-			<MkKeyValue v-if="isPlugin">
-				<template #key>{{ i18n.ts.permission }}</template>
-				<template #value>
-					<ul v-if="extension.meta.permissions && extension.meta.permissions.length > 0" :class="$style.extInstallerKVList">
-						<li v-for="permission in extension.meta.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li>
-					</ul>
-					<template v-else>{{ i18n.ts.none }}</template>
-				</template>
-			</MkKeyValue>
-			<MkKeyValue v-if="isTheme">
-				<template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template>
-				<template #value>{{ i18n.ts[extension.meta.base ?? 'none'] }}</template>
-			</MkKeyValue>
-			<MkFolder>
-				<template #icon><i class="ti ti-code"></i></template>
-				<template #label>{{ i18n.ts._plugin.viewSource }}</template>

-				<MkCode :code="extension.raw"/>
-			</MkFolder>
-		</div>
-	</FormSection>
+	<h2 v-if="isPlugin" :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller._plugin.title }}</h2>
+	<h2 v-else-if="isTheme" :class="$style.extInstallerTitle">{{ i18n.ts._externalResourceInstaller._theme.title }}</h2>
+
+	<MkInfo :warn="true">{{ i18n.ts._externalResourceInstaller.checkVendorBeforeInstall }}</MkInfo>
+
+	<div v-if="isPlugin" class="_gaps_s">
+		<MkFolder :defaultOpen="true">
+			<template #icon><i class="ti ti-info-circle"></i></template>
+			<template #label>{{ i18n.ts.metadata }}</template>
+
+			<div class="_gaps_s">
+				<FormSplit>
+					<MkKeyValue>
+						<template #key>{{ i18n.ts.name }}</template>
+						<template #value>{{ extension.meta.name }}</template>
+					</MkKeyValue>
+					<MkKeyValue>
+						<template #key>{{ i18n.ts.author }}</template>
+						<template #value>{{ extension.meta.author }}</template>
+					</MkKeyValue>
+				</FormSplit>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.description }}</template>
+					<template #value>{{ extension.meta.description ?? i18n.ts.none }}</template>
+				</MkKeyValue>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.version }}</template>
+					<template #value>{{ extension.meta.version }}</template>
+				</MkKeyValue>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.permission }}</template>
+					<template #value>
+						<ul v-if="extension.meta.permissions && extension.meta.permissions.length > 0" :class="$style.extInstallerKVList">
+							<li v-for="permission in extension.meta.permissions" :key="permission">{{ i18n.ts._permissions[permission] }}</li>
+						</ul>
+						<template v-else>{{ i18n.ts.none }}</template>
+					</template>
+				</MkKeyValue>
+			</div>
+		</MkFolder>
+
+		<MkFolder :withSpacer="false">
+			<template #icon><i class="ti ti-code"></i></template>
+			<template #label>{{ i18n.ts._plugin.viewSource }}</template>
+
+			<MkCode :code="extension.raw"/>
+		</MkFolder>
+	</div>
+	<div v-else-if="isTheme" class="_gaps_s">
+		<MkFolder :defaultOpen="true">
+			<template #icon><i class="ti ti-info-circle"></i></template>
+			<template #label>{{ i18n.ts.metadata }}</template>
+
+			<div class="_gaps_s">
+				<FormSplit>
+					<MkKeyValue>
+						<template #key>{{ i18n.ts.name }}</template>
+						<template #value>{{ extension.meta.name }}</template>
+					</MkKeyValue>
+					<MkKeyValue>
+						<template #key>{{ i18n.ts.author }}</template>
+						<template #value>{{ extension.meta.author }}</template>
+					</MkKeyValue>
+				</FormSplit>
+				<MkKeyValue>
+					<template #key>{{ i18n.ts._externalResourceInstaller._meta.base }}</template>
+					<template #value>{{ i18n.ts[extension.meta.base ?? 'none'] }}</template>
+				</MkKeyValue>
+			</div>
+		</MkFolder>
+
+		<MkFolder :withSpacer="false">
+			<template #icon><i class="ti ti-code"></i></template>
+			<template #label>{{ i18n.ts._theme.code }}</template>
+
+			<MkCode :code="extension.raw"/>
+		</MkFolder>
+	</div>
+
 	<slot name="additionalInfo"/>
+
 	<div class="_buttonsCenter">
-		<MkButton primary @click="emits('confirm')"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
+		<MkButton danger rounded large @click="emits('cancel')"><i class="ti ti-x"></i> {{ i18n.ts.cancel }}</MkButton>
+		<MkButton gradate rounded large @click="emits('confirm')"><i class="ti ti-download"></i> {{ i18n.ts.install }}</MkButton>
 	</div>
 </div>
 </template>
@ -105,6 +142,7 @@ const props = defineProps<{

 const emits = defineEmits<{
 	(ev: 'confirm'): void;
+	(ev: 'cancel'): void;
 }>();
 </script>

@ -112,13 +150,13 @@ const emits = defineEmits<{
 .extInstallerRoot {
 	border-radius: var(--MI-radius);
 	background: var(--MI_THEME-panel);
-	padding: 1.5rem;
+	padding: 20px;
 }

 .extInstallerIconWrapper {
 	width: 48px;
 	height: 48px;
-	font-size: 24px;
+	font-size: 20px;
 	line-height: 48px;
 	text-align: center;
 	border-radius: 50%;
@ -135,10 +173,6 @@ const emits = defineEmits<{
 	margin: 0;
 }

-.extInstallerNormDesc {
-	text-align: center;
-}
-
 .extInstallerKVList {
 	margin-top: 0;
 	margin-bottom: 0;
--- a/packages/frontend/src/components/MkFileCaptionEditWindow.vue
+++ b/packages/frontend/src/components/MkFileCaptionEditWindow.vue
@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { shallowRef, ref } from 'vue';
+import { useTemplateRef, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
@ -42,7 +42,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();

-const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
+const dialog = useTemplateRef('dialog');

 const caption = ref(props.default);

--- a/packages/frontend/src/components/MkFoldableSection.vue
+++ b/packages/frontend/src/components/MkFoldableSection.vue
@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { onMounted, ref, shallowRef, watch } from 'vue';
+import { onMounted, ref, useTemplateRef, watch } from 'vue';
 import { miLocalStorage } from '@/local-storage.js';
 import { prefer } from '@/preferences.js';
 import { getBgColor } from '@/utility/get-bg-color.js';
@ -46,7 +46,7 @@ const props = withDefaults(defineProps<{
 	persistKey: null,
 });

-const rootEl = shallowRef<HTMLElement>();
+const rootEl = useTemplateRef('rootEl');
 const parentBg = ref<string | null>(null);
 // eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const showBody = ref((props.persistKey && miLocalStorage.getItem(`${miLocalStoragePrefix}${props.persistKey}`)) ? (miLocalStorage.getItem(`${miLocalStoragePrefix}${props.persistKey}`) === 't') : props.expanded);
--- a/packages/frontend/src/components/MkFolder.vue
+++ b/packages/frontend/src/components/MkFolder.vue
@ -56,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { nextTick, onMounted, ref, shallowRef } from 'vue';
+import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
 import { prefer } from '@/preferences.js';
 import { getBgColor } from '@/utility/get-bg-color.js';

@ -74,7 +74,7 @@ const props = withDefaults(defineProps<{
 	spacerMax: 22,
 });

-const rootEl = shallowRef<HTMLElement>();
+const rootEl = useTemplateRef('rootEl');
 const bgSame = ref(false);
 const opened = ref(props.defaultOpen);
 const openedAtLeastOnce = ref(props.defaultOpen);
--- a/packages/frontend/src/components/MkFormDialog.vue
+++ b/packages/frontend/src/components/MkFormDialog.vue
@ -71,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { reactive, shallowRef } from 'vue';
+import { reactive, useTemplateRef } from 'vue';
 import MkInput from './MkInput.vue';
 import MkTextarea from './MkTextarea.vue';
 import MkSwitch from './MkSwitch.vue';
@ -99,7 +99,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();

-const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
+const dialog = useTemplateRef('dialog');
 const values = reactive({});

 for (const item in props.form) {
--- a/packages/frontend/src/components/MkHeatmap.vue
+++ b/packages/frontend/src/components/MkHeatmap.vue
@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { onMounted, nextTick, watch, shallowRef, ref } from 'vue';
+import { onMounted, nextTick, watch, useTemplateRef, ref } from 'vue';
 import { Chart } from 'chart.js';
 import * as Misskey from 'misskey-js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@ -35,8 +35,8 @@ const props = withDefaults(defineProps<{
 	label: '',
 });

-const rootEl = shallowRef<HTMLDivElement | null>(null);
-const chartEl = shallowRef<HTMLCanvasElement | null>(null);
+const rootEl = useTemplateRef('rootEl');
+const chartEl = useTemplateRef('chartEl');
 const now = new Date();
 let chartInstance: Chart | null = null;
 const fetching = ref(true);
--- a/packages/frontend/src/components/MkHorizontalSwipe.vue
+++ b/packages/frontend/src/components/MkHorizontalSwipe.vue
@ -26,12 +26,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 </div>
 </template>
 <script lang="ts" setup>
-import { ref, shallowRef, computed, nextTick, watch } from 'vue';
+import { ref, useTemplateRef, computed, nextTick, watch } from 'vue';
 import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import { isHorizontalSwipeSwiping as isSwiping } from '@/utility/touch.js';
 import { prefer } from '@/preferences.js';

-const rootEl = shallowRef<HTMLDivElement>();
+const rootEl = useTemplateRef('rootEl');

 const tabModel = defineModel<string>('tab');

--- a/packages/frontend/src/components/MkImgWithBlurhash.vue
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@ -69,13 +69,11 @@ const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resol
 				Math.min(navigator.hardwareConcurrency - 1, 4),
 			);
 			resolve(workers);
-			if (_DEV_) console.log('WebGL2 in worker is supported!');
 		} else {
 			const canvas = document.createElement('canvas');
 			canvas.width = 64;
 			canvas.height = 64;
 			resolve(canvas);
-			if (_DEV_) console.log('WebGL2 in worker is not supported...');
 		}
 		testWorker.terminate();
 	});
@ -83,7 +81,7 @@ const canvasPromise = new Promise<WorkerMultiDispatch | HTMLCanvasElement>(resol
 </script>

 <script lang="ts" setup>
-import { computed, nextTick, onMounted, onUnmounted, shallowRef, watch, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, useTemplateRef, watch, ref } from 'vue';
 import { v4 as uuid } from 'uuid';
 import { render } from 'buraha';
 import { prefer } from '@/preferences.js';
@ -120,9 +118,9 @@ const props = withDefaults(defineProps<{
 });

 const viewId = uuid();
-const canvas = shallowRef<HTMLCanvasElement>();
-const root = shallowRef<HTMLDivElement>();
-const img = shallowRef<HTMLImageElement>();
+const canvas = useTemplateRef('canvas');
+const root = useTemplateRef('root');
+const img = useTemplateRef('img');
 const loaded = ref(false);
 const canvasWidth = ref(64);
 const canvasHeight = ref(64);
--- a/packages/frontend/src/components/MkInput.vue
+++ b/packages/frontend/src/components/MkInput.vue
@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { onMounted, onUnmounted, nextTick, ref, shallowRef, watch, computed, toRefs } from 'vue';
+import { onMounted, onUnmounted, nextTick, ref, useTemplateRef, watch, computed, toRefs } from 'vue';
 import { debounce } from 'throttle-debounce';
 import { useInterval } from '@@/js/use-interval.js';
 import type { InputHTMLAttributes } from 'vue';
@ -92,9 +92,9 @@ const focused = ref(false);
 const changed = ref(false);
 const invalid = ref(false);
 const filled = computed(() => v.value !== '' && v.value != null);
-const inputEl = shallowRef<HTMLInputElement>();
-const prefixEl = shallowRef<HTMLElement>();
-const suffixEl = shallowRef<HTMLElement>();
+const inputEl = useTemplateRef('inputEl');
+const prefixEl = useTemplateRef('prefixEl');
+const suffixEl = useTemplateRef('suffixEl');
 const height =
 	props.small ? 33 :
 	props.large ? 39 :
--- a/packages/frontend/src/components/MkInstanceStats.vue
+++ b/packages/frontend/src/components/MkInstanceStats.vue
@ -84,8 +84,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { onMounted, ref, computed, shallowRef } from 'vue';
+import { onMounted, ref, computed, useTemplateRef } from 'vue';
 import { Chart } from 'chart.js';
+import type { HeatmapSource } from '@/components/MkHeatmap.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkChart from '@/components/MkChart.vue';
 import { useChartTooltip } from '@/use/use-chart-tooltip.js';
@ -95,7 +96,6 @@ import { misskeyApiGet } from '@/utility/misskey-api.js';
 import { instance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import MkHeatmap from '@/components/MkHeatmap.vue';
-import type { HeatmapSource } from '@/components/MkHeatmap.vue';
 import MkFoldableSection from '@/components/MkFoldableSection.vue';
 import MkRetentionHeatmap from '@/components/MkRetentionHeatmap.vue';
 import MkRetentionLineChart from '@/components/MkRetentionLineChart.vue';
@ -109,8 +109,8 @@ const chartLimit = 500;
 const chartSpan = ref<'hour' | 'day'>('hour');
 const chartSrc = ref('active-users');
 const heatmapSrc = ref<HeatmapSource>('active-users');
-const subDoughnutEl = shallowRef<HTMLCanvasElement>();
-const pubDoughnutEl = shallowRef<HTMLCanvasElement>();
+const subDoughnutEl = useTemplateRef('subDoughnutEl');
+const pubDoughnutEl = useTemplateRef('pubDoughnutEl');

 const { handler: externalTooltipHandler1 } = useChartTooltip({
 	position: 'middle',
--- a/packages/frontend/src/components/MkInviteCode.vue
+++ b/packages/frontend/src/components/MkInviteCode.vue
@ -90,7 +90,6 @@ function deleteCode() {

 function copyInviteCode() {
 	copyToClipboard(props.invite.code);
-	os.success();
 }
 </script>

--- a/packages/frontend/src/components/MkKeyValue.vue
+++ b/packages/frontend/src/components/MkKeyValue.vue
@ -31,7 +31,6 @@ const props = withDefaults(defineProps<{

 const copy_ = () => {
 	copyToClipboard(props.copy);
-	os.success();
 };
 </script>

--- a/packages/frontend/src/components/MkLaunchPad.vue
+++ b/packages/frontend/src/components/MkLaunchPad.vue
@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { shallowRef } from 'vue';
+import { useTemplateRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import { navbarItemDef } from '@/navbar.js';
 import { deviceKind } from '@/utility/device-kind.js';
@ -48,7 +48,7 @@ const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'pop
 	deviceKind === 'smartphone' ? 'drawer' :
 	'dialog';

-const modal = shallowRef<InstanceType<typeof MkModal>>();
+const modal = useTemplateRef('modal');

 const menu = prefer.s.menu;

--- a/packages/frontend/src/components/MkMediaAudio.vue
+++ b/packages/frontend/src/components/MkMediaAudio.vue
@ -88,7 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { shallowRef, watch, computed, ref, onDeactivated, onActivated, onMounted } from 'vue';
+import { useTemplateRef, watch, computed, ref, onDeactivated, onActivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { MenuItem } from '@/types/menu.js';
 import type { Keymap } from '@/utility/hotkey.js';
@ -151,8 +151,8 @@ function hasFocus() {
 	return playerEl.value === document.activeElement || playerEl.value.contains(document.activeElement);
 }

-const playerEl = shallowRef<HTMLDivElement>();
-const audioEl = shallowRef<HTMLAudioElement>();
+const playerEl = useTemplateRef('playerEl');
+const audioEl = useTemplateRef('audioEl');

 // eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const hide = ref((prefer.s.nsfw === 'force' || prefer.s.dataSaver.media) ? true : (props.audio.isSensitive && prefer.s.nsfw !== 'ignore'));
@ -242,7 +242,7 @@ function showMenu(ev: MouseEvent) {

 	if (prefer.s.devMode) {
 		menu.push({ type: 'divider' }, {
-			icon: 'ti ti-id',
+			icon: 'ti ti-hash',
 			text: i18n.ts.copyFileId,
 			action: () => {
 				copyToClipboard(props.audio.id);
--- a/packages/frontend/src/components/MkMediaImage.vue
+++ b/packages/frontend/src/components/MkMediaImage.vue
@ -168,7 +168,7 @@ function showMenu(ev: MouseEvent) {

 	if (prefer.s.devMode) {
 		menuItems.push({ type: 'divider' }, {
-			icon: 'ti ti-id',
+			icon: 'ti ti-hash',
 			text: i18n.ts.copyFileId,
 			action: () => {
 				copyToClipboard(props.image.id);
--- a/packages/frontend/src/components/MkMediaList.vue
+++ b/packages/frontend/src/components/MkMediaList.vue
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, shallowRef } from 'vue';
+import { computed, onMounted, onUnmounted, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import PhotoSwipe from 'photoswipe';
@ -46,7 +46,7 @@ const props = defineProps<{
 	raw?: boolean;
 }>();

-const gallery = shallowRef<HTMLDivElement>();
+const gallery = useTemplateRef('gallery');
 const pswpZIndex = os.claimZIndex('middle');
 document.documentElement.style.setProperty('--mk-pswp-root-z-index', pswpZIndex.toString());
 const count = computed(() => props.mediaList.filter(media => previewable(media)).length);
--- a/packages/frontend/src/components/MkMediaVideo.vue
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@ -109,7 +109,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { ref, shallowRef, computed, watch, onDeactivated, onActivated, onMounted } from 'vue';
+import { ref, useTemplateRef, computed, watch, onDeactivated, onActivated, onMounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { MenuItem } from '@/types/menu.js';
 import type { Keymap } from '@/utility/hotkey.js';
@ -267,7 +267,7 @@ function showMenu(ev: MouseEvent) {

 	if (prefer.s.devMode) {
 		menu.push({ type: 'divider' }, {
-			icon: 'ti ti-id',
+			icon: 'ti ti-hash',
 			text: i18n.ts.copyFileId,
 			action: () => {
 				copyToClipboard(props.video.id);
@ -299,8 +299,8 @@ async function toggleSensitive(file: Misskey.entities.DriveFile) {
 }

 // MediaControl: Video State
-const videoEl = shallowRef<HTMLVideoElement>();
-const playerEl = shallowRef<HTMLDivElement>();
+const videoEl = useTemplateRef('videoEl');
+const playerEl = useTemplateRef('playerEl');
 const isHoverring = ref(false);
 const controlsShowing = computed(() => {
 	if (!oncePlayed.value) return true;
--- a/packages/frontend/src/components/MkMenu.child.vue
+++ b/packages/frontend/src/components/MkMenu.child.vue
@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, provide, shallowRef, watch } from 'vue';
+import { nextTick, onMounted, onUnmounted, provide, useTemplateRef, watch } from 'vue';
 import MkMenu from './MkMenu.vue';
 import type { MenuItem } from '@/types/menu.js';

@ -28,7 +28,7 @@ const emit = defineEmits<{

 provide('isNestingMenu', true);

-const el = shallowRef<HTMLElement>();
+const el = useTemplateRef('el');
 const align = 'left';

 const SCROLLBAR_THICKNESS = 16;
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@ -15,6 +15,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@focusin.passive.stop="() => {}"
 >
 	<div
+		ref="itemsEl"
+		v-hotkey="keymap"
+		tabindex="0"
 		class="_popup _shadow"
 		:class="$style.menu"
 		:style="{
@ -24,156 +27,150 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@keydown.stop="() => {}"
 		@contextmenu.self.prevent="() => {}"
 	>
-		<slot name="header"></slot>
-		<div
-			ref="itemsEl"
-			v-hotkey="keymap"
-			tabindex="0"
-			:class="$style.menuItems"
-		>
-			<template v-for="item in (items2 ?? [])">
-				<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
-				<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
-					<span style="opacity: 0.7;">{{ item.text }}</span>
-				</span>
-				<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
-					<span><MkEllipsis/></span>
-				</span>
-				<MkA
-					v-else-if="item.type === 'link'"
-					role="menuitem"
-					tabindex="0"
-					:class="['_button', $style.item]"
-					:to="item.to"
-					@click.passive="close(true)"
-					@mouseenter.passive="onItemMouseEnter"
-					@mouseleave.passive="onItemMouseLeave"
-				>
-					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-					<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
-					<div :class="$style.item_content">
-						<span :class="$style.item_content_text">{{ item.text }}</span>
-						<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-					</div>
-				</MkA>
-				<a
-					v-else-if="item.type === 'a'"
-					role="menuitem"
-					tabindex="0"
-					:class="['_button', $style.item]"
-					:href="item.href"
-					:target="item.target"
-					:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
-					:download="item.download"
-					@click.passive="close(true)"
-					@mouseenter.passive="onItemMouseEnter"
-					@mouseleave.passive="onItemMouseLeave"
-				>
-					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-					<div :class="$style.item_content">
-						<span :class="$style.item_content_text">{{ item.text }}</span>
-						<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-					</div>
-				</a>
-				<button
-					v-else-if="item.type === 'user'"
-					role="menuitem"
-					tabindex="0"
-					:class="['_button', $style.item, { [$style.active]: item.active }]"
-					@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
-					@mouseenter.passive="onItemMouseEnter"
-					@mouseleave.passive="onItemMouseLeave"
-				>
-					<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
-					<div v-if="item.indicate" :class="$style.item_content">
-						<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-					</div>
-				</button>
-				<button
-					v-else-if="item.type === 'switch'"
-					role="menuitemcheckbox"
-					tabindex="0"
-					:class="['_button', $style.item]"
-					:disabled="unref(item.disabled)"
-					@click.prevent="switchItem(item)"
-					@mouseenter.passive="onItemMouseEnter"
-					@mouseleave.passive="onItemMouseLeave"
-				>
-					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-					<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
-					<div :class="$style.item_content">
-						<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
-						<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
-					</div>
-				</button>
-				<button
-					v-else-if="item.type === 'radio'"
-					role="menuitem"
-					tabindex="0"
-					:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
-					:disabled="unref(item.disabled)"
-					@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
-					@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
-					@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
-				>
-					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
-					<div :class="$style.item_content">
-						<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
-						<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
-					</div>
-				</button>
-				<button
-					v-else-if="item.type === 'radioOption'"
-					role="menuitemradio"
-					tabindex="0"
-					:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
-					@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
-					@mouseenter.passive="onItemMouseEnter"
-					@mouseleave.passive="onItemMouseLeave"
-				>
-					<div :class="$style.icon">
-						<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
-					</div>
-					<div :class="$style.item_content">
-						<span :class="$style.item_content_text">{{ item.text }}</span>
-					</div>
-				</button>
-				<button
-					v-else-if="item.type === 'parent'"
-					role="menuitem"
-					tabindex="0"
-					:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
-					@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
-					@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
-					@click.prevent="!preferClick ? null : showChildren(item, $event)"
-				>
-					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
-					<div :class="$style.item_content">
-						<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
-						<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
-					</div>
-				</button>
-				<button
-					v-else role="menuitem"
-					tabindex="0"
-					:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
-					@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
-					@mouseenter.passive="onItemMouseEnter"
-					@mouseleave.passive="onItemMouseLeave"
-				>
-					<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-					<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
-					<div :class="$style.item_content">
-						<span :class="$style.item_content_text">{{ item.text }}</span>
-						<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-					</div>
-				</button>
-			</template>
-			<span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]">
-				<span>{{ i18n.ts.none }}</span>
+		<template v-for="item in (items2 ?? [])">
+			<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
+			<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
+				<span style="opacity: 0.7;">{{ item.text }}</span>
 			</span>
-		</div>
-		<slot name="footer"></slot>
+			<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
+				<span><MkEllipsis/></span>
+			</span>
+			<div v-else-if="item.type === 'component'" role="menuitem" tabindex="-1" :class="[$style.componentItem]">
+				<component :is="item.component" v-bind="item.props"/>
+			</div>
+			<MkA
+				v-else-if="item.type === 'link'"
+				role="menuitem"
+				tabindex="0"
+				:class="['_button', $style.item]"
+				:to="item.to"
+				@click.passive="close(true)"
+				@mouseenter.passive="onItemMouseEnter"
+				@mouseleave.passive="onItemMouseLeave"
+			>
+				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
+				<div :class="$style.item_content">
+					<span :class="$style.item_content_text">{{ item.text }}</span>
+					<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+				</div>
+			</MkA>
+			<a
+				v-else-if="item.type === 'a'"
+				role="menuitem"
+				tabindex="0"
+				:class="['_button', $style.item]"
+				:href="item.href"
+				:target="item.target"
+				:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
+				:download="item.download"
+				@click.passive="close(true)"
+				@mouseenter.passive="onItemMouseEnter"
+				@mouseleave.passive="onItemMouseLeave"
+			>
+				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+				<div :class="$style.item_content">
+					<span :class="$style.item_content_text">{{ item.text }}</span>
+					<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+				</div>
+			</a>
+			<button
+				v-else-if="item.type === 'user'"
+				role="menuitem"
+				tabindex="0"
+				:class="['_button', $style.item, { [$style.active]: item.active }]"
+				@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
+				@mouseenter.passive="onItemMouseEnter"
+				@mouseleave.passive="onItemMouseLeave"
+			>
+				<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
+				<div v-if="item.indicate" :class="$style.item_content">
+					<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+				</div>
+			</button>
+			<button
+				v-else-if="item.type === 'switch'"
+				role="menuitemcheckbox"
+				tabindex="0"
+				:class="['_button', $style.item]"
+				:disabled="unref(item.disabled)"
+				@click.prevent="switchItem(item)"
+				@mouseenter.passive="onItemMouseEnter"
+				@mouseleave.passive="onItemMouseLeave"
+			>
+				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+				<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
+				<div :class="$style.item_content">
+					<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
+					<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
+				</div>
+			</button>
+			<button
+				v-else-if="item.type === 'radio'"
+				role="menuitem"
+				tabindex="0"
+				:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
+				:disabled="unref(item.disabled)"
+				@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
+				@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
+				@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
+			>
+				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
+				<div :class="$style.item_content">
+					<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
+					<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
+				</div>
+			</button>
+			<button
+				v-else-if="item.type === 'radioOption'"
+				role="menuitemradio"
+				tabindex="0"
+				:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
+				@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
+				@mouseenter.passive="onItemMouseEnter"
+				@mouseleave.passive="onItemMouseLeave"
+			>
+				<div :class="$style.icon">
+					<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
+				</div>
+				<div :class="$style.item_content">
+					<span :class="$style.item_content_text">{{ item.text }}</span>
+				</div>
+			</button>
+			<button
+				v-else-if="item.type === 'parent'"
+				role="menuitem"
+				tabindex="0"
+				:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
+				@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
+				@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
+				@click.prevent="!preferClick ? null : showChildren(item, $event)"
+			>
+				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
+				<div :class="$style.item_content">
+					<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
+					<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
+				</div>
+			</button>
+			<button
+				v-else role="menuitem"
+				tabindex="0"
+				:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
+				@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
+				@mouseenter.passive="onItemMouseEnter"
+				@mouseleave.passive="onItemMouseLeave"
+			>
+				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
+				<div :class="$style.item_content">
+					<span :class="$style.item_content_text">{{ item.text }}</span>
+					<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+				</div>
+			</button>
+		</template>
+		<span v-if="items2 == null || items2.length === 0" tabindex="-1" :class="[$style.none, $style.item]">
+			<span>{{ i18n.ts.none }}</span>
+		</span>
 	</div>
 	<div v-if="childMenu">
 		<XChild ref="child" :items="childMenu" :targetElement="childTarget!" :rootElement="itemsEl!" @actioned="childActioned" @closed="closeChild"/>
@ -182,7 +179,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts">
-import { computed, defineAsyncComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, unref, watch } from 'vue';
+import { computed, defineAsyncComponent, inject, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, unref, watch, shallowRef } from 'vue';
 import type { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuSwitch, MenuRadio, MenuRadioOption, MenuParent } from '@/types/menu.js';
 import type { Keymap } from '@/utility/hotkey.js';
 import MkSwitchButton from '@/components/MkSwitch.button.vue';
@ -215,11 +212,11 @@ const big = isTouchUsing;

 const isNestingMenu = inject<boolean>('isNestingMenu', false);

-const itemsEl = shallowRef<HTMLElement>();
+const itemsEl = useTemplateRef('itemsEl');

 const items2 = ref<InnerMenuItem[]>();

-const child = shallowRef<InstanceType<typeof XChild>>();
+const child = useTemplateRef('child');

 const keymap = {
 	'up|k|shift+tab': {
@ -260,7 +257,7 @@ watch(() => props.items, () => {
 });

 const childMenu = ref<MenuItem[] | null>();
-const childTarget = shallowRef<HTMLElement | null>();
+const childTarget = shallowRef<HTMLElement>();

 function closeChild() {
 	childMenu.value = null;
@ -435,7 +432,7 @@ onBeforeUnmount(() => {
 .root {
 	&.center {
 		> .menu {
-			.item {
+			> .item {
 				text-align: center;
 			}
 		}
@ -445,7 +442,7 @@ onBeforeUnmount(() => {
 		> .menu {
 			min-width: 230px;

-			.item {
+			> .item {
 				padding: 6px 20px;
 				font-size: 0.95em;
 				line-height: 24px;
@ -458,38 +455,36 @@ onBeforeUnmount(() => {
 		margin: auto;

 		> .menu {
+			padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
 			width: 100%;
 			border-radius: 24px;
 			border-bottom-right-radius: 0;
 			border-bottom-left-radius: 0;

-			> .menuItems {
-				padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
+			> .item {
+				font-size: 1em;
+				padding: 12px 24px;

-				> .item {
-					font-size: 1em;
-					padding: 12px 24px;
-
-					&::before {
-						width: calc(100% - 24px);
-						border-radius: 12px;
-					}
-
-					> .icon {
-						margin-right: 14px;
-						width: 24px;
-					}
+				&::before {
+					width: calc(100% - 24px);
+					border-radius: 12px;
 				}

-				> .divider {
-					margin: 12px 0;
+				> .icon {
+					margin-right: 14px;
+					width: 24px;
 				}
 			}
+
+			> .divider {
+				margin: 12px 0;
+			}
 		}
 	}
 }

 .menu {
+	padding: 8px 0;
 	box-sizing: border-box;
 	max-width: 100vw;
 	min-width: 200px;
@ -501,11 +496,6 @@ onBeforeUnmount(() => {
 	}
 }

-.menuItems {
-	padding: 8px 0;
-	box-sizing: border-box;
-}
-
 .item {
 	display: flex;
 	align-items: center;
--- a/packages/frontend/src/components/MkModal.vue
+++ b/packages/frontend/src/components/MkModal.vue
@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch, ref, shallowRef, computed } from 'vue';
+import { nextTick, normalizeClass, onMounted, onUnmounted, provide, watch, ref, useTemplateRef, computed } from 'vue';
 import type { Keymap } from '@/utility/hotkey.js';
 import * as os from '@/os.js';
 import { isTouchUsing } from '@/utility/touch.js';
@ -100,8 +100,8 @@ const maxHeight = ref<number>();
 const fixed = ref(false);
 const transformOrigin = ref('center');
 const showing = ref(true);
-const modalRootEl = shallowRef<HTMLElement>();
-const content = shallowRef<HTMLElement>();
+const modalRootEl = useTemplateRef('modalRootEl');
+const content = useTemplateRef('content');
 const zIndex = os.claimZIndex(props.zPriority);
 const useSendAnime = ref(false);
 const type = computed<ModalTypes>(() => {
--- a/packages/frontend/src/components/MkModalWindow.vue
+++ b/packages/frontend/src/components/MkModalWindow.vue
@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { onMounted, onUnmounted, shallowRef, ref } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
 import MkModal from './MkModal.vue';

 const props = withDefaults(defineProps<{
@ -47,9 +47,9 @@ const emit = defineEmits<{
 	(event: 'esc'): void;
 }>();

-const modal = shallowRef<InstanceType<typeof MkModal>>();
-const rootEl = shallowRef<HTMLElement>();
-const headerEl = shallowRef<HTMLElement>();
+const modal = useTemplateRef('modal');
+const rootEl = useTemplateRef('rootEl');
+const headerEl = useTemplateRef('headerEl');
 const bodyWidth = ref(0);
 const bodyHeight = ref(0);

--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { computed, inject, onMounted, ref, shallowRef, watch, provide } from 'vue';
+import { computed, inject, onMounted, ref, useTemplateRef, watch, provide } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
@ -271,14 +271,14 @@ if (noteViewInterruptors.length > 0) {

 const isRenote = Misskey.note.isPureRenote(note.value);

-const rootEl = shallowRef<HTMLElement>();
-const menuButton = shallowRef<HTMLElement>();
-const renoteButton = shallowRef<HTMLElement>();
-const renoteTime = shallowRef<HTMLElement>();
-const reactButton = shallowRef<HTMLElement>();
-const clipButton = shallowRef<HTMLElement>();
+const rootEl = useTemplateRef('rootEl');
+const menuButton = useTemplateRef('menuButton');
+const renoteButton = useTemplateRef('renoteButton');
+const renoteTime = useTemplateRef('renoteTime');
+const reactButton = useTemplateRef('reactButton');
+const clipButton = useTemplateRef('clipButton');
 const appearNote = computed(() => getAppearNote(note.value));
-const galleryEl = shallowRef<InstanceType<typeof MkMediaList>>();
+const galleryEl = useTemplateRef('galleryEl');
 const isMyRenote = $i && ($i.id === note.value.userId);
 const showContent = ref(false);
 const parsed = computed(() => appearNote.value.text ? mfm.parse(appearNote.value.text) : null);
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@ -211,7 +211,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { computed, inject, onMounted, provide, ref, shallowRef } from 'vue';
+import { computed, inject, onMounted, provide, ref, useTemplateRef } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
@ -290,14 +290,14 @@ if (noteViewInterruptors.length > 0) {

 const isRenote = Misskey.note.isPureRenote(note.value);

-const rootEl = shallowRef<HTMLElement>();
-const menuButton = shallowRef<HTMLElement>();
-const renoteButton = shallowRef<HTMLElement>();
-const renoteTime = shallowRef<HTMLElement>();
-const reactButton = shallowRef<HTMLElement>();
-const clipButton = shallowRef<HTMLElement>();
+const rootEl = useTemplateRef('rootEl');
+const menuButton = useTemplateRef('menuButton');
+const renoteButton = useTemplateRef('renoteButton');
+const renoteTime = useTemplateRef('renoteTime');
+const reactButton = useTemplateRef('reactButton');
+const clipButton = useTemplateRef('clipButton');
 const appearNote = computed(() => getAppearNote(note.value));
-const galleryEl = shallowRef<InstanceType<typeof MkMediaList>>();
+const galleryEl = useTemplateRef('galleryEl');
 const isMyRenote = $i && ($i.id === note.value.userId);
 const showContent = ref(false);
 const isDeleted = ref(false);
--- a/packages/frontend/src/components/MkNotes.vue
+++ b/packages/frontend/src/components/MkNotes.vue
@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { shallowRef } from 'vue';
+import { useTemplateRef } from 'vue';
 import type { Paging } from '@/components/MkPagination.vue';
 import MkNote from '@/components/MkNote.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
@ -46,7 +46,7 @@ const props = defineProps<{
 	disableAutoLoad?: boolean;
 }>();

-const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
+const pagingComponent = useTemplateRef('pagingComponent');

 defineExpose({
 	pagingComponent,
--- a/packages/frontend/src/components/MkNotification.vue
+++ b/packages/frontend/src/components/MkNotification.vue
@ -169,10 +169,10 @@ import { notePage } from '@/filters/note.js';
 import { userPage } from '@/filters/user.js';
 import { i18n } from '@/i18n.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
-import { signinRequired } from '@/i.js';
+import { ensureSignin } from '@/i.js';
 import { infoImageUrl } from '@/instance.js';

-const $i = signinRequired();
+const $i = ensureSignin();

 const props = withDefaults(defineProps<{
 	notification: Misskey.entities.Notification;
--- a/packages/frontend/src/components/MkNotificationSelectWindow.vue
+++ b/packages/frontend/src/components/MkNotificationSelectWindow.vue
@ -30,13 +30,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { ref, shallowRef } from 'vue';
-import type { Ref } from 'vue';
+import { ref, useTemplateRef } from 'vue';
+import { notificationTypes } from '@@/js/const.js';
 import MkSwitch from './MkSwitch.vue';
 import MkInfo from './MkInfo.vue';
 import MkButton from './MkButton.vue';
+import type { Ref } from 'vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
-import { notificationTypes } from '@@/js/const.js';
 import { i18n } from '@/i18n.js';

 type TypesMap = Record<typeof notificationTypes[number], Ref<boolean>>;
@ -52,7 +52,7 @@ const props = withDefaults(defineProps<{
 	excludeTypes: () => [],
 });

-const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
+const dialog = useTemplateRef('dialog');

 const typesMap = notificationTypes.reduce((p, t) => ({ ...p, [t]: ref<boolean>(!props.excludeTypes.includes(t)) }), {} as TypesMap);

--- a/packages/frontend/src/components/MkNotifications.vue
+++ b/packages/frontend/src/components/MkNotifications.vue
@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { onUnmounted, onDeactivated, onMounted, computed, shallowRef, onActivated } from 'vue';
+import { onUnmounted, onDeactivated, onMounted, computed, useTemplateRef, onActivated } from 'vue';
 import * as Misskey from 'misskey-js';
 import type { notificationTypes } from '@@/js/const.js';
 import MkPagination from '@/components/MkPagination.vue';
@ -41,7 +41,7 @@ const props = defineProps<{
 	excludeTypes?: typeof notificationTypes[number][];
 }>();

-const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
+const pagingComponent = useTemplateRef('pagingComponent');

 const pagination = computed(() => prefer.r.useGroupedNotifications.value ? {
 	endpoint: 'i/notifications-grouped' as const,
--- a/packages/frontend/src/components/MkOmit.vue
+++ b/packages/frontend/src/components/MkOmit.vue
@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { onMounted, onUnmounted, shallowRef, ref } from 'vue';
+import { onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
 import { i18n } from '@/i18n.js';

 const props = withDefaults(defineProps<{
@ -22,7 +22,7 @@ const props = withDefaults(defineProps<{
 	maxHeight: 200,
 });

-const content = shallowRef<HTMLElement>();
+const content = useTemplateRef('content');
 const omitted = ref(false);
 const ignoreOmit = ref(false);

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